Vue.js初体验

1.Vue.js的简单介绍

        Vue.js是目前前端领域一个非常流行的MVVM框架，他不像jquery给我们封装了兼容性的dom操作，Vue不提倡操作dom元素，把程序员从复杂的dom操作中解放出来，让我更多的关心业务逻辑代码的实现，Vue,js提供了很多的指令为我们更方便的数据操作，同时，只要我们修改了vue对象里面的数据，页面就会被重新的渲染。(单向数据流，双向的数据绑定,简单的说就是M-VM-V-M....)

    下面一个简单的小例子说明vue的双向数据绑定(vue.min.js可以找一个CDN),当你改变input框里面的值的时候,页面会重新渲染，上面h2里面的值也会改变,(v-model是一个双向数据绑定的指令)。

head>
   title>title>
   script type='text/javascript'  src='./lib/vue.min.js'>script>
head>

body>
   div id='app'>
     h2>{{msg}}h2>
     input type='input' v-model='msg'>
   div>

body>
 script type='text/javascript'>
   var vm=new Vue({
     el:'#app',
     data:{
       msg:'我爱前端,爱学习vue.js'
     }
   })
 script>

2.vue.js的简单指令

1.   1  v-cloak   [v-cloak] {display: none;}  取消插值表达式网速慢时候的闪烁问题（就是网速很慢解析到{{}}时浏览器出现{{msg}}）。

2.  

3. 2.  v-text  绑定标签样式的指令 例如上面的可以改为

   这样可以 解决闪烁问题。

4. 
   

5. 3 v-html 可以插入html的标签的vue指令

6. 
   

7. 4 v-bind vue绑定属性的指令 可以缩写为：

8.  

9. 5 v-on  vue 提供的绑定事件的指令 可以缩写为@

       6 v-if  vue提供的判断的指令 不成立元素是不会被创建的

       7 v-show vue提供的隐藏元素的指令 元素会创建知识css显示为无，用法和v-if类似。

        

       8 v-for vue提供的元素迭代的指令 可以迭代数组 对象和数字。

3.vm对象和vue绑定事件

      vm对象里面的el 表示vue这个对象需要操作的元素，在这个元素外部的vm对象是不能控制的，不要偷懒给body一个id(高版本的vue不支持)

     

    vm对象的data属性就是当前页面的数据，改变这个data里面的数据，会印发页面的重新渲染。（程序员从复杂的dom操作里面解放了出来)

    

    vm对象的methods属性就是这个vm对象里面的方法注意data和methods里面的方法如果互相访问必须加上this。

body>
   div id='app'>
     h1>{{msg}}h1>
     input type='button' @click='change' value=按钮>
   div>

body>
 script type='text/javascript'>
   var vm=new Vue({
     el:'#app',
     data:{
       msg:'我爱前端,爱学习vue.js'
     },
     methods:{
       change(){
         this.msg='我不爱前端,爱学习java'
       }
     }
   })
 script>

        

    好了，今天的vue.js初体验就到这里了，下次有机会给大家继续介绍其他的知识。

★