Ozzie | 小王子

Vue — 指令大全（超详细）

点滴：绝不做鸡肋的努力

Vue — 指令大全（超详细）

本文纲领：本文会详细介绍 vue 以下指令及其语法、用法，以及指令之间的详细对比，涉及指令有：

v-text，v-html，v-if，v-else，v-else-if，v-show，v-for，v-on，v-bind、v-model，v-pre，v-cloak，v-once

插值表达式（以此引出之后的指令）

数据绑定最常见的形式就是“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被对应数据对象上属性的值替代。只要绑定的数据对象上属性发生了改变，插值处的内容都会更新。
用过 vue 的盆友都清楚，{{ message }} 是将数据解析成纯文本的，也就是说，就算message 中含有了 html 标签，它也是只看做纯文本的，不能输出真正的 html。

例如：

 <div id="app">
 <p>{{ message }}p>
 div>
 <script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message: 'asc
'
		}
	})
script>

v-text

简介：v-text与插值表达式相同的地方是，它也是将数据解析成纯文本（解释html标签可能导致xss攻击），但它与花括号的区别是使用v-text在页面加载时不会显示{{}}，解决了插值表达式闪烁问题，因为他是属性而不是插值表达式

例如：

 <div id="app">
 <p v-text="msg">这里的内容会被替换p>
 div>
 <script>
	var vm = new Vue({
    	el: "#app",
    	data: {
        	msg: "Hello! v-text
",
    	}
	})
 script>

注：“页面闪烁” 指的是在加载插值表达式时，会先直接在页面显示{{ message }}，然后再编译对应的数据

v-html

简介：为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性，会将数据解析成html形式。

例如：

 <div id="app">
 <p v-text="msg">这里的内容会被替换p>
 div>
 <script>
	var vm = new Vue({
    	el: "#app",
    	data: {
        	msg: "Hello! v-html
",
    	}
	})
 script>

v-if

简介：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

例如：

 <div id="app">
 <p v-if="true"> v-if 为 true 时显示p>
 <p v-if="false"> v-if 为 false 时显示p>
 div>
 <script>
	var vm = new Vue({
    	el: "#app",
    	data: {
        	true: true,
        	false: false,
    	}
	})
 script>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中 条件块内的事件监听器 和 子组件 适当地被销毁和重建。
v-if 是惰性的，如果初始渲染时条件为假，那么就什么也不用做，直到第一次条件变为真，才开始渲染条件块。

v-if 通常用于以下两种情况：

多个元素之间，通过条件判断，来展示或者隐藏某个或多个元素。
进行两个视图的切换。

例如下面的代码分别实现了：①type不同值时元素的展示情况；②点击按钮切换视图

 <div id="app">
 	<div style="color:red">v-if的简单实用div>
 	<template>
 		<div v-if="type == 'A'">Adiv>
 		<div v-else-if="type=='B'">Bdiv>
 		<div v-else>Cdiv>
 	template>
 	<div>
		<p>v-if的弹框切换p>
	div>
	<template v-if="loginType === 'username'">
		<label>用户名：label>
		<input placeholder="Enter your username" key="username-input">
	template>
	<template v-else>
		<label>密码：label>
		<input placeholder="Enter your email address" key="email-input">
	template>
	<button @click="changeloginType">切换状态button>
 div>
 <script>
 	var app = new Vue({
 		el: '#app',
 		data: {
			type: 'C',
			loginType: 'username'
		},
		methods: {
			changeloginType() {
				let self = this;
				if (self.loginType == 'username') {
					self.loginType = ''
				} else {
					self.loginType = 'username'
				}
			}
		}
	})
 script>

拓展了解 — 官方文档：条件渲染 — Vue.js

v-else

简介：个人感觉 v-else 并不像一个单独功能的指令，而是偏辅助功能的，而且 v-else 必须和 v-if 连用，否则会报错。

例如：

 <div id="app">
	<p v-if="msg1">The msg1 is truep>
	<p v-else>The msg1 is falsep>
	<input type="button" @click="button" value="Button"/>
 div>
 <script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			msg1: true,
		},
		methods: {
			button: function(){
				this.msg1 = !this.msg1;
			}
		}
	})
 script>

上述过程即为 v-if 与 v-else 连用，若去掉 v-if 部分，则报错为：编译模板时出错

v-else-if

简介：与v-else相同，v-else-if也必须和v-if连用，其实道理很简单，类比 C语言的if、else、else if，这里的v-else-if也是用在v-if和v-else中间，实现多次判断

例如：

 <div id="app">
	<p v-if="10>20">v-if 赢了p>
	<p v-else-if="10>5">v-else-if 赢了p>
	<p v-else>好吧，v-else 赢了p>
 div>
 <script type="text/javascript">
	var app = new Vue({
		el: '#app',
	})
 script>

如果没有v-if，那么也会和上面的v-else一样报错：编译模板时出错

v-show

简介：v-show也是用来 控制元素是否显示 的，其功能与v-if指令相似。

例如：

 <div id="app">
	<p v-show="msg">显示成功p>
	<input type="button" @click="show" value="Do you want to hide it?" />
 div>
 <script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			msg: true,
		},
		methods: {
			show: function(){
				this.msg = !this.msg;
			}
		}
	})
 script>