mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-31 04:54:46 +08:00
730 lines
15 KiB
Markdown
730 lines
15 KiB
Markdown
|
||
> 本文最初发表于[博客园](),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。
|
||
|
||
> 以下是正文。
|
||
|
||
## Vue初体验
|
||
|
||
新建一个空的项目,引入vue.js文件。写如下代码:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<!--vue的版本:2.5.15-->
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
<body>
|
||
<!--这个div区域就是MVVM中的 View-->
|
||
<div id="div1">
|
||
{{name}}
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
//new出来的对象就是MVVM中的 View Module
|
||
var myVue = new Vue({
|
||
el: '#div1', //当前vue对象将接管上面的div区域
|
||
data: {//data就是MVVM中的 module
|
||
name: 'smyhvae'
|
||
}
|
||
});
|
||
</script>
|
||
</html>
|
||
```
|
||
|
||
|
||
显示效果:
|
||
|
||
![](http://img.smyhvae.com/20180313_0955.png)
|
||
|
||
如果我们在控制台输入`myVue.data+='123'`,页面会**自动更新**name的值。
|
||
|
||
|
||
下面来讲一下Vue的各种系统指令。
|
||
|
||
## v-on:注册事件
|
||
|
||
### v-on 的用法举例
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<!--vue的版本:2.5.15-->
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!--这个div区域就是MVVM中的 View-->
|
||
<div id="div1">
|
||
<!-- 给button节点绑定按钮的点击事件 -->
|
||
{{name}}
|
||
<button v-on:click="change">改变name的值</button>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
<script>
|
||
//new出来的对象就是MVVM中的 View Module
|
||
var myVue = new Vue({
|
||
el: '#div1', //当前vue对象将接管上面的div区域
|
||
data: { //data就是MVVM中的 module
|
||
name: 'smyhvae'
|
||
},
|
||
//注意,下方这个 `methods` 是Vue中定义方法的关键字,不能改
|
||
methods: {
|
||
change: function() { //上面的button按钮的点击事件
|
||
this.name += '1';
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
```
|
||
|
||
|
||
上方代码中,我们给button按钮绑定了点击事件。注意,这个button标签要写在div区域里(否则点击事件不生效),因为下方的View module接管的是div区域。
|
||
|
||
|
||
### `v-on`的简写形式
|
||
|
||
例如:
|
||
|
||
```html
|
||
<button v-on:click="change">改变name的值</button>
|
||
```
|
||
|
||
可以简写成:
|
||
|
||
```html
|
||
<button @click="change">改变name的值</button>
|
||
```
|
||
|
||
|
||
### v-on的常用事件
|
||
|
||
- v-on:click
|
||
|
||
- v-on:keydown
|
||
|
||
- v-on:keyup
|
||
|
||
- v-on:mousedown
|
||
|
||
- v-on:mouseover
|
||
|
||
- v-on:submit
|
||
|
||
- ....
|
||
|
||
### v-on的事件修饰符
|
||
|
||
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下:
|
||
|
||
- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。
|
||
|
||
- `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。
|
||
|
||
- `.capture` 添加事件监听器时,使用 capture 模式。
|
||
|
||
- `.self` 只有当事件是从侦听器绑定的元素本身触发时,才触发回调。
|
||
|
||
- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时,才触发回调。
|
||
|
||
- ``.native` 监听组件根元素的原生事件。
|
||
|
||
写法示范:
|
||
|
||
```html
|
||
<!-- click事件 -->
|
||
<button v-on:click="doThis"></button>
|
||
|
||
<!-- 缩写 -->
|
||
<button @click="doThis"></button>
|
||
|
||
<!-- 内联语句 -->
|
||
<button v-on:click="doThat('hello', $event)"></button>
|
||
|
||
<!-- 阻止冒泡 -->
|
||
<button @click.stop="doThis"></button>
|
||
|
||
<!-- 阻止默认行为 -->
|
||
<button @click.prevent="doThis"></button>
|
||
|
||
<!-- 阻止默认行为,没有表达式 -->
|
||
<form @submit.prevent></form>
|
||
|
||
<!-- 串联修饰符 -->
|
||
<button @click.stop.prevent="doThis"></button>
|
||
```
|
||
|
||
|
||
**举例**:(`.prevent`的用法举例)
|
||
|
||
现在有一个form表单:
|
||
|
||
```html
|
||
<form action="http://www.baidu.com">
|
||
<input type="submit" value="表单提交">
|
||
</form>
|
||
```
|
||
|
||
|
||
我们知道,上面这个表单因为`type="submit"`,因此它是一个提交按钮,点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
|
||
|
||
现在,我们可以用`.prevent`来阻止这种默认行为。修改为:点击按钮后,不提交到服务器,而是执行我们自己想要的事件(在submit方法中另行定义)。如下:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Document</title>
|
||
<script src="vue2.5.16.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<!-- 阻止表单中submit的默认事件 -->
|
||
<form @submit.prevent action="http://www.baidu.com">
|
||
<!-- 执行自定义的click事件 -->
|
||
<input type="submit" @click="mySubmit" value="表单提交">
|
||
</form>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
},
|
||
methods: {
|
||
mySubmit: function() {
|
||
alert('ok');
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
```
|
||
|
||
上方代码中,我们通过`.prevent`阻止了提交按钮的默认事件,点击按钮后,执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的,我们甚至可以起名为`submit`,反正默认的submit已经失效了。
|
||
|
||
|
||
## 插值表达式 {{}}
|
||
|
||
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值。例如:
|
||
|
||
```html
|
||
<span>Message: {{ msg }}</span>
|
||
```
|
||
|
||
Mustache 标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。
|
||
无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会**自动更新**。
|
||
|
||
`{{}}`对JavaScript 表达式支持,例如:
|
||
|
||
```javascript
|
||
{{ number + 1 }}
|
||
|
||
{{ ok ? 'YES' : 'NO' }}
|
||
|
||
{{ name == 'smyhvae' ? 'true' : 'false' }}
|
||
|
||
{{ message.split('').reverse().join('') }}
|
||
```
|
||
|
||
|
||
但是有个限制就是,每个绑定都**只能包含单个表达式**,如下表达式无效:
|
||
|
||
```html
|
||
<!-- 这是语句,不是表达式 -->
|
||
{{ var a = 1 }}
|
||
|
||
<!-- 流控制也不会生效,请使用三元表达式 -->
|
||
{{ if (ok) { return message } }}
|
||
```
|
||
|
||
|
||
## v-text
|
||
|
||
v-text可以将一个变量的值渲染到指定的元素中。例如:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<!--vue的版本:2.5.15-->
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="div1">
|
||
<span v-text="name"></span>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#div1',
|
||
data: {
|
||
name: 'hello smyhvae'
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
```
|
||
|
||
结果:
|
||
|
||
|
||
![](http://img.smyhvae.com/20180313_1645.png)
|
||
|
||
## v-html
|
||
|
||
|
||
`v-text`是纯文本,而`v-html`会被解析成html元素。
|
||
|
||
注意:使用v-html渲染数据可能会非常危险,因为它很容易导致 XSS(跨站脚本) 攻击,使用的时候请谨慎,能够使用{{}}或者v-text实现的不要使用v-html。
|
||
|
||
|
||
## v-cloak
|
||
|
||
`v-cloak`:保持和元素实例的关联,直到结束编译后自动消失。
|
||
|
||
|
||
这个指令和CSS 规则一起用的时候,可以隐藏未编译的标签直到实例准备完毕。比如说,在网络很慢的情况下,通过`v-cloak`隐藏元素,当加载完毕后,再显示出来。
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<script src="vue.js"></script>
|
||
<style>
|
||
|
||
/*网络很慢时,在span上加上 v-cloak和css样式控制以后,浏览器在加载时会先把span隐藏起来。
|
||
直到 Vue实例化完毕以后,v-cloak 会自动消失,那么对应的css样式就会失去作用,最终将span中的内容呈现给用户 */
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="div1">
|
||
<span v-cloak>{{name}}</span>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
<script src="vue.js"></script>
|
||
<script>
|
||
new Vue({
|
||
el: '#div1',
|
||
data: {
|
||
name: 'hello1 smyhvae22'
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
|
||
```
|
||
|
||
|
||
## v-bind
|
||
|
||
`v-bind`:给html元素或者组件**动态绑定**一个或多个特性,例如动态绑定style和class。
|
||
|
||
比如说:
|
||
|
||
```html
|
||
<img v-bind:src="imageSrc">
|
||
|
||
<div v-bind:style="{ fontSize: size + 'px' }"></div>
|
||
```
|
||
|
||
|
||
上方代码中的`imageSrc`和`size`其实是Vue实例里面的变量。
|
||
|
||
上面两行代码可以简写成:
|
||
|
||
```html
|
||
<img :src="imageSrc">
|
||
|
||
<div :style="{ fontSize: size + 'px' }"></div>
|
||
```
|
||
|
||
**举例:**
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="div1">
|
||
<!-- value里的值只是简单的字符串 -->
|
||
<input type="text" value="name">
|
||
<!-- 加上 v-bind 之后,value里的值是 Vue 里的变量 -->
|
||
<input type="text" v-bind:value="name">
|
||
<!-- 超链接后面的path是 Vue 里面的变量 -->
|
||
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
<script src="vue.js"></script>
|
||
<script>
|
||
new Vue({
|
||
el: '#div1',
|
||
data: {
|
||
name: 'smyhvae',
|
||
path: `2.html`
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
|
||
```
|
||
|
||
|
||
效果:
|
||
|
||
![](http://img.smyhvae.com/20180313_1745.png)
|
||
|
||
|
||
|
||
## v-model:双向数据绑定
|
||
|
||
上面的一段中,我们通过v-bind,给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时,`<input>`标签里的内容会自动更新。
|
||
|
||
可我现在要做的是:我在`<input>`标签里修改内容,要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢?这就可以利用`v-model`这个属性。
|
||
|
||
代码举例如下:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Document</title>
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<form action="#">
|
||
<input type="text" id="username" v-model="myAccount.username">
|
||
<input type="password" id="pwd" v-model="myAccount.userpwd">
|
||
|
||
<input type="submit" v-on:click="submit1" value="注册">
|
||
|
||
</form>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
var vm = new Vue({
|
||
el: '#app',
|
||
//上面的标签中采用v-model进行双向数据绑定,数据会自动更新到data里面来
|
||
data: {
|
||
name: 'smyhvae',
|
||
myAccount: {username: '', userpwd: ''}
|
||
},
|
||
//在methods里绑定各种方法,根据业务需要进行操作
|
||
methods: {
|
||
submit1: function () {
|
||
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
```
|
||
|
||
|
||
此时,便可实现我们刚刚要求的双向数据绑定的效果。
|
||
|
||
## v-for:for循环
|
||
|
||
**作用**:根据数组中的元素遍历指定模板内容生成内容。
|
||
|
||
### 引入
|
||
|
||
比如说,如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环,就要挨个赋值:
|
||
|
||
|
||
```html
|
||
<body>
|
||
<div id="app">
|
||
<ul>
|
||
<li>{{list[0]}}</li>
|
||
<li>{{list[1]}}</li>
|
||
<li>{{list[2]}}</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
var vm = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
list: [1, 2, 3]
|
||
}
|
||
|
||
});
|
||
</script>
|
||
```
|
||
|
||
效果:
|
||
|
||
![](http://img.smyhvae.com/20180329_1713.png)
|
||
|
||
为了实现上面的效果,如果我用`v-for`进行赋值,代码就简洁很多了:
|
||
|
||
|
||
```html
|
||
<body>
|
||
<div id="app">
|
||
<ul>
|
||
<!-- 使用v-for对多个li进行遍历赋值 -->
|
||
<li v-for="item in list">{{item}}</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
var vm = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
list: [1, 2, 3]
|
||
}
|
||
|
||
});
|
||
</script>
|
||
```
|
||
|
||
接下来,我们详细讲一下`v-for`的用法。需要声明的是,Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
|
||
|
||
|
||
### 数组的遍历赋值
|
||
|
||
针对下面这样的数组:
|
||
|
||
|
||
```html
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
arr1: [2, 5, 3, 1, 1],
|
||
}
|
||
});
|
||
</script>
|
||
```
|
||
|
||
|
||
将数组中的**值**赋给li:
|
||
|
||
```html
|
||
<li v-for="item in arr1">{{item}}</li>
|
||
```
|
||
|
||
|
||
将数组中的**值和index**赋给li:
|
||
|
||
|
||
```html
|
||
<!-- 括号里如果写两个参数:第一个参数代表值,第二个参数代表index -->
|
||
<li v-for="(item,index) in arr1">值:{{item}} --- 索引:{{index}}</li>
|
||
```
|
||
|
||
|
||
效果如下:
|
||
|
||
![](http://img.smyhvae.com/20180329_1856.png)
|
||
|
||
|
||
|
||
### 对象的遍历赋值
|
||
|
||
|
||
针对下面这样的对象:
|
||
|
||
```html
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
obj1: {
|
||
name: 'smyhvae',
|
||
age: '26',
|
||
gender: '男'
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
```
|
||
|
||
将上面的`obj1`对象的数据赋值给li,写法如下:
|
||
|
||
|
||
```html
|
||
<body>
|
||
<div id="app">
|
||
<ul>
|
||
<!-- 括号里如果写两个参数:则第一个参数代表value,第二个参数代表key -->
|
||
<li v-for="(value,key) in obj1">值:{{value}} --- 键:{{key}} </li>
|
||
|
||
<h3>---分隔线---</h3>
|
||
|
||
<!-- 括号里如果写三个参数:则第一个参数代表value,第二个参数代表key,第三个参数代表index -->
|
||
<li v-for="(value,key,index) in obj1">值:{{value}} --- 键:{{key}} --- index:{{index}} </li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
|
||
```
|
||
|
||
效果如下:
|
||
|
||
![](http://img.smyhvae.com/20180329_1850.png)
|
||
|
||
|
||
## v-if:设置元素的显示和隐藏
|
||
|
||
**作用**:根据表达式的值的真假条件,来决定是否渲染元素,如果为false则不渲染(达到隐藏元素的目的),如果为true则渲染。
|
||
|
||
在切换时,元素和它的数据绑定会被销毁并重建。
|
||
|
||
举例如下:(点击按钮时,切换和隐藏盒子)
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Document</title>
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<button v-on:click="toggle">显示/隐藏</button>
|
||
<div v-if="isShow">我是盒子</div>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
isShow: true
|
||
},
|
||
methods: {
|
||
toggle: function() {
|
||
this.isShow = !this.isShow;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
```
|
||
|
||
效果如下:
|
||
|
||
![](http://img.smyhvae.com/20180329_1920.gif)
|
||
|
||
|
||
## v-show:设置元素的显示和隐藏
|
||
|
||
**作用**:根据表达式的真假条件,来切换元素的 display 属性。如果为false,则在元素上添加 `display:none`属性;否则移除`display:none`属性。
|
||
|
||
举例如下:(点击按钮时,切换和隐藏盒子)
|
||
|
||
我们直接把上一段代码中的`v-if`改成`v-show`就可以了:
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Document</title>
|
||
<script src="vue.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<button v-on:click="toggle">显示/隐藏</button>
|
||
<div v-show="isShow">我是盒子</div>
|
||
</div>
|
||
</body>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
isShow: true
|
||
},
|
||
methods: {
|
||
toggle: function() {
|
||
this.isShow = !this.isShow;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</html>
|
||
|
||
```
|
||
|
||
效果如下:
|
||
|
||
![](http://img.smyhvae.com/20180329_2040.gif)
|
||
|
||
**v-if和v-show的区别**:
|
||
|
||
`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素,而`v-show`是在这个元素上添加/移除`style="display:none"`属性。
|
||
|
||
|
||
## 我的公众号
|
||
|
||
想学习<font color=#0000ff>**代码之外的软技能**</font>?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。
|
||
|
||
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
||
|
||
![](http://img.smyhvae.com/2016040102.jpg)
|
||
|
||
|
||
|