Vue.js基础
Vue.js核心视图
Vue.js的数据驱动是基于MVVM模型实现的。
MVVM是一种软件开发思想
Model层，代表数据
View层，代表试图模板
ViewModel 代表业务逻辑处理代码
Vue的基础语法
Vue实例
Vue实例是通过Vue函数创建的对象，是使用Vue功能的基础‘
var vm=new Vue({
//选项对象
})
el选项
选取一个DOM元素作为Vue实例挂载目标
只有挂载元素内部才会被VUe进行处理，外部为普通HTML元素
代表MVVM视图层
可以为CSS选择器格式的字符串或者HTMLElement实例，但不能为html或body
var vm=new Vue（{
el:'#app'
}
var app=documentquerySelector('#app');
var vm=new Vue({
el:app
})
挂载结束后可以通过vm.$el进行访问
var vm=new Vue({
el:'#app'
});
console.log(vm.$el)
未设置el的vue实，可以通过vm.$mount()进行挂载
var vm=new Vue({})
vm.$mount('#app')
插值表达式
挂载元素可以使用Vue.js的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为{{}}.
<div id="app">
<ul>
<li>计算解结果为:{{1+2+3}}</li>
<li>比较结果为:{{2>1?2:1}}</li>
</ul>
</div>
注意：只能书写在标签的内容区域，可以与其他内容混合。
内部只能书写js表达式，不能书写语句
data选项
用于存储Vue实例需要使用到的数据，值为对象类型
new Vue=({
el:'#app',
data:{
title:'标题内容'
}
});
data中的数据可以通过vm.$data。数据或者vm.数据访问
data中的数据可以直接在视图中通过插值表达式访问。
data中的数据为响应式数据，在发生改变时，视图会自动更新
data中存储数组时，索引操作与length操作无法自动更新视图，可以借助Vue.set()方法替代
var vm=new Vue({
el:'#app',
data:{
contentArr:['内容1','内容2''内容3']
}
})
Vue.set(vm.cotentArr,0,'生效的内容')
methods选项
用于存储需要在Vue实例中使用的函数。
<div id="app">
<p>{{fn(value1)}}</p>
<p>{{fn(value2)}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
value1:'a-b-c',
value2:'e-f-g'
},
methods:{
fn(value){
return value.split('-').join('');
}
}
})
methods中的方法可以通过vm.方法名 访问。
方法中的this为vm实例，可以便捷的访问vm数据等功能
Vue.js指令
指令的本质：HTML自定义属性
Vue.js指令：v-开头的自定义属性
v-once指令
使元素其内部的插值表达式只生效一次
<div>
<p>{{ content}}</p>
<p v-once>{{content}}</p>//无论怎么修改content内容，它始终不变
</div>
v-text指令
元素内容整体替换换为指定纯文本数据
<div>
<p v-text="content">这段内容会被覆盖</p>
</div>
v-html指令
将元素内容整体替换为指定的HTML
<div>
<p v-html="content">这段内容会被覆盖</p>//可以加载html结构语句
</div>
v-bind 指令
v-bind指令用于动态绑定HTML
<div id="app">
<p v-bind:title="title">标签内容</p>//简写形式：<p :title="title">
</div>
与插值表达式类似，v-bind中也允许使用表达式
var vm=new Vue({
el:'#app',
data:{
prefix:'demo',
num:5
}
})
<div id="app">
<p :class="'demo'+3">标签内容</p>
<p :class="prefix+num">标签内容</p>
</div>
v-bind 如果需要一次绑定多个属性，还可以绑定对象
<div id="app">
<p v-bind="attrObj">p标签内容</p>
</div>
class绑定
可以通过v-bind进行绑定，并且可以与class属性共存
vue.js对class绑定进行特殊处理
<div id="app">
<p :class="{b:isB,c:isC,'class-d':true}"></p>
</div>
其中isB和isC在data里面设置了布尔值，去判断b,c两类名是否生效
Style绑定
可以通过v-bind进行绑定，并且可以与style属性共存
<div id="app">
<p :style="styleObj">标签内容</p>
<p style="width: 100px;" :style="styleObj">标签内容</p>
</div>
渲染指令v-for指令
用于遍历数据渲染结构，常用的数组与对象均可遍历
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
使用v-for的同时，应该始终指定唯一的key属性可以提高渲染性能并避免问题
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">{{value}}</li>
</ul>
</div>
通过template标签设置模板占位符，可以将部分元素或内容作为整体进行操作
<div id="app">
<template v-for="item in items">
<span></span>
<span></span>
</template>>
</div>
渲染指令v-show指令
用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
<div id="app">
<p v-show="true">这个元素会显示</p>
<p v-show="false">这个元素会隐藏</p>
</div>
注意：
template无法使用v-show指令
渲染指令v-if指令
用于格根据条件控制元素的创建与移出
<div id="app">
<p v-if="true">这个元素会创建</p>
<p v-else-if="false">这个元素不会创建</p>
<p v-else> 这个元素不会创建</p>
</div>
给使用v-if的同类型元素绑定不同的key
事件处理
v-on指令
用于对元素的事件进行绑定
<div id="app">
<p>{{content}}</p>
<button v-on:click="content='新内容'">按钮</button>
//此处可以简写为：@click="content=''"
</div>
当事件代码较多，可以在methods中设置函数，并且设置为事件处理程序
<div id="app">
<p>{{content}}</p>
<button @click="fn">按钮</button>
</div>
在视图中可以通过$event访问事件对象
<button @click="fn(content,$event)"></button>
表单输入绑定v-model指令
用于给input,textarea以及select元素设置双向数据绑定
输入框绑定
输入框分为单行输入框input和多行输入框textarea
<div id="app">
<p>input内容为{{value1}}</p>
<input type="text" v-model="value1">
</div>
单选按钮绑定
<p>radio内容为{{value3}}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">选项1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="two">选项2</label>
</div>
复选框绑定
复选框绑定分为单个选项与多个选项两种情况，书写方式不同
<div id="app">
<p>单个checkbox选中的数据为：{{value4}}</p>
<input type="checkbox" id="item" value="选项内容" v-model="value4">
<label for="item">选项</label>
//返回value值为布尔值
<p>多个checkbox选中的数据为：{{value5}}</p>
<input type="checkbox" id="one" value="选项一内容" v-model="value5">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="选项二内容" v-model="value5">
<label for="two">选项二</label>
</div>
//返回value为当前选项的value
//其中value5在data中以数组接受：value5:[]
选择框绑定
选择框分为单选绑定框和多选绑定框
<div id="app">
<p>单选delect数据为:{{value6}}</p>
<select v-model="value6">
<option value="">请选择</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<p>多选delect数据为:{{value7}}</p>
<select v-model="value7" multiple>
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
</div>
修饰符
修饰符是以点为开头的指令后缀，用于给当前指令设置特殊操作
事件修饰符
prevent修饰符
用于阻止默认事件行为，相当于event.preventDefault()
如：
@click.prevent
stop修饰符
用于阻止事件传播，相当于event.stopPropagation()
@click.stop//vue支持链式调用
once修饰符
用于设置事件只会触发一次
@click.once
按键修饰符
按键码：指的是将按键的按键码作为修饰符使用以标识按钮的操作方式
系统修饰符
系统按键：ctrl,alt等按键，通常与其他按键组合使用
@keyup.ctrl.q="fn"//用ctrl+q键实现某功能
鼠标按键修饰符
用于设置点击事件由鼠标哪个按键来完成
.left .right .middle三种修饰符
v-model修饰符
.trim修饰符
用于自动过滤用户输入内容首位两端的空格
v-model.trim="value"
.lazy修饰符
用于将v-model的触发方式由input事件触发更改为change事件触发。
不会实时更新，当点击input标签以外其他区域时，能实现更新
.number修饰符
用于自动将用户输入的值转换为数值类型，如无法被parseFloat()转换，则返回原始内容
自定义指定
自定义全局指令
全局指令：可以被任意vue实例或组件使用的指令
<div id="app">
<input type="text" v-focus>
</div>
Vue.directive('focus',{ //focus为指令名称
inserted:function(el){
el.focus();
}
})
自定义局部指令
局部指令：在当前vue实例或组件内使用的指令
new Vue({
directives:{
focus:{
inserted(el){
el.focus();
}
}
}
})
过滤器
过滤器·：用于对文本内容格式化处理
过滤器可以在插值表达式和v-bind使用
全局过滤器
Vue.filter('过滤器名称'，function(value){
return '处理结果';
})
通过管道符|链接数据。
<div id="app">
<div v-bind="id|filterId"></div>
<div>{{content|filterContent}}</div>
</div>
可以将一个数据传入到多个过滤器中进行处理
<div id="app">
<div>{{content|filterA|filterB}}</div>
</div>
一个过滤器可以传入多个参数
<div id="app">
<div>{{content|filterContent(part1,part2)}}</div>
</div>
局部过滤器
局部管理器：只能在当前Vue实例中使用
new Vue({
filters:{
过滤器名称:function(value){
return '处理结果';
}
}
})
如果局部和全局同名产生冲突，局部优先
计算属性
计算属性使用时为属性形式，访问时会自动执行对应函数
var vm=new Vue({
el:'#app',
data:{
arr:{1,2,3,4,5}
},
computed:{
result(){
var sum=0;
for(var i=0;i<this.arr.length;i++){
sum+=this.arr[i];
}
return sum;
}
}
})
computed与methods区别
computed具有缓存型
computed通过属性名访问，methods需要调用
computed仅适用于计算操作
计算属性的setter
计算机属性默认只有getter，Vue.js也允许给计算属性setter
var m=new Vue({
computed:{
getResult:{
get:function(){
},
set:function(newValue){
}
}
}
})
侦听器
侦听器用于监听数据变化并执行指定操作
在Vue实例中：
data:{
value:''
},
watch:{
value(newValue,oldValue){
}
}
为了监听对象内部值的变化，需要将watch书写为对象，并设置选项deep:true,这时通过handler设置处理函数
watch:{
obj:{
deep:true,
handler(val,oldVal){
console.log(val,oldVal);
}
}
}
注意：当更改数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组，对象。
Vue.js生命周期
Vue.js生命周期也是实例的生命周期
通过设置生命周期函数（生命周期钩子），可以在生命周期的特定阶段执行功能
创建阶段：
beforeCreate:实例初始化之前调用
created:实例创建后调用
beforeMount:实例挂载之前调用
mounted:实例挂载完毕
特点：每个实例只能执行一次
运行阶段：
beforeUpdate:数据更新后，试图更新前调用
updated:视图更新后调用
特点：按需调用
销毁阶段：
beforeDetory:实例销毁之前使用
destroyed:实例销毁后调用
