目录
好久没更新 vue，上次写这个系列的文章是 1年前吧，而且才写2篇，可能是平时更多的是关注课堂教学内容吧，感觉自己都要落伍了~。不能偷懒~坚持学习~！！
一、什么是指令
指令，是Vue中最常用的一项功能，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。
-
指令带有前缀 v-。Vue 中所有指令都是 v-xxx 的形式。
-
v-xxx 类似于 HTML 标签中的属性。
<div v-xxx>
</div>通过指令，Vue 可以对DOM和数据进行更为方便的操作。
二、 Vue 中常用的指令
1. v-text
相当于标签的 innerText，只能用于双标签中。不过，它不能识别内容中的HTML代码。
let myv = new Vue({
el:"#app",
template:`
<div>
<div v-text="message +'，I am happy.' "></div>
</div>
`,
data:function(){
return {
message:"你好"
}
}
});
指令值本质是js表达式。使用变量不需要插值运算符{ { }}，直接是 data 中的 变量名，或者其他表达式。
这里的变量，必须在 data 中声明。
严格来讲，这里的“变量”其实是 data 的 Object 属性名。
2. v-html
相当于标签的 innerHTML，只能用于双标签中。类似 v-text 指令，不过它可以识别内容中的 HTML 代码。
3.v-if
判断是否插入这个元素。判断结果为true，页面会添加这个元素；false，页面不会添加这个元素。
v-else-if
v-else
v-if ， v-else-if ，v-else 三个指令使用，必须是紧邻的DOM。
<button type="button" v-if="num>10">这个是个测试 v-if </button>
<button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
<button type="button" v-else>这个是个测试 v-else </button>4. v-show
标签显示与否。确定隐藏，会给标签的style 添加 display:none;
注意 v-show , v-if 的差异：
-
v-show 是通过 CSS 的 display属性来显示隐藏标签；
-
v-if 则是纯粹的不插入该元素。
<div id="app">
</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let myv = new Vue({
el:"#app",
template:`
<div>
<div v-text="message + ',I am happy' "></div>
<div v-text="htmlText"></div>
<div v-html="htmlText"></div>
<button type="button" v-if="num>10">这个是个测试 v-if </button>
<button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
<button type="button" v-else>这个是个测试 v-else </button>
<h3 v-show="isIn">测试 v-show </h3>
</div>
`,
data:function(){
return {
message:"你好",
htmlText:"<h1>测试能实现H1标签不呢？</h1>",
isIn: false,
num: 2
}
}
});
</script>5. v-bind
给元素的属性赋值。
-
原生属性，比如 src，value 之类。
-
自定义属性，比如 mydata，myvalue 等程序员自己写的属性。
<div mydata="{
{message}}">message的值是没法赋值给 div的属性 mydata 的</div>正确做法，利用 v-bind，v-bind:属性名=“变量|表达式”
<div v-bind:mydata="message"> OK </div>可以简写 :属性名="变量|表达式"
<div :mydata="message"> OK </div><div id="app">
</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let myv = new Vue({
el:"#app",
template:`
<div>
<div mydata="{
{message}}">看看有无自定义属性的值？？？</div>
<div v-bind:mydata="message" :mynum="num+2"> OK </div>
</div>
`,
data:function(){
return {
message:"你好",
num: 2
}
}
});
</script>6. v-on
给标签绑定原生的事件，以便更好的根据事件操作数据。
v-on:原生事件名=“表达式，给变量进行操作||函数名，调用函数”
简写形式，@原生事件名=“表达式，给变量进行操作||函数名，调用函数”
<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let myv = new Vue({
el:"#app",
template:`
<div>
<div>{
{message+234}}</div>
<h1 v-on:click="message='abc'">点击试试</h1>
<h1 @click="message='xyz'">点击试试</h1>
</div>
`,
data:function(){
return {
message:"test"
}
}
});
</script>7. v-model
我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。
v-model是一个指令，限制在<input>、<select>、<textarea>、components（必须是有value属性的元素）中使用。
在给 < input /> 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件。
<input type="text" v-model="mes">
// 此时mes值就与input的值进行双向绑定<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let myv = new Vue({
el:"#app",
template:`
<div>
<input type="text" v-model="message">
<div>{
{message}}</div>
<button type="button" v-if="message=='abc'"
@click="message='xyz'">这个是按钮</button>
</div>
`,
data:function(){
return {
message:"test"
}
}
});
</script>8. v-for
基本语法： v-for="item in Arr" ， 变量 item 表示的是 数组元素 。
对象操作：v-for="item in Obj" ， 变量 item 表示对象的属性值，或者 方法体。
v-for 中的各变量的顺序：
-
数组：v-for=" ( item，index ) in Arr"
-
对象：v-for=" ( value，key，index ) in Obj "
demo:根据年龄大小，更改背景色
<style>
.a{ background: #ff0;}
.b{ background: #ffad00;}
</style>
<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let myv = new Vue({
el:"#app",
template:`
<div>
<ul>
<li v-for="item in students"
v-bind:class="item.age>17?'a':'b'">
学生姓名：{
{ item.name }} --
年龄：{
{ item.age }}
</li>
</ul>
<div>
数组一共 {
{ students.length }}个学生。
</div>
</div>
`,
data:function(){
return {
students:[
{name:"张三",age:18},
{name:"Lily",age:19},
{name:"Lucy",age:17}
]
}
}
});
</script>代码中，v-for，v-bind 的顺序无所谓。
9. Vue的methods属性
Vue 的methods 定义了 v-on 指令中可以调用的方法。如：
<button type="button" v-on:click="myFun()">点击出现特效</button>methods:{
myFun:function(){
// 方法体
}
}methods中的 $event 参数
传递的 $event 参数其实就是 vue 封装了的 event事件对象。
<button @click=”add(2,$event)”>add</button> let myv = new Vue({
el:"#app",
template:`
<button type="button" v-on:click="myFun($event,message)">
点击出现特效
</button>
`,
data:function(){
return {
message:"Hello,world"
}
},
methods:{
myFun:function(e,msg){
console.info(this); // this 是data return 的对象。
console.info( this.message ); // this.xxx 就可以获取、更改data的数据
console.info(e.target); // 事件对象, 当前标签
alert(msg);
}
}
});