1、Vue是什么?
Vue是一个渐进式的javascript开发框架,通过组件的开发,最后进行组件的组合,合并组件形成页面
构造器(构造函数)
自动化构建工具
优点
1.组件化开发
2.单页面路由
3.丰富的Api方法
4.双向的数据绑定
5.单向数据流
6.易于结合其他第三库
缺点
1.生态系统不够完善
2.可扩展性稍差
vue的使用:
1>. 引入
2>.构造Vue对象
3>. 使用{{}}将数据和DOM绑定
4>.改变数据即可查看效果
4、vue对象介绍:
el:vue的作用域,即只有在这个作用域里面的dom收vue控制
data:vue页面的数据模型,该数据模型为一个javascript对象,且在运行过程中该对象的属性不允许增加,因此页面数据模型必须提前定义好。
methods:事件处理方法对象
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 labelsuccess’:
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:属性名='实际对象'