Vue## 标题
渐进式框架,采用自底向上的增量开发,Vue关注视图层
MVVM
Model-View-ViewModel
采用双向数据绑定,改变数据影响元素,反之亦然。
如何使用Vue:
1、引入Vue的核心JS文件
2、准备Dom结构
3、实例化组件
通过el属性,挂载元素,绑定id为app的html元素
通过data属性,定义数据,可以在html代码段中显示的数据
4、获取数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<!—对应第2步、准备Dom结构–>
<!—对应第4步、双花括号取值–>
{{msg}}
<script type="text/javascript">
/*对应第3步、实例化组件*/
var app = new Vue({
el:"#app", // el:element的简写。挂载元素,绑定id为app的html元素
data:{ // 定义数据,可以在html代码段中显示的数据
msg:"Hello Vue!"
}
});
</script>
注意:双花括号取值时,类似var a = 1的语句不会生效,流控制(if(){}else{})也不会生效(但是可以使用三元表达式?:)。
文本渲染## 标题
指令 (Directives)
是带有 v- 前缀的特殊属性。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
v-text:
显示数据,响应式(默认)
简写:{{}}
v-once:
数据只会更新一次,下次更新数据不影响dom
v-html:
可以显示html元素
上海
" } v-bind v-bind指令可以绑定元素的属性,动态给属性赋值。 比如:v-bind:class、v-bind:style、v-bind:href形式。 v-bind的简写形式: v-bind:属性名="组件中定义的数据" 简化为 : :属性名="组件中定义的数据" 上边的形式可以改写成: :class、:style、:hrefclass绑定## 标题
绑定DOM对象的class样式有以下几种形式:
绑定多个class
使用对象classObject绑定
使用数组classList绑定
绑定的对象可以同时切换多个class
对象和数组绑定的区别:
对象可以控制class的添加和删除;数组不能控制删除
例子:
data:{
classObj:{
red:true,
green:false,
item:true
},
classList:["red","item","test"]
}
style绑定## 标题
绑定形式跟class一致:
使用内联对象Object
直接传入对象styleObject
使用数组对象styleList
例子:
data:{
styleObj:{
‘color’:‘red’,
‘font-size’:‘30px’,
‘font-family’:‘楷体’
},
styleObj2:{
‘background’:‘pink’
}
}
绑定事件## 标题
v-on
语法:
v-on:事件名
简写:
@事件名
方法事件处理器
一般来说事件会绑定一个方法,在方法内部处理相关的事件逻辑。
需要在methods属性中定义方法,然后v-on引用对应相关的方法名。
例子:
<button @click=“addCount()”>add
<button @click=“downCount”>add
//绑定的是methods中定义的方法
el:"#app",
data:{
count:0
},
methods:{
addCount:function(){
this.count++;
},
downCount:function(){
this.count–;
}
}
下面这种方式能够获得事件对象
<button @click=“addCount($event)”>add
事件修饰符## 标题
在事件处理程序中调用 event.preventDefault()(阻止元素发生默认行为) 或 event.stopPropagation()(阻止事件冒泡到父元素) 是非常常见的需求。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。
stop : 阻止event冒泡,等效于event.stopPropagation()
prevent : 阻止event默认事件,等效于event.preventDefault()
capture : 事件在捕获阶段触发
self : 自身元素触发,而不是子元素触发
once : 事件只触发一次
例子:
<div @click=“father”>
<div @click=“child”>child
stop : 阻止event冒泡
<div @click=“father”>
<div @click.stop=“child”>child
prevent : 阻止event默认事件
<a href="http://www.baidu.com" @click.prevent="prevent1">百度</a>
<hr />
capture : 事件在捕获阶段触发
<div @click.capture=“father”>
<div @click.capture=“child”>child
self : 自身元素触发,而不是子元素触发
<div @click.self=“father”>
father
<div @click=“child”>child
once : 事件只触发一次
<div @click.once=“child”>child
键值修饰符## 标题
在监听键盘事件时,我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
例子:
条件渲染## 标题
1、v-if
当条件返回true时,执行
2、v-else
当if条件不满足时,执行(要结合v-if一起使用)
3、v-else-if
当满足条件时执行(要结合v-if一起使用)
4、v-show
满足条件时显示,不满足隐藏
v-if 和 v-show
两者的区别是v-if是“真正”的条件渲染,只有为true时才会被渲染。v-if也是“惰性”的,假如初始条件为false,那么条件变为true时才会发生第一次渲染。
v-show只是CSS的display属性的切换,不论初始条件是否成立,都会进行html渲染,然后改变display的值为none或者block。
一般来说v-if开销比较大,如果需要频繁切换显示不显示使用v-show,需要进行条件判断的但是改变很少的使用v-if。
成年啦
刚成年
小屁孩
<hr />
<h4 v-show="flag">你能看见我!</h4>
v-if:不满足条件的标签,根本不会存在于页面上
v-show:不满足条件的标签会被隐藏(display:none),在页面的代码里还是看得见的
列表渲染v-for
v-for 目测比较重要
可以把一组值进行列表渲染,语法形式: item in items,
items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中,对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
v-for也可以遍历对象,可以指定三个形参:
形式: v-for="(value, key, index) in object"
value: 对象的值
key: 对象的键
index: 遍历的索引
例子:
- {{item.name}}
- {{type}}--{{index}}--{{item.name}}
- {{index}}--{{key}}--{{value}}
el:"#app", data:{ type:"水果", items:[ {name:'西瓜'}, {name:'苹果'}, {name:'菠萝'} ], person:{ name:'Tim', age:12, love:'music' } }
:key
- {{item.name}}
- //用id作为key {id:1,name:'西瓜'}, {id:2,name:'苹果'}, {id:3,name:'菠萝'} 表单校验## 标题
el:"#root",
data:{
uname:"",
msg:"",
validClass:""
},
methods:{
validTxt:function(){
console.log(this.uname);
// 判断用户名的长度是否大于等于6
if (this.uname.length >= 6) {
this.msg=“验证成功”
this.validClass = “success”;
} else {
this.msg=“验证失败”
this.validClass = “error”;
}
}
}
表单输入绑定## 标题
v-model
用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。通过 JavaScript 在组件的 data 选项中声明初始值。单个使用时v-model是逻辑值:true和false,多个一起使用需要指定value值,选中结果绑定v-model的数组。
例子:
<input type="text" v-model="txtMsg" placeholder="请输入用户名..." /> 文本值:{{txtMsg}}
选中状态:{{ck}}
多选结果:{{lesson}}
是否喜欢: {{love}}
<select v-model="selected"> <option>西瓜</option> <option>苹果</option> <option>菠萝</option>
结果: {{selected}}
el:"#root",
data:{
txtMsg:"",
ck:"",
lesson:[],
love:"",
selected:""
}
修饰符## 标题
使用v-model绑定数据后,可以使用修饰进行数据处理:
.lazy:绑定数据默认实时更新,lazy可以在onChange触发
.number:返回数字类型的值,转换不成返回NaN
.trim:去除数据的前后空格
例子:定义组件(Component)## 标题
组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
1、定义组件
Vue自定义组件分为两种:全局注册和局部注册,全局组件可以在任何地方引用,局部组件只能在当前Vue实例使用。
1)全局注册
使用Vue.component(tagName, options)来定义:
2)局部注册
在Vue实例中使用components属性来定义:注意:HTML 特性是不区分大小写的,所有在定义组件时尽量使用中划线“-”来指定组件名。 即使,使用了驼峰标示命名如:myComponent,在页面引用时仍然要使用<my-component>进行引用。
<inner-hello></inner-hello> </div> /*定义全局组件:需要在new Vue之前定义*/ Vue.component("my-hello",{ template:"<h3>Hello Vue</h3>" }); new Vue({ el:"#app" }); new Vue({ el:"#root", components:{ "inner-hello":{ template:"<h3>我是局部组件</h3>" } } });
is属性## 标题
标签的外部:
在table标签中直接使用自定义组件,无法正常显示。DOM解析时会解析到
原因是:table/ol/ul/select 这种html标签有特殊的结构要求,不能直接使用自定义标签。他们有自己的默认嵌套规则,比如:
table> tr> [th, td];
ol/ul > li;
select > option
例子:
模板(组件的html结构比较复杂时使用)## 标题 当组件html结构比较复杂时,直接在template属性中定义就不现实了,效率也会很低,此时我们可以使用模板,定义模板的四种形式: 1)直接使用字符串定义 2)使用