一、Vue
1.下载Vue
下载地址:cn.vuejs.org
2.引入Vue
创建vue.js,内容复制官网
3.Vue的基础语法
3.1 Vue的特点
渐进式框架,采用自底向上的增量开发,Vue关注视图层
MVVM:
Model-View-ViewModel
采用双向数据绑定,改变数据影响元素,反之亦然
3.2如何使用Vue
引入Vue的核心JS文件
准备Dom结构
实例化组件
通过el属性,挂载元素,绑定id为App的html元素
el:"#app"
通过data属性,定义数据,可以在html代码啊段中显示的数据
data:{
msg:"Hello Vue!"
}
获取数据,通过Mustache语法(双大括号)的文本插值
{{msg}}
3.3 JavaScript表达式
在Vue模板中,提供了完全的JavaScript表达式支持,注意,只能在模板写入表达式,而不能使用js语句
3.3.1 支持得到表达式
字符串方法操作
<div>{{msg.split(" ").reverse().join(" ")}}</div>
数值运算
<div>{{num+1}}</div>
三目运算符
<div>{{flag?"喜欢":"不喜欢"}}</div>
3.3.2 不支持的表达式
创建对象
流程控制语句
4.指令
是带有v-前缀的特殊属性
指令的职责是,当表达式的值改变时,将七产生的连带影响,响应式作用域DOM
4.1 文本渲染
v-text
显示数据,响应式(默认) 简写:{{}}
v-once
只显示一次
v-html
v-bind
v-bind:属性绑定
简写方法:
:属性名
4.2Class和Style
Class绑定
class
classObj
classList
Style绑定
class一致
直接传入对象styleObject
直接使用数组对象styeList
5.事件
5.1监听事件
绑定事件语法:
v-on:事件名
简写
@事件名
5.2方法事件处理器
需要在methods属性中定义方法
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
addCount:function () {
this.count++;
}
}
});
5.3$event对象
通过这个方法可以得到点击的对象,及内部所有属性
5.4 事件修饰符
事件本身为冒泡触发,从小至大
stop阻止事件冒泡
prevent阻止事件默认行为
capture从大到小
self只有点击当前元素触发行为,而不触发子元素
once只触发一次
@事件.修饰符="方法名"
5.5 键值修饰符
enter
<input v-on:keyup.enter="submit">
6.条件渲染
6.1 v-if
当条件返回true时,执行
6.2 v-else
当不满足if条件时,要结合v-if一起使用
6.3 v-else-if
当不满足if时,结合v-if一起
6.4 v-show
v-if是真正的条件渲染
v-show是显示或隐藏,但是元素本身会创建
7. 列表渲染
7.1 v-for
v-for="item in items"
直接从列表中获取
v-for="(item,index) in items"
根据索引获取
<li v-for="(key,value,index) in person"
根据key索引
7.2key属性
<li v-for="item in items" :key="item.id">
{{item.name}}<li>
7.3取值范围
<h3 v-for="index in 10">{{index}}</h3>
8. 表单输入绑定
利用v-model,来实现输入输出的双向绑定
8.1 文本框Text
<input type="text" v-model="data中的值">
8.2 复选框
<input type="radio" v-model="data中的值">
8.3 单选框
<input type="checkbox" v-model="data中的值">
8.4 选择列表|表单
8.5 修饰符
.lazy
绑定数据默认实时更新,lazy在onChange触发,鼠标失焦后就会触发
.number
将数据转为数字类型
.trim
去除前后空格
二、组件
1.定义组件
1.1全局注册
定义全局组件,只要使用该标签即可触发
Vue.component("my-hello",{
template:"<h3>Hello Vue</h3>"
});
1.2局部注册
在vue表达式内注册组件
new Vue({
el:"#root",
//定义局部组件
components:{
"inner-hello":{
template:"<h4>我是局部组件</h4>"
}
}
});
1.3使用组件
用双标签进行使用
1.4 is属性
当一些组件内无法识别该组件名的表情时需要使用is
<table id="app">
<!--无法使用-->
<tr is="my-hello"></tr>
</table>
table > tr > [th,td]
ol/ul > li
select > option
