vue知识点

1. new Vue（）组件的重要选项：

new Vue({
    //data: 数据model，可用this来获取数据
     data: {
         a: 1,
         b: []
     },
     // methods: 方法
     methods: {
         doSomething: function() {
             //data中的数据可通过this来获取
             console.log(this.a);
             this.a ++;
         }
     },
     //watch： 监听data中的数据变化
     watch: {
         //a是data中的数据a，函数中的val是指变化后现在的值，oldVal是指变化前的值
         'a': function(val, oldVal) {
             console.log(val, oldVal);
         }
    }
})

1. 模板指令： html和vue对象的粘合剂

   1. 数据渲染的三种方式：

      • {{}}: <p> {{ a }} </p>
      • v-text: 数据原样输出，不会编译字符串中的html元素标签<p v-text='a'></p>
      • v-html: 数据中若含有标签属性，会将标签进行编译<p v-html='a'></p>
   2. 控制模块隐藏：v-if、v-show

//html代码
//v-if: 元素不会被渲染
//v-show：通过元素的display: none属性来隐藏
<p v-if='isShow'></p>
<p v-show='isShow'></p>
//vue对象
new Vue ({
    data: {
        isShow: true
    }
});

3.  v-for: 渲染循环列表

//html
<ul>
    <li v-for='item in items'>
        <p v-text='item.label'></p>
    </li>
</ul>
//vue
new Vue ({
    data: {
        items: [
            {label: 'apple'},
            {label: 'banana'}
        ]
    },
})

4. v-on: 事件绑定

//html
<button v-on:click='doThis'></button>
//v-on：click可简写为@click，如下：
<button @click='doThis'></button>
//vue
new Vue({
    methods: {
        doThis: function(sth) {
            console.log('click');
        }
    }
})

5.  v-bind：DOM元素属性的绑定

//html
<img v-bind:src='imageSrc'>
<div :class='{red: isRed}'></div>
<div :class='[classA, classB]'</div>
<div :class='[classA, {classB: isB, classC: isC}]'></div>

小结

• new一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是：data. methods, watch。
• 其中data代表vue对象的数据，methods代表vue对象的方法， watch设置了对象监听的方法。
• vue对象里的设置通过html指令进行关联
• 重要的指令包括
  
  • v-text渲染数据
  • v-if控制显示
  • v-on绑定事件
  • v-for循环渲染等