Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

基本指令：

插值

文本：

mustache语法

利用mustache语法，即双大括号的的表示形式，{{表达式}}，表达式是js表达式或js变量等。

<body>
	<div id="app">
		<h1>{{msg}}</h1>  <!-- mustache语法 -->
	</div>
	<script type="text/javascript">
    let app = new Vue({
      el: "#app",
      data: {
        msg: "你好啊！",
      }
    })
	</script>
</body>

v-text

v-text和mustache语法作用类似，vue会自动的把v-text绑定的变量的值写入到该标签text区域内。

<body>
	<div id="app">
		<h1>{{msg}}</h1>  <!-- mustache语法 -->
		<p v-text="msg"></p>  <!-- 和mustache语法相同 -->
		<!-- h1和p的内容一致 -->
	</div>
	<script type="text/javascript">
    let app = new Vue({
      el: "#app",
      data: {
        msg: "你好啊！",
      }
    })
	</script>
</body>

v-once

只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。

<div id="app">
	<p v-once>{{msg}}</p>  //msg不会改变
	<p>{{msg}}</p>
	<p>
		<input type="text" v-model = "msg">
	</p>
</div>
<script type="text/javascript">
		let app = new Vue({
			el : '#app',
			data : {
				msg : "hello"
			}
		});
</script>

v-pre

原样输出,不会解析渲染。

v-cloak
解决文本闪烁问题，即当网速慢的时候，在渲染完毕之前，可能会出现源代码，加一个v-cloak指令就可以杜绝这种现象，当解析完毕后才会显示。

Html

v-html

当数据的值是一个html标签时，如果用mustache语法或者v-text指令，那么会把原始文本显示出来，并不会渲染HTML标签，用v-html就可以解决这个问题，加一个v-html指令，就会把标签渲染出来，达到了动态获取链接或者其他标签的目的。

<div id="app">
	<div v-html="message"></div>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			message: '<h1>Kilric's Blog</h1>'
		}
	})
</script>

动态绑定属性

v-bind

书写方法：

<div v-bind:class=""> </div>  <!-- 原始书写 -->
<div :class=""></div>       <!--  语法糖 -->

基本使用

<img v-bind:src="imgUrl" alt="vuejs">
<img :src="imgUrl" alt="vuejs">

动态绑定class(对象方法,常用)

<h2 :class="{red:isActived, green:isLine}">{{message}}</h2>

动态绑定class（数组方法）

<h2 :class="[class1 ,classa2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--先用类green，点击后将green类关闭-->
  <h2 :class="getClasses()">{{message}}</h2>  <!-- 调用方法-->
  <button @click="btnClk">切换</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  let app = new Vue({
    el: "#app",
    data: {
      msg: "你好啊！",
      url: '<a href="https://www.baidu.com">百度一下</a>',
      message: "Hello,VueJs",
      isActived: true,
      isLine:true
    },
    methods:{
      btnClk:function(){
        this.isLine=!this.isLine;
      },
      getClasses:function () {
        return {red:this.isActived, green:this.isLine};
      }
    }
  })
</script>
</body>
</html>

事件监听

v-on
书写方法：

<button v-on:click="onClick"> </button>
<button @click="onClick"> </button>  <!-- 语法糖 -- >

绑定单个事件

<!-- body  -->
<div id="app">
<button v-on:click="onClick">点我</button>
</div>

//script
var app = new Vue({
el : '#app',
methods : {
	onClick : function(){
		console.log("clicked");
		},  
	}
})

绑定多个事件

<button v-on='{mouseenter:onEnter,mouseleave:onOut}' v-on:click="onClick">点我</button>

methods : {
	onClick : function(){
			console.log("clicked");
	},
	onEnter : function(){
			console.log("mouseenter");
	},
	onOut : function(){
			console.log("mouseout");
	},
}

为form绑定提交事件

<form v-on:submit="onSubmit">
	<input type="text"><br/>
	<input type="submit" value="提交">
</form>

methods :{
	onSubmit : function(){
		console.log("submitted");
	}
}

由于每次提交页面都会刷新，所以在控制台看不到输出。但是可以避免。

方法一：

为onSubmit传递参数$event,然后调用事件的preveentDefault()方法，阻止默认的提交刷新行为。

<form v-on:submit="onSubmit($event)">

methods :{
	onSubmit: function(e) {
		e.preventDefault();
		console.log("submitted");
	},
}

方法二：

调用prevent修饰符。

<form v-on:submit.prevent="onSubmit">

v-on的修饰符：

.stop:阻止事件冒泡

<div @click="getTitle">
    <button @click="getBtn">按钮</button>
    <button @click.stop="getBtn2">按钮2</button>
</div>

.prevent：阻止默认行为(如前面的阻止刷新)

<form action="Baidu">
    <input type="submit" value="提交">
    <input type="submit" value="提交" @click.prevent="getSubmit">
</form>

.once：事件只触发一次

<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>

.enter:监听enter(确认)键的情况-------（按下\弹起）

<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">

监听其他键：

delete/backspace : @keyup.delete=""

也可以用代号来监听：

显示

v-if和v-else

<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>

v-if为真时，显示v-if的内容，否则显示v-else的内容.

v-show

<h2 v-show="true">显示我</h2>

<body>
	<div id="app">
		<h2 v-if="isShow">{{msg}}</h2>  <!-- isShow为false的时候删除h2，wei true的时候重新创建 -->
		<h2 v-show="isShow">{{msg}}</h2>  <!-- isShow为false的时候把display改为none -->
	</div>
	<script type="text/javascript" src="js/vue.js">	</script>
	<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				msg : "你好!",
				isShow: false
			}
		})
			
	</script>
</body>

v-if和v-show的区别

v-if和v-show的作用都把内容显示和隐藏，不同的是，v-if在元素隐藏的时候，是把整个DOM元素删除。v-show是在DOM元素上添加一个样式，把内容隐藏起来。

input的复用问题

当切换方式发生改变的时候，输入框里面的内容不会清空 .

这是因为VUE后台处理的原因。

因为邮箱登录和密码登录不能同时出现.
在内容渲染到页面的时候，VUE会创建一个虚拟DOM.

所以当邮箱登录和密码登录相互切换的时候，因为组成他们的DOM元素是一样的，为了提升性能，VUE后台作出处理，当DOM元素相同时，它会复用之前的那个DOM，所以导致切换登录方式后，input里面的内容不会改变。其实他们用的就是同一个input。

解决：

<label for="user">密码登录</label>
<input type="text" id="user" placeholder="请输入你的QQ" key="a">

在input里面加上一个key---唯一标识,当两个input里面的key相同时，input就会复用，反之就不会复用.

遍历

v-for遍历数组和对象

遍历数组：

	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies"  :key="item">{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in movies">{{index+1}}: {{item}}</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					movies:["金克丝","卢锡安","亚索","赫卡里姆"]
				}
			})
		</script>
	</body>

遍历对象

	<body>
		<div id="app">
			<ul>
				<!-- v-for最好加一个key，为了更好地复用组件 -->
				<li v-for="(value,key,index) in info"   v-bind="value">{{index+1}}:{{key}}_{{value}} </li>
			</ul>
		</div>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					info :{
						name : "kilric",
						age : 23,
						height : 170
					}
				}
			})
		</script>
	</body>

总结

<ul>
		<!-- 遍历1--10 --> 
		<li v-for="i in 10">{{i}}</li><br> 
        <li v-for="item in array">{{item}}</li><br>
        <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>
        <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>
</ul>

双向数据绑定

v-model

v-model双向数据绑定的实现原理: v-bind + v-on

<div id="app">
    <!-- <input type="text" v-model="message">  -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2>
</div>

v-model 结合radio类型的使用

    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">
    </label>
    <label for="Wman">
        <input type="radio" id="Wman" value="女" v-model="sex">
    </label>
    <h2>你选择的性别是：{{sex}}</h2>

v-model结合checkbox的使用

单选框

    <!-- checkbox 单选框 -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="ischange">同意协议
    </label>
    <h2>你选择的是:{{ischange}}</h2>
    <button :disabled="!ischange">下一步</button><br>

多选框

    <!-- checkbox 多选框 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="兵乓球" v-model="hobbies">兵乓球
    <input type="checkbox" value="排球" v-model="hobbies">排球
    <h2>你的爱好是：{{hobbies}}</h2>

v-model结合select的使用

单选

    <!-- select  单选 -->
    <select name="" id="" v-model="fruit">
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是：{{fruit}}</h2><br><br>

多选

    <!-- select  多选 -->
    <select name="" id="" v-model="fruits" multiple>
        <option value="西瓜">西瓜</option>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="草莓">草莓</option>
    </select>
    <h2>你选择的水果是:{{fruits}}</h2>

值绑定：动态绑定Value的值

    <!-- 值绑定 -->
    <label :for="item" v-for="item in fruitHobbies">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
    </label>

v-model修饰符的使用

lazy 作用：当文本框失去焦点或按 enter 的时候，v-model 才会执行变量的更新.

    <!-- lazy修饰符 -->
    <label for="active">
        <input type="text" id="active" v-model.lazy="message">
    </label>
    <h2>{{message}}</h2>

number 作用：把数据类型转换乘Number类型

    <!-- number修饰符 -->
    <!-- 当type的类型为number类型的时候，v-model绑定的值自动变成String类型 -->
    <input type="number" v-model.number="age">
    <h2>{{age}}---{{typeof(age)}}</h2>

trim 作用：消除字符串连边的空格

    <!-- 3、trim 修饰符 -->
    <input type="text" v-model="trim">
    <h2>{{trim}}</h2>

Kilric's Blog

Vue的基础模板语法