10-Vue基础2

一、模版指令

通过模版指令(写在html中的)，即是html和vue对象的粘合剂。

• 数据渲染 v-text、v-html、{{}}

    
  
      {{ message }}
    
  

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  

  v-text更新元素的 textContent，v-html更新元素的 innerHTML，内容按普通 HTML 插入，不会作为 Vue 模板进行编译。如果想要title: 'TOMVC 2.0'不以字符串形式显示，就可以使用v-html，

• 控制模块显示隐藏 v-if、v-show

  new Vue({
      el: '#view',
      data: {
        isShow: true
      }
   });
  

  v-if是直接不渲染该元素； v-show是通过display: none进行隐藏;

• 渲染循环列表 v-for
  模板引擎都会提供循环的支持。Vue也不例外，Vue是提供了一个v-for指令。基本的用法类似于foreach的用法。

      
  
          // 遍历数组，取出每个元素
          
  
              {{item.text}}
          
      
  

• 事件绑定 v-on

  
      
      // 简写
      
  
  

• 属性绑定 v-bind
  Vue中不能直接使用{{ expression}} 语法进行绑定html的标签，而是用它特有的v-bind指令，语法<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名">。
  由于v-bind 使用非常频繁，所以Vue提供了简单的写法，可以去掉v-bind直接使用:即可。

• 样式绑定 v-bind
  对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而Vue专门加强了class和style的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。
  经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情。

  // 当isActive为true时，这个div就会添加类名active；当isActive为false时，这个div就会移出类名active；
  
      {{message}}
  
  

     var app = new Vue({
        el: '.view', 
        data: {     
             message: 'hello Vue.',
             isActive: false 
         }
     });
  

• 双向数据绑定 v-model
  上面的例子基本都是单向的js对象向 HTML数据进行绑定，那HTML怎样向js进行反馈数据呢？
  Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

  
      
  {{ message }}
       // 双向数据绑定
      
  
  

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  

二、Vue组件中重要选项

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂载、销毁等过程进行js控制。

• data数据选项，代表vue对象的数据
  创建的Vue对象中的data属性就是用来绑定数据到HTML的，Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。

  
      {{ message }}
  
  

  var app = new Vue({
      el: '#app',
      data: {  // data数据选项
        message: 'Hello Vue!'
      }
   })
  

• methods方法选项，代表vue对象的方法
  方法中的 this 自动绑定为 Vue 实例。

• computed计算属性
  在做数据的绑定的时候,数据要进行处理之后才能展示到html页面上，虽然vue提供了非常好的表达式绑定的方法，但是只能应对低强度的需求，另外放入太多的逻辑会让模板过重且难以维护。而计算属性，即属性可以是一个方法。
  所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，在计算属性中定义的函数里面可以直接使用指向了vue实例的this。

  
     // 计算属性，好处在于会自动根据totalPrice显示不同内容
     {{showStr}}
  
  

  var app = new Vue({
    el: '.view', 
    data: {
      totalPrice: 18
    },
    computed: {  // Vue对象的computed属性
      // 计算属性，但该属性是一个方法
      showStr: function(){  
         // this指向vue实例 
        if(this.totalPrice < 20){
          return '金额小于20，没有优惠喔!'
        } else {
          return '金额大于20，免配送费!'
        }
      }
    }
   });
  

• watch监听选项，设置了对象的监听方法
  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

    var view2 = new Vue({
      el: '#view2',
      data: {
        a: 1
      },
      methods: {
        doSomething: function(){
          this.a++;
        }
      },
      watch: {
        a: function(newvalue, oldvalue){
          console.log(newvalue, oldvalue);
        }
      }
   });
  

三、Vue组件

Vue组件*.vue由三部分组成分别是HTML代码、javascript脚本、css样式。【官方推荐，将三个部分都写到一个.vue文件中】

Vue组件组成

通过webpack打包生成对应代码

四、vue的安装

• 直接通过script引入

  直接下载并用