官网：

https://cn.vuejs.org/

vue的模板渲染指令

{{}}插值表达式

<h1>{{msg}}</h1>

v-html

<!-- ""中是js表达式 -->
<h1 v-html="msg + 1"></h1>
<h1 v-html="'msg'"></h1>

v-text

不能解析html标签

<h1 v-text="<em>111</em>"></h1>

v-bind

绑定动态属性
v-bind:src 等价 :src

<img v-bind:src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">

v-on

绑定事件
v-on:click 等价于 @click

<img :src="'./img/' + imgUrl" alt="" v-on:click="changeUrl">
<img :src="'./img/' + imgUrl" alt="" @click="changeUrl">
....
<script>
new Vue({
  methods: {
    changeUrl(){}
  }
})
</script>

vue的条件渲染指令

v-if

条件为真，则渲染，条件为假，不渲染(没有生成dom对象)

v-else

v-if和v-else要相邻

v-else-if

<p><button @click="toggle()">切换显示和隐藏</button></p>
<div class="box1 box" v-if="isShow">登录框</div>
<div class="box2 box" v-show="isShow">登录框</div>

var vm = new Vue({
    el: '#app',
    data: {
        isShow: true
    },
    methods: {
        toggle(){
            this.isShow = !this.isShow
        }
    }
});

v-show

条件为真，则显示，条件为假，则隐藏(生成了dom对象，css样式为隐藏)

<p><button @click="toggle()">切换显示和隐藏</button></p>
<p v-if="isShow"><button>红色</button></p>
<p v-else v-cloak><button>蓝色</button></p>

vue的列表渲染指令

v-for

数据

data: {
    list: [1, 3, 6],
    person: {
        name: "Rose",
        age: 20,
        address: 'BJ'
    },
    studentsList: [
        {
            name: "Rose1",
            age: 20,
            address: 'BJ'
        },
        {
            name: "Rose2",
            age: 20,
            address: 'BJ'
        },
        {
            name: "Rose3",
            age: 20,
            address: 'BJ'
        }
    ]
},

渲染数组

<ul>
    <li v-for="item in list">{{item}}</li> -->
</ul>
<ul>
    <li v-for="(item,index) in list">{{index}}------{{item}}</li>
</ul>

渲染对象

<ul>
    <li v-for="value in person">{{value}}------ Rose</li>
</ul>
<ul>
    <li v-for="(value,key) in person">{{key}}------ {{value}}</li>
</ul>

渲染数据

<ul>
    <li v-for="(item,index) in studentsList">
        <h3>第{{index+1}}个人的数据</h3>
        <ul>
            <li v-for="(val,key) in item">{{key}}----{{val}}</li>
        </ul>
    </li>
</ul>

数组更新检测

当数组或对象的数据更新，视图却没有触发重新渲染时，可用以下两种方法
Vue.set()
vm.set

methods: {
    changeData() {
        // ====================================数组更新检测

        this.list.push(5)  //可以触发视图更新
        this.list[3] = 5 //不可以触发视图更新

        // 三个参数： 数组，索引，新值
        Vue.set(this.list,3,5)  //可以触发视图更新
        this.$set(this.list,3,5)  //可以触发视图更新


        // =====================================对象的更新检测

        this.person.name = "小李"; //可以触发视图更新
        this.person.sex = "男"; // 不可以触发视图更新

        // 三个参数：对象，属性，新值
        Vue.set(this.person,"sex","男")  //可以触发视图更新
        this.$set(this.list,3,5)  //可以触发视图更新

    }
}