vue（1）基本方法及属性

1. v-for循环数组和对象

      v-for="(value, index) in list"
      v-for="(value, key) in obj"

2. v-text: 插入字符串
   v-html: 可以插入一段html代码

    <p> {{msg}} </p>       进入页面先显示{{msg}}后渲染文字
    <p v-text="msg"></p>   进入页面显示文字
    <p v-html="msg"></p>   进入页面呈现a标签样式
    
    msg: '<a href="#">百度</a>'

3. v-on (@) 绑定事件
   事件修饰符
   .stop 阻止事件冒泡
   .prevent 阻止浏览器的默认行为
4. v-if 条件判断
   v-if
   v-else-if
   v-else (当使用v-if时一定要接着使用v-else-if或v-else)
   v-show （相当于display）
   v-show 和 v-if 区别：当不需要频繁的控制元素的展示和隐藏时，使用v-if。频繁的控制元素的展示和隐藏时，使用v-show
5. v-bind 绑定属性
   v-bind:index="key" => :index="key"
   绑定class：

通过isTag的true（绑定）或false（不绑定）控制class的绑定：
<div v-bind:class="{wrapper : isTag}">123456789</div>

绑定两个class值，固定class值为wrapper，通过三目运算符根据isB的布尔值绑定content：
<div v-bind:class="['wrapper', isB ? 'content' : '']">123456789</div>

通过isTag的布尔值绑定wrapper，isB的布尔值绑定content
<div v-bind:class="{wrapper : isTag, content: isB}">123456789</div>

5. v-model 双向数据绑定 应用于表单元素

当表单类型是复选框时：
1. v-model 的数据类型是数组，当复选框被选中时，会将其value值加入到v-model定义的数组中
2. 在实例化对象中，可设置该数组里的值为某一复选框的value值，即默认选中该复选框，若数组为空数组，即默认不选中任何复选框

 你最喜爱的水果：
    <input type="checkbox" v-model="fruit" value="apple"> 苹果
    <input type="checkbox" v-model="fruit" value="banana"> 香蕉
    <input type="checkbox" v-model="fruit" value="pear"> 梨

当表单类型是单选框时
v-model的数据类型是string，v-model的值存的是被选中一项的value值

性别：
    <input type="radio" v-model="sex" value="1"> 男
    <input type="radio" v-model="sex" value="2"> 女

当表单类型是下拉列表时
v-model的数据类型是string，v-model的值存的是被选中的option的value值

选择城市：
    <select v-model="city">
      <option value="哈">哈尔滨</option>
      <option value="齐">齐齐哈尔</option>
      <option value="牡">牡丹江</option>
      <option value="佳">佳木斯</option>
      <option value="大">大庆</option>
    </select>

6. 修改数组或对象内容
   数组内容不可直接通过this.list[index]=来改变，这种方式只能来修改获取数组中的内容
   但修改对象内容可直接通过this.obj.name=来改变

修改数组
Vue.set(this.list, 0, 999)  //修改的数组，修改第几项，修改后的值
this.$set(this.list, 1, 888)

修改对象
this.obj.name = 'lisi'
Vue.set(this.obj, 'name', 'lisi')
this.$set(this.obj, 'age', 28)

7. 计算属性
   计算的值会被缓存下来，只有用到的属性值发生变化时才会重新计算

computed: {
        sum() {
          return this.a + this.b
        }
      }

8. watch 监测属性的变化
   被监测的属性一旦发生改变就会触发对应的方法

    watch: {
        // 方法中有两个参数 newVal, oldVal
        a: function(newVal, oldVal) {
          console.log(newVal, oldVal)
        },
        b: function() {
          console.log('b is change')
        }
      }