1. Vue第一天
1.1. MVVM模式讲解
M代表模型,V代表视图,VM代表视图模型
在Vue中,M就是Vue实例中data里面定义的数据,V就是Vue实例所托管的区域,VM就是使用Vue实例化出来的对象
1.2. 编码步骤
-
引入vue.js文件
<srcipt src=‘./vue221.js‘></srcipt> -
定义一个vue的管理范围
<div id=‘app‘> </div> vue1.0里面vue的管理区域的id可以定义在html以及body标签上 vue2.0里面不允许这样来做 -
定义一个vue的对象
var vm = new Vue({ el:‘#app‘, // data定义vue实例的所有属性 data:{ // 定义将来要在vue管理区域中使用的数据 name："zs" }, // methods定义vue实例所有的方法 methods：{ fn:function(){ this.name = ‘ls‘ } } })
1.3. 系统指令
1.3.1. {{}}插值表达式
作用:将vue对象中的数据以及表达式显示到vue托管区域中
<!--HTML-->
{{name}}
<!--javascript-->
new Vue({
el:‘#app‘,
// data定义vue实例的所有属性
data:{
// 定义将来要在vue管理区域中使用的数据
name："zs"
},
// methods定义vue实例所有的方法
methods：{
fn:function(){
this.name = ‘ls‘
}
}
})
1.3.2. v-text
输出文本数据,作用类似如
document.innerText
<span v-text=‘name‘></span>
1.3.3. v-html
输出HTML结构数据,作用类似如
document.innerHTML
<div v-html=‘name‘></div>
data：{
name：‘<span>zs</span>‘
}
1.3.4. v-cloak
解决表达式闪烁问题
原理:1.当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,2.当vue.js加载完毕,会自动找到所有的
v-cloak指令,并移除这些指令
1. 定义一个样式
<style>
[v-cloak]{
display:none
}
</style>
2. 使用
<div v-cloak>{{name}}</div>
1.3.5. v-bind
动态给标签或者组件绑定属性
<div v-bind:class = ‘box‘></div>
// 使用:简写v-bind
<div :class = ‘box‘></div>
// 当绑定的属性值是常量字符串+变量时 我们在绑定这个属性时 是需要绑定一个对象,这个对象的键就是需要绑定的属性名 这个对象的值就是常量字符串+变量
<a v-bind="{href:‘http://itcast.cn/index/‘+id}">跳转</a>
// 最终实际效果:
<a href=‘http://itcast.cn/index/1’>跳转</a>
1.3.6. v-on
绑定事件
// v-on:事件名称 = ’事件处理函数’,事件处理函数需要定义在methods对象中
<div v-on:click = ‘click(e)‘></div>
<div @keydown = ‘key(e)‘></div>
new Vue({
el:‘#app‘,
data:{},
methods:{
click:function(e){
console.log(e)
},
key:function(e){
console.log(e)
}
}
})
常用事件
v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-on:submit
事件修饰符:v-on提供了很多事件修饰符来辅助实现一些功能，例如阻止冒泡等
事件修饰符有如下:
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。
1.3.7. v-model
双向数据绑定:可以使用的标签:
inputtextareaselect组件(components)
// 可以使用的标签:input textarea select 组件
<input v-model=‘name‘></input>
// name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化
1.3.8. v-for
循环输出HTML元素
<div v-for=‘(item,index) in list‘ :key = ‘index‘>{{item.name}}</div>
1.3.9. v-if
根据表达式值的真假决定元素的显示隐藏,增加移除DOM元素实现
// isShow为true显示div 为false隐藏div
// v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
<div v-if=‘isShow‘></div>
1.3.10. v-show
根据表达式值的真假决定元素的显示隐藏,控制元素的显示隐藏样式实现
// isShow为true显示div 为false隐藏div
// v-show是操作div的样式 显示时添加 style = ‘display:block‘; 隐藏时添加style = ‘display:none‘
<div v-if=‘isShow‘></div>
v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制
1.4. 品牌案例
1.4.1. 品牌列表
数据驱动视图,需要展示的内容全部从数据中得到,数据发生变化,视图显示也会发生变化
1.在vue实例中定义好需要显示的数据源
new Vue({
el:‘#app‘,
data:{
// 数据源
list:[
{id:1,name:‘奔驰‘,ctime:new Date}
]
}
});
2. 在Vue的托管区域中,通过v-for指令循环渲染数据源中的数据
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#">删除</a>
</td>
</tr>
1.4.2. 无数据提示
为了良好的用户体验,在没有数据的时候,应该提示用户暂无数据,当有数据的时候,隐藏掉提示信息.可以用到
v-if或者v-show根据数据源数组的长度进行控制。
// 1. 当数组中有数据时,list.length == 0不成立,表达式返回结果为false
// 2. v-show = ‘false‘ 会隐藏当前元素
// 3. 当数组中没有数据时,list.length == 0成立,表达式返回结果为true
// 4. v-show = ‘true‘ 会显示当前元素
<tr v-show="list.length==0">
<td colspan="4">列表无数据</td>
</tr>
1.4.3. 添加功能
通过表单元素的双向数据绑定,当用户输入数据时,在程序代码中拿到这些数据,将数据拼装成需要的格式后添加到数据源数组中,数组内容发生了变化,根据数据驱动视图思想,页面中的内容会自动发生更新
// 1. 通过v-model给input标签绑定数据,同时给按钮绑定添加事件
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData">添加数据</button>
// 2. vue实例的data中定义v-model中使用的数据,同时methods中定义添加方法
data:{
list:[
{id:1,name:‘奔驰‘,ctime:new Date}
],
id:0,
pname:‘‘
},
methods:{
addData:function(){
}
}
// 3. addData方法中实现添加逻辑
addData:function(){
// 3.1.0 包装成list要求的对象
var p = {
id:this.id,
name:this.pname,
ctime:new Date()
};
// 3.2.0 将p追加到list数组中
this.list.push(p);
// 3.3.0 清空页面上的文本框中的数据
this.id = 0;
this.pname = ‘‘;
}
1.4.4. 删除功能
删除时只需要根据点击的元素,获取到对应的这个数据的索引,然后从数组中将该项删除掉即可。
// 1. 注册删除事件,同时传入点击的这一项数据的id
<a href="javascript:void(0)" @click="delData(item.id)">删除</a>
// 2. methods中定义delData方法
methods:{
delData:function(){
}
}
// 3. 实现删除逻辑
delData:function(id){
// 1.0 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function(item){
return item.id == id
});
// 2.0 调用的 list.splice(删除元素的索引，删除的元素个数)
this.list.splice(index,1);
}