vue.js基础（指令）

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

开发环境版本

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

mustache语法

	<div id="app">
		{{ message }}
	</div>

	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!'
		}
	})

vue指令
v-text

	<span v-text="message"></span>

等价于

	<span>{{ mseeage }}</span>

v-text会替换掉标签中的文本，如果需要其他文本共存需要做拼接，多此一举，实际开发中很少使用

v-html
类似js中的innerHTML，将传入字符直接作为html渲染

	<div id="app">
		<div v-html:"abc"></div>
	</div>

	var vm = new Vue({
		el: '#app',
		data: {
			abc: '<p>abc</p>'
		}
	})

v-pre
跳过vue的渲染，直接显示原始的Mustache标签，可以加快编译速度

v-cloak
这个指令保持在元素上直到关联实例结束编译
和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

	[v-cloak] {
		display: none;
	}

	<div v-cloak>
		{{ message }}
	</div>

v-once
只渲染一次，之后重新渲染会视为静态内容直接跳过，优化更新的性能

v-if和v-else

	<a v-if="ok">yes</a>
	<a v-else>no</a>

上述代码中，属性值ok为true，那么yes会被渲染，no会被跳过
同样也可以通过v-else-if来更方便的实现switch语句

v-show
根据条件是否展示元素
和v-if的区别：
v-if的元素被跳过即直接销毁，不存在与DOM中，而v-show只是修改了display的属性

v-for
类似js中的for循环，遍历数组进行渲染‘’

	<ul id="#app">
		<li v-for="item in arr">{{ item }}</li>
	</ul>

	var vm = new Vue({
		el: '#app',
		data: {
			arr: [1,2,3]
		}
	})

v-bind
动态绑定
对象语法：

	<div id="app">
	    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
	</div>
	<script>
	    var vm = new Vue({
	        el: '#app',
	        data: {
	            isActive: true,  
	            hasError: false
	        }
	    })
	</script>

数组语法：

	<div id="app">
	    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
	</div>
	<script>
	    var app = new Vue({
	        el: '#app',
	        data: {
	            activeClass: false,
	            errorClass: 'text-danger'
	        }
	    })
	</script>

v-model
双向数据绑定
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值

	<div id="app">
	    <input v-model="message">
	    <p>{{ message }}</p>
	</div>
	<script>
	    var app = new Vue({
	        el: '#app',
	        data: {
	            somebody: "abc"
	        }
	    })
	</script>

v-model修饰符（简写 : ）

.lazy
默认情况下v-model会同步input框的值和数据，.lazy可以转化为change事件触发时同步
.number
将用户输入的值自动转化为number类型
.trim
过滤用户输入的首尾空格

v-on （简写 @ ）
用于监听dom事件
表达式可以为一个方法名

	<div id="app">
	    <button @click="consoleLog"></button>
	</div>

	<script>
	    var app = new Vue({
	        el: '#app',
	        methods:{
	            consoleLog:function (event) {
	                console.log(1)
	            }
	        }
	    })
	</script>

事件修饰符

.stop 阻止事件继续传播
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为