Vue（一）指令

1.1 {{value}} 数据绑定

<div id="div1">
    姓名：{{name}}，年龄：{{age}},
	出生：{{calcBirth()}}
</div>

<script>
let vm = new Vue({
	el:'#div1',
	data:{
		name:'1',
		age:12
	},
    methods:{
        calcBirth(){
            return new Date.getFullYear() - this.age
        }
    }
});
</script>

1.2 指令

vue 的指令补充了 html 的属性

1.2.1 v-bind（绑定）

{{}} 只能在标签内使用，v-bind 指令可以在属性中使用，一般绑定字符串

<div id="div1">
   <strong v-bind:title="age+'岁'">{{name}}</strong>
</div>

<script>
let vm = new Vue({
	el:'#div1',
	data:{
		name:'1',
		age:12
	}
});
</script>

简写 ：

<strong :title="age+'岁'">{{name}}</strong>

class 的值推荐使用数组

<!--class-->
<div id="div2">
   <strong :class="class_arr"></strong>
</div>

<script>
let vm = new Vue({
	el:'#div2',
	data:{
		class_arr:['aClass','bClass']
	}
});
</script>

style 的值推荐使用 json

<!--style-->
<div id="div2">
   <strong :style="style_arr"></strong>
</div>

<script>
let vm = new Vue({
	el:'#div2',
	data:{
	style_arr:{
            width:'200px',
            background:'green',
            display:'block'
        }
	}
});
</script>

1.2.2 v-model（双向绑定）

数据的 双向绑定，用于输入性的组件 <input /> 之类

<div id="div1">
   <input type="text" v-model="name"/>
</div>
 
<script>
let vm = new Vue({
	el:'#div1',
	data:{
            name:''
	}
});
</script>

1.2.3 v-html（解析 html）

可以将字符串中的 html 标签激活。注意需要对字符串做检测，防止注入攻击

<div id="div1">
    <div v-html="str"></div>
</div>
 
<script>
let vm = new Vue({
	el:'#div1',
	data:{
        str:'<p>第一段</p><p>第二段</p><p>第三段</p>'
	}
});
</script>

1.2.4 v-on（事件）

<div id="div1">
    <div v-on:click='fun(2)'></div>
</div>
 
<script>
let vm = new Vue({
    el:'#div1',
    data:{
	a:1
    },
    methods:{
        fun(n){
            this.a+=n;
        }
    }
});
</script>

简写 @

<div @click='fun(2)'></div>

1.2.5 v-for（循环）

循环内容	用法
数组	v-for="item,index in array"
json	v-for="val,key in json"
字符串	v-for="char,index in str"
数字	v-for="i in num"

配合 :key 属性（唯一、不变的），如果不写的话它会自动生成，对于大量循环的数据才需要加

<div id="div1">
    <ul>
        <li v-for="user,index in users" :key="user.id">
        	{{index}} 用户名：{{user.name}} 密码：{{user.pwd}}
        </li>
    </ul>
</div>
 
<script>
let vm = new Vue({
    el:'#div1',
    data:{
	users:[
            {id:'1',name:'zhangsan',pwd:'11111'},
            {id:'2',name:'lisi',pwd:'22222'},
            {id:'3',name:'xiaoming',pwd:'12345'}
        ]
    }
});
</script>

1.2.6 其他指令

指令	作用	示例
v-show	显示/隐藏元素	v-show='true'
v-if	存在/消失元素	v-if='true'
v-once	单次事件	v-once='fun()'
v-pre	预编译，提高性能，防止意外的解析	<div v-pre>{{此内容不会被编译}}</div>
v-cloak	编译后，v-cloak 属性会消失	<div v-cloak></div>

1.3 VM 结构

new Vue({
    el, data, methods
    computed, props, watch, template, router, ...
})