Vue的模板语法和一些指令

上篇对vue的基础知识做了一些介绍，今天开始学习vue的模板语法。

前面讲到Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

关于vue的写法，除了文本插值，我们还可以像这样来绑定元素 attribute：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
</script>

这里看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

下面，介绍一些指令，vue的指令绑定，根据它们的作用和特点，我将它们分为几类：

1. 内容绑定、事件绑定（v-text，v-html，v-on）
2. 显示切换、属性绑定（v-show，v-if，v-bind）
3. 列表循环，表单元素绑定（v-for，v-on补充，v-model）

下面依次来介绍这些指令：

1. v-text指令

作用：设置标签的文本值
举例：

<div id="app">
  <p>{{ message +'//'}}123</p>
	<p v-text="message+'\\'">123</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

效果：

v-text指令特点：

• 指令的作用是设置标签的内容。
• 默认的写法会替换标签内的内容，如果不想替换的话，可以采用另一种，也是官方给的插值的方法。
• 指令是支持表达式的写法的。

2. v-html指令

v-html和v-text其实很相似，如果只是显示文本的话，两和指令的作用是一样的。区别在如果想在文本中显示HTML语句结构并且要渲染的话，就需要v-html来解析了。
举例说明：

<div id="app">
	<p v-text="message"></p>
	<p v-html="message"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: "<a href='https://cn.vuejs.org/'>Vue.js</a>"
  }
})
</script>

运行效果：

可以看到，用v-text只会显示标签内的文本内容，用v-html就可以解析文本内的HTML结构，渲染成对应的效果了。

3. v-on基础

作用：为元素绑定事件，监听输入响应
举例：

<div id="app">
    <button type="button" value="v-on指令" v-on:click="showMeg"></button>
    <button type="button" value="v-on简写" @click="showMeg"></button>
    <p @click="revMeg">{{ message }}</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  methods: {
  	showMeg: function () {
		alert("v-on指令");
},
    revMeg: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

另外，v-on指令调用方法也可以传参：

<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (p) {
      alert(p)
    }
  }
})
</script>

效果：

v-on特点：

• 作用：为元素绑定事件
• 事件名不需要写on
• 指令可以简写成@
• 方法中通过this关键字获取data中的数据
• 绑定的方法定义在methods属性中

4. v-show指令

作用：根据表达式的真假，显示或隐藏元素。
举例：

<div id="app">
    <p v-show="true">Hello!</p>
	<p v-show="isShow">Hello!</p>
	<p v-show="age>=18">Hello!</p>
	<input type="button" value="切换显示状态" @click="changeShow">
	<input type="button" value="切换显示状态" @click="changAge">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    isShow: false,
	age:17
  },
  methods:{
	changeShow:function(){
		this.isShow = !this.isShow;
	},
	changAge:function(){
		this.age++;
	}
}
})
</script>

运行效果如下：

可以看到，原本应该输出3行的数据只输出一行，因为后两行的条件不满足。

点击切换显示状态，isShow的值变为true，第二行就显示了出来

再点击增加年龄，age=18，第三行也显示出来。

v-show特点：

• v-show指令的作用:根据真假切换元素的显示状态
• 原理：修改元素的display,实现显示隐藏
• 指令后面的内容最终都会解析为布尔值
• 值为true元素显示,值为false元素隐藏
• 数据改变之后,对应元素的显示状态会同步更新

5. v-if指令

作用：根据条件的真假，切换元素的显示和隐藏（操纵DOM元素）
举例：

<div id="app">
	<p v-show="isShow">Hello!</p>
	<p v-if="isShow">Hello!</p>
	<input type="button" value="切换显示状态" @click="changeShow">
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    isShow: false
  },
  methods:{
	changeShow:function(){
		this.isShow = !this.isShow;
	}
}
})
</script>

能看到，v-show和v-if的显示效果其实是一样的，它们的区别就在于v-show是针对display操作的，而v-if是针对DOM元素操作的。
从源程序中可以看到：

那么对于v-show和v-if的选择，建议：

若频繁的切换数据，建议用v-show；反之用v-if，因为使用v-if是对DOM元素操作，对系统性能消耗大。

v-if总结：

• v-if指令的作用是:根据表达式的真假切换元素的显示状态
• 本质是通过操纵dom元素来切换显示状态
• 表达式的值为true,元素存在于dom树中为false,从dom树中移除
• 频繁的切换v-show,反之使用v-if,前者的切换消耗小

6. v-bind指令

v-bind 主要用于属性绑定，比如class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

举例：

<div id="app">
	<img v-bind:src="imgSrc" alt="" v-bind:title="imgTtile+'logo'">
	<img :src="imgSrc" alt="" :title="imgTtile+'图标'"><br>
	<a :href="href" :class="{color:isGreen}">vue</a>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    imgSrc: 'https://cn.vuejs.org/images/logo.png',
	href:'https://cn.vuejs.org/',
	imgTtile:"vue",
	isGreen:true
  }
})
</script>

运行效果：

这里用常规的写法和缩写两种方式，都是一样的，对于属性绑定的方式，有两种，一种是三元表达式的形式；一种是我采用的这种对象的形式，这种比较简洁一点。

v-bind特点：

• v-bind指令的作用是:为元素绑定属性
• 完整写法是v-bind:属性名
• 简写的话可以直接省略v-bind,只保留:属性名

7. v-for指令

作用：根绝数据生成列表结构，比如for循环生成

• ，或者循环输出数据

• <div id="app">
    <ul>
  	<li v-for="item in site">
        {{ item.name }}
      </li>
      <li v-for="(value, key, index) in arr">
       {{ index+1 }}. {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
  
  <script>
  new Vue({
    el: '#app',
    data: { 
  	site: [
        { name: 'baidu' },
        { name: 'Google' },
        { name: 'Taobao' }
      ],
      arr: {
        name: '张三',
        age: '18',
        sex: '男'
      }
    }
  })
  </script>
  

  效果：
  
  v-for指令的特点：

  • v-for指令的作用是:根据数据生成列表结构
  • 数组经常和v-for结合使用，也可以是其他形式
  • 语法是 item in site形式的特殊语法，中间的in是固定语法，不能修改，前后的item和site是可以自己设置的，item是数组循环的别名，site是data数据源中设置的数组名。此外还可以写成( item,index,key,value…) in site的形式，index是数组的索引
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面.上，是响应式的

  8. v-on补充

  Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

  Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默认事件
  • .capture - 阻止捕获
  • .self - 只监听触发该元素的事件
  • .once - 只触发一次
  • .left - 左键事件
  • .right - 右键事件
  • .middle - 中间滚轮事件

  <!-- 阻止单击事件冒泡 -->
  <a @click.stop="doThis"></a>
  <!-- 提交事件不再重载页面 -->
  <form @submit.prevent="onSubmit"></form>
  <!-- 修饰符可以串联  -->
  <a @click.stop.prevent="doThat"></a>
  <!-- 只有修饰符 -->
  <form @submit.prevent></form>
  <!-- 添加事件侦听器时使用事件捕获模式 -->
  <div @click.capture="doThis">...</div>
  <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  <div @click.self="doThat">...</div>
  
  <!-- click 事件只能点击一次，2.1.4版本新增 -->
  <a @click.once="doThis"></a>
  

  Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，vue 为最常用的按键提供了别名：

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

  <!-- 按回车触发事件 -->
  <input @keyup.enter="clear">
  <!-- 按Ctrl + Click触发事件 -->
  <div @click.ctrl="doSomething">Do something</div>
  

  9. v-model指令

  作用：根据表单上的值，自动更新绑定的元素的值。（双向数据绑定）。

  举例：

  <div id="app">
  	<!-- 和message属性绑定-->
  	<input type="text" v-model="message" @keyup.enter="getMeg">
  	<input type="button" value="设置message" @click="setMeg">
      <p>{{ message }}</p>
  </div>
  	
  <script>
  new Vue({
    el: '#app',
    data: {
      message: '随便写'
    },
    methods: {
      getMeg: function () {
        alert(this.message);
      },
  	setMeg: function () {
  		this.message = '信息修改了';
  	}
    }
  })
  </script>
  

  
  从运行效果可以看到，在输入框中输入信息时，下方的message值是同步更新的，这就是双向绑定；同样，调用函数修改元素后，和元素绑定的表单的值也同步修改了。

  v-model指令特点：

  • v-model指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据←→表单元素的值

  关于vue的指令就先学习这么多，后面在继续补充。