1、{{ }} 语法
vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式
2、 属性绑定指令 v-bind
由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.vue能够影响区域-->
<div id="app">
姓名：{{uname}}<br />
性别：{{gender}}<br />
身高：{{height}}<br />
姓名：<input type="text" v-bind:placeholder="inputvalue" name="name" />
<br />
<img v-bind:src="imgsrc" />
<br />
<input type="text" :placeholder="inputvalue" name="name" />
<br />
<img :src="imgsrc" />
<br />
{{height+1}},{{ok==true?'真':'假'}}
</div>
<!--2.引入vue.js-->
<script type="text/javascript" src="./js/vue.js" ></script>
<script>
//3.创建vue实例
const vm = new Vue({
el:'#app', //元素id为app
data:{ //model的数据（data）
uname:'张权益',
gender:'男',
height:1.80,
ok:true,
inputvalue:'请输入姓名',
imgsrc:'http://cn.vuejs.org/images/logo.png',
}
});
</script>
</body>
</html>
3、事件绑定指令 v-on
vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。
通过 v-on 绑定的事件处理函数，需要在methods 节点中进行声明。
由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。
在使用 v-on 指令绑定事件时，可以使用 ( ) 进行传参。
$ event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象event被覆盖的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
count:{{count}}
<!--v-on:事件名=“函数”-->
<button v-on:click="addCount"> +1 </button>
<button @click="addCount"> 加1 </button>
</div>
<script type="text/javascript" src="./js/vue.js" ></script>
<script>
const vm = new Vue({
el:'#app',
data:{
count:0,
},
methods:{
addCount(e){ //e是事件对象
const bgcolor = e.target.style.backgroundColor //获得背景色
e.target.style.backgroundColor = ( bgcolor === 'red'?'':'red') //更改背景色
this.count +=1 //count值加1，自动渲染{(count)}
}
}
});
</script>
</body>
</html>
在事件处理函数中调用preventDefault() 或 stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--@事件名.prevent=“函数” 阻止默认行为-->
<a href="http://www.baidu.com" @click.prevent="clickBaidu">baidu</a>
<br />
<!-- @keyup.esc 松开esc键触发 -->
地址：<input type="text" name="address" @keyup.esc="clearInput" />
</div>
<script type="text/javascript" src="./js/vue.js" ></script>
<script>
const vm = new Vue({
el:'#app',
data:{
address:''
},
methods:{
clickBaidu(){
alert(1)
},
clearInput(e){
e.target.value = ''
}
}
});
</script>
</body>
</html>
在不加.present的情况下<a href="http://www.baidu.com" @click="clickBaidu">baidu</a>点击确定后会自动跳转到百度界面，加了之后<a href="http://www.baidu.com" @click.prevent="clickBaidu">baidu</a>点击页面不跳转。
下面地址的文本框内地址：<input type="text" name="address" @keyup.esc="clearInput" />输入文字后，按esc键可以清除其中内容。