vue.js的初步学习

什么是vue.js？

vue.js是一个基于MVVM模式的数据驱动页面的框架，将视图与数据进行双向绑定。

vue.js与jquery的区别

jquery以dom操作为主，通过修改dom对象来修改内容值
vue.js 将数据与js值进行双向绑定，让用户不再进行繁琐的dom操作，专注于业务逻辑。

vue.js基本方法

• vue.js的基本实例：

    var vm = new Vue({ 
        el:"#app", //获取id值为app的区域 
        data:{}, //数据对象
        methods:{} //方法对象
    })
  

• vue.js数据显示：

  <p id="app">{{ msg }}</p>
  
  

   var vm = new Vue({
       el:"#app",
       data:{
           msg:"vue.js"
       }
   })
  

• v-cloak

  v-cloak用在 先加载html结构，后引入vue.js 的时候（即在body中加入引入的script），标签内会先显示"{{ msg }}" 然后才变成 “vue.js”
  
  这时候给标签加上v-cloak属性

   <style>
       [v-cloak]{
           display: none;
       }
   </style>
   <p v-cloak >{{ msg }}</p>
  

  
  这样用加载vue.js之前就不显示内容了
  当然，如果你先引入vue.js（即将script代码放在head中引入）是不会出现这样的情况的。

• v-html和v-text

  很好理解，一个用来加载html代码，一个用来加载文本

     <h4 v-text="msg"></h4>
     <div v-html="msg2"></div>
  

      var vm = new Vue({
          el:"#el",
          data:{
              msg:"vue.js",
              msg2:"<h1 style='color:red';>mvvm</h1>"
          }
      })
  

  显示效果：
  

• v-text和{{ }} 使用上的区别

  v-text和{{ }}都可以加载文本数据，但是v-text会替换掉标签内所有的内容，但是{{ msg }}可以作为一块内容引入，例如：

     <p v-text="msg">是一种mvvm模式的框架</p>
     <p>{{ msg }}是一种mvvm模式的框架</p>