模板语法
插值表达式
<div id="app">
<h1>{{msg}}</h1>
</div>
其中{{表达式}}即为插值表达式
数据绑定指令
v-cloak:
作用：解决插值表达式存在的‘闪动’问题
用法：
先在css中定义样式
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
然后直接在插值表达式的标签中引入即可
<div id="app">
<h1 v-cloak>{{msg}}</h1>
</div>
v-text
作用：填充纯文本
没有闪动问题
<div v-text="msg"></div>
v-html
作用：填充html片段（即可以解析html的标签等）
问题：有安全问题，容易导致跨站脚本攻击
以下代码将会解析msg1中的标签等内容
<div v-html="msg1"></div>
data:{
msg:'HelloVue',
msg1:'<h1>msg1</h1>'
}
v-pre
作用：填充原始信息，跳过编译过程
<div v-pre>{{msg}}</div>
以上代码将会打印{{msg}}而不会解析其真实内容
数据响应式
即代码中的数据通过控制台调试修改的时候页面中的数据会跟着变化，无需刷新页面，Vue通过指令嵌入的数据都是响应式的
数据绑定
将数据填充到标签中
v-once
使该属性标签下的数据，不再具有响应式
双向数据绑定
v-model
作用：实现数据的双向绑定
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="msg">
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
msg:'HelloVue'
}
});
</script>
事件绑定指令
v-on
作用：给标签绑定上事件
<button v-on:click="num++">点击</button>
<button @click="numHandle()">点击</button>
<button @click="numHandle">点击</button>
//以上三种方式，如果有需求需要传递具体参数的时候，只能用第二种带括号的形式，
如果要传递事件参数，那么第二第三种方式均可以，第二种需要在括号内加入 $event 在script 的methods中函数参数也要有一个event，用来接收参数
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
num:0
},
methods:{
numHandle:function (){this.num++}
}
});
</script>
事件修饰符
.stop
作用：阻止冒泡
事件冒泡：是指在一个对象上触发某事件（如click事件），该事件会通过绑定在上面的方法处理该对象，如果没有对该方法进行定义或者返回true，那么该事件会向上传播到父级进行处理，直到到达最顶层。
事件冒泡的例子：
即当一个有父子关系的结构中，当父和子都有绑定事件的时候，点击子事件，如果不加修饰，会冒泡到父组件上，导致父组件的func1函数触发，大多数情况下，不希望发生这种情况，所以要加入.stop事件修饰符
<div @click="fuc1">
<Button @click="fuc2">
</Button>
</div>
.prevent
作用：阻止默认行为，即阻止包含该事件本身的控件的行为，例如让a标签失效
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
属性绑定
<div id="app">
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/'
}
});
</script>
样式绑定
<div id="app">
<div :class="{active:isActive ,error:isError}">样式测试案例 </div>
<div :class="arrClass">样式测试案例</div>
<div :class="objClass">样式测试案例</div>
<button @click="changeStyle">切换</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
isActive:true,
isError:true,
arrClass:['active','error'],
objClass:{
active:true,
error:true
}
},
methods:{
changeStyle:function () {
this.isActive=!this.isActive
this.arrClass[0]='otherClassStyle'
this.objClass.active=false
}
}
});
</script>
分支循环结构
分支结构：
<div id="app">
<span>{{tip}} <input type="text" v-model="number"></span>
<div v-if="number>=80">成绩优秀</div>
<div v-else-if="number>=60">成绩良好</div>
<div v-else>成绩较差</div>
<div v-show="flag">v-show测试</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
tip:'请输入你的成绩：',
number:99,
flag:false
}
});
</script>
v-if 和 v-show的区别：
v-if用来实现包含该命令的标签是否存在，而v-show则实现该标签是否显示（已经存在)
循环结构：
v-for 与 :key配合使用 key的作用是帮助Vue区分不同的元素，从而提高性能。
<div id="app">
<div v-for="(msg , index) in msg" :key="index">{{index}}----{{msg}}</div>
<h1>{{msg}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
msg:['张三','李四','王五']
}
});
</script>
表单域修饰符
number
作用：将表单输入域中的数据响应式的转换成数值类型（默认是字符串类型）
lazy
作用：将input属性转化成change属性，即失去焦点的时候才会进行数据响应式处理
trim
作用：去除输入域开头或结尾的空格
<input type="number" v-model.number='msg'>
<input type="text" v-model.lazy='name'>
<h1>{{name}}</h1>
<button @click="addNumber" >提交</button>
script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
msg:'13',
name:''
},
methods:{
addNumber:function () {
console.log(this.msg+13)
}
}
});
</script>
计算属性与方法：
计算属性作用：与方法类似，当表达式有复杂的逻辑结构时，可以使用计算属性处理，然后直接返回结果
计算属性与方法的区别：计算属性有缓存，方法没有。
computed:{
add:function () {
console.log('computed')
return this.msg+124
}
}
{{add}}
{{add}}
监听属性的应用场景
数据变化伴随着异步处理时，开销较大时，使用监听属性。
<div id="app">
<div>
姓名：<input type="text" v-model.lazy="name">
<span>{{msg}}</span>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
name:'',
msg:''
},
methods:{
checkName:function (name) {
var that = this;
/*通过延时操作模拟异步处理*/
setTimeout(function () {
if (name == 'zhanghao'){
that.msg='验证通过'
}else{
that.msg='验证失败'
}
},2000)
}
},
watch:{
name: function (val) {
this.checkName(val);
this.msg='正在验证中。。。。'
}
}
});
</script>