1、vue优点:轻量级,js语法,入门上手快
2、vue和jQuery比较:jQuery关注Dom;vue关注数据,不关注Dom
3、vue的使用: 1>. 引入
2>.构造Vue对象
3>. 使用{{}}将数据和DOM绑定
4>.改变数据即可查看效果
4、vue对象介绍:
el:vue的作用域,即只有在这个作用域里面的dom收vue控制
data:vue页面的数据模型,该数据模型为一个javascript对象,且在运行过程中该对象的属性不允许增加, 因此页面数据模型必须提前定义好
methods:事件处理方法对象
语法:
var vue = new Vue({
el:'#app',
data:{
},
methods:{
}
}),
5、vue事件处理
1>v-on:<事件名>
v-on:click
6、数据绑定
1>绑定指令:
●v-bind● {{}}
●v-html:以原始数据方式绑定
2>绑定位置:
●文本。文本可以出现的地方
●属性。dom对象的属性,如title,src等
●css。包括style和class绑定
7、vue常用指令
1>条件指令
●v-if
●<p v-if="true">显示</p>
●v-else-if
●v-else
2>v-show
3>循环指令
●v-for
●<li v-for ="todo in todos">
●<li v-for="(todo,index) in todos">
●<li v-for="(value,key,index) in object">
4>表单绑定
●v-model
●<input v-model="name" />
8、Vue样式操作
1>Class属性绑定
●行内对象绑定: {‘label label-success’:active}
●预定义对象绑定: classobj:{'label label-success':true}
●数组绑定:v-bind:class=‘[active,danger]’
2>style属性绑定
●行内对象绑定: {‘color’:activecolor}
●预定义对象绑定: styleobj:{‘color‘:’red’}
●数组绑定:v-bind:style=‘[astyle,bstyle]’
9、Vue初始化方法
Mounted
在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码
10、Vue中的过滤器
filters
在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码
11、vue自定义组件
什么是组件
组件可以理解为页面中的完成某个特定功能的模块
为什么要使用组件
代码复用。DRY(Don't Repeat Yourself)原则
Vue.component('组件名',{props:['属性名'],template:'模板内容'})
自定义组件使用
<组件名>
自定义属性绑定
v-bind:属性名='实际对象'