目录
代码请参考我的github:
https://github.com/masterzz/vue-learn
一、相关概念
Vue是最火的一个框架,React是最流行的一个框架(React可以开发网站和手机app;Vue也是可以进行PC和APP端开发)
Vue、Angular、React并称为前端三大框架,Vue只关注视图层,并且便于和第三方库进行整合。
1,为什么要用框架?
就是为了提升开发效率,时间就是金钱。
提升开发效率的发展历程:原生JS(兼容性问题)——>JQuery(解决兼容性问题,生成dom元素的拼接问题)——>前端模板引擎(解决dom生成问题)——>vue、react、angular(解决dom过多渲染问题,提高渲染效率;双向dom绑定;解决程序员不用关心dom元素,专心于业务逻辑)
在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑
2,框架和库的区别
框架是一套完整的解决方法;对项目的侵入性较大,如果需要换框架,则需要重新架构整个项目。
库(插件):提供一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
3,后端的MVC与前端的MVVM
MVC是后端的分层开发概念
MVVM是前端视图层的概念,视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
二、相关操作
1,如何使用vue
(1)导入vue包
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
(2)创建vue实例,我们new出来的vue就是vm
对其中几个地方进行说明:
- el表示我们new出来的vue对象控制的是页面上的哪个区域;
- data中存放的是el要用到的数据;
- 通过vue提供的指令就能很方便的将数据渲染到页面上,前端vue框架不提倡我们手动去操作dom
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000",
message:'zhubr is a genius',
class1: false
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术,更是梦想!";
}
}
});
(3)在页面中使用vue
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>message : {{message}}</h1>
<h1>{{details()}}</h1>
</div>
可以看出,页面中是不用调用dom,可以直接指定相关dom进行操作。以上内容,分别对应mvvm三个部分:<div id="vue_det">对应v部分,new Vue()则对应vm部分,在vue中的data则对应m。
2,解决时延显示问题
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>message : {{message}}</h1>
<h1>{{details()}}</h1>
</div>
如果引入js在代码之后,可能在渲染之前显示出site : {{site}}之类的内容,可以做如下修改,加入一个样式:
<style>
[v-cloak] {
display:none;
}
</style>
在修改div:
<div id="vue_det" v-cloak>
另外,默认v-text也没有闪烁问题
<h4 v-text="message"></h4>
3,v-text、v-html
data中数据存在如下数据:
message:'zhubr is a genius',
v-text使用:
<h4 v-text="message"></h4>
如果data中的数据是html标签:
msg2:'<h1>我是一个h1</h1>'
输出时想要输出成html标签,则需要用到如下语法:
<div v-html="msg2"></div>
4,v-bind
v-bind提供了绑定属性的功能:
data中存在:
mytitle:'这是我定义的一个按钮'
按钮:
<input type="button" name="button" value="button" v-bind:title="mytitle">
这样就可以把button的title属性变更为mytitle中的内容了。
v-bind会将""内的内容当作表达式来执行。
注意:
也可以这么写:
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'">
则title属性为:这是我定义的一个按钮123
v-bind里可以定义合法的表达式
v-bind的缩写是 :
5,v-on 绑定事件
以button为例:
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'" v-on:click="show">
v-on:click="show"表示,在单击按钮时,调用show方法:
在new Vue({})中添加method:
methods: {
show:function() {
alert('click');
}
}
这样就能实现单击按钮后显示 click。
当然v-on也可以绑定其他时间,比如 v-on:mouseover 之类
v-on的简写是 @
所以这段话:
<input type="button" name="button" value="button" v-bind:title="mytitle + '123'" v-on:click="show">
可以改成:
<input type="button" name="button" value="button" :title="mytitle + '123'" @click="show">
6,事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan;
}
.outer {
padding: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 使用 .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div> -->
<!-- 使用 .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a> -->
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<!-- <div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
<!-- <div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div> -->
<!-- 使用 .once 只触发一次事件处理函数 -->
<!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a> -->
<!-- 演示: .stop 和 .self 的区别 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div> -->
<!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
<!-- <div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
</div> -->
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
div1Handler() {
console.log('这是触发了 inner div 的点击事件')
},
btnHandler() {
console.log('这是触发了 btn 按钮 的点击事件')
},
linkClick() {
console.log('触发了连接的点击事件')
},
div2Handler() {
console.log('这是触发了 outer div 的点击事件')
}
}
});
</script>
</body>
</html>
7,v-model
v-model是唯一一个实现数据双向绑定的标签
<!-- v-bind只能实现数据的单向绑定,从M自动绑定到V当中,无法实现数据的双向绑定 -->
<input type="text" :value="msg">
而v-model则可以实现数据的双向绑定,不仅可以从M到V,而且可以从V到M
像input、select、checkbox、textarea都可以使用v-model
8,使用class样式
(1) 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
(2) 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
(3) 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
(4) 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
9,使用内联样式
1. 直接在元素上通过 `:style` 的形式,书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中
在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象
在data上定义样式:
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
10,v-for
(1)遍历数组
data中有一个数组:list:['a','b','c','d','e']
遍历:
<p v-for="item in list">{{item}}</p>
要想加上索引:
<p v-for="(item,i) in list">索引值:{{i}}----{{item}}</p>
(2)遍历数组对象
list:[
{id:1, name: 'zs1'},
{id:2, name: 'zs2'},
{id:3, name: 'zs3'},
{id:4, name: 'zs4'}
]
遍历的语法:
<p v-for="item in list">{{item}}</p>
要加索引时:
<p v-for="(item,i) in list">{{item}}----索引值:{{i}}</p>
(3)遍历对象
要获取list键值对:
list:{
name:'Micheal',
gender:'male',
hobby:'sleep'
}
遍历:
<p v-for="(key,val) in list">{{ key }}----索引值:{{ val }}</p>
加入索引:
<p v-for="(key,val,i) in list">{{ key }}----索引值:{{ val }}------{{i}}</p>
另外,count可以记录是第几次循环
11,v-for中key的使用
通过这个key可以指定相关添加对象的id
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
<!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
<!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
12,v-if
v-if实现隐藏或者显示:
<h3 v-if="flag">v-if测试</h3>
data中数据:
flag:true,
13,v-show
一个div是否显示,可以用v-show来控制:
data中定义:
flag:false,
div中定义:
<h3 v-show="flag">v-show测试</h3>
那么这个div就不会显示了。
v-if和v-show的区别在于,v-if里的代码完全不会显现,而v-show相当于display:none;
v-if有较高的切换消耗,v-show有较高的渲染消耗。
如果涉及频繁的切换,不要用v-if;但是被显示的可能性较小,则用v-if