add：Vue的系统指令（跑马灯效果举例）
This commit is contained in:
qianguyihao
parent
1c8501d765
commit
11b9053fb3
@ -260,6 +260,7 @@
|
||||
|
||||
var name = "全局的name属性";
|
||||
//obj.sayName();
|
||||
|
||||
//以函数形式调用，this是window
|
||||
//fun(); //可以理解成 window.fun()
|
||||
|
||||
|
||||
@ -59,6 +59,32 @@
|
||||
- npm命令中，--save 和 --save-dev的区别。参考链接：<http://pwcong.me/2017/01/05/npm%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9D%97%E6%97%B6--save-%E4%B8%8E--save-dev-%E7%9A%84%E5%8C%BA%E5%88%AB/>
|
||||
|
||||
|
||||
### 2018-05-07
|
||||
|
||||
- Vue组件的注册
|
||||
|
||||
有一种组件注册的方式是 Vue+jQuery：
|
||||
|
||||
```javascript
|
||||
Vue.component('my-div', $.extend({
|
||||
props:[],
|
||||
methods:{
|
||||
|
||||
},
|
||||
filters:{
|
||||
|
||||
}
|
||||
|
||||
}), vueTpl.subs.myDiv)
|
||||
```
|
||||
|
||||
|
||||
根据 zqc 的建议，不一定要使用`$.extend()`，还可以使用`object.assign()`。
|
||||
|
||||
### 2018-05-08
|
||||
|
||||
- sku的概念
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
20-前端综合/前端中的一些概念.md
Normal file
14
20-前端综合/前端中的一些概念.md
Normal file
@ -0,0 +1,14 @@
|
||||
前端中的一些概念.md
|
||||
|
||||
|
||||
|
||||
## SPU 和 SKU
|
||||
|
||||
### SKU
|
||||
|
||||
SKU（stock keeping unit）：库存量单位。 SKU是物理上不可分割的最小库存单元。
|
||||
|
||||
比如说，同一款手机，颜色有白色、红色，那么，白色和红色的sku是不一样的。
|
||||
|
||||
单品：对一种商品而言，当其品牌、型号、配置、等级、花色、包装容量、单位、生产日期、保质期、用途、价格、产地等属性中任一属性与其他商品存在不同时，可称为一个单品。
|
||||
|
||||
@ -3,6 +3,21 @@
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 本文主要内容
|
||||
|
||||
- 插值表达式 {{}}
|
||||
|
||||
- v-cloak
|
||||
|
||||
- v-text
|
||||
|
||||
- v-html
|
||||
|
||||
- v-bind
|
||||
|
||||
- v-on
|
||||
|
||||
## Vue初体验
|
||||
|
||||
新建一个空的项目，引入vue.js文件。写如下代码：
|
||||
@ -285,9 +300,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
20180506_2330.png
|
||||
|
||||
|
||||
## v-bind
|
||||
## v-bind：属性绑定机制
|
||||
|
||||
`v-bind`：用于绑定属性。
|
||||
`v-bind`：用于绑定**属性**。
|
||||
|
||||
比如说：
|
||||
|
||||
@ -357,65 +372,10 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
|
||||
|
||||
## v-model：双向数据绑定
|
||||
|
||||
上面的一段中，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，`<input>`标签里的内容会自动更新。
|
||||
## v-on：事件绑定机制
|
||||
|
||||
可我现在要做的是：我在`<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-on：注册事件
|
||||
|
||||
### v-on 的用法举例
|
||||
### `v-on:click`：点击事件
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -446,7 +406,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
data: { //data就是MVVM中的 module
|
||||
name: 'smyhvae'
|
||||
},
|
||||
|
||||
//注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
|
||||
//这个 methods 属性中定义了当前Vue实例所有可用的方法
|
||||
methods: {
|
||||
change: function() { //上面的button按钮的点击事件
|
||||
this.name += '1';
|
||||
@ -461,7 +423,6 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
|
||||
|
||||
|
||||
### `v-on`的简写形式
|
||||
|
||||
例如：
|
||||
@ -479,6 +440,9 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
### v-on的常用事件
|
||||
|
||||
v-on 提供了click 事件，也提供了一些其他的事件。
|
||||
|
||||
|
||||
- v-on:click
|
||||
|
||||
- v-on:keydown
|
||||
@ -589,250 +553,188 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
|
||||
|
||||
上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
|
||||
|
||||
## 举例：文字滚动显示（跑马灯效果）
|
||||
|
||||
## v-for：for循环
|
||||
我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。
|
||||
|
||||
**作用**：根据数组中的元素遍历指定模板内容生成内容。
|
||||
**文字滚动显示的思路**：
|
||||
|
||||
### 引入
|
||||
（1）每次点击按钮后，拿到 msg 字符串，然后调用字符串的`substring`来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。这就实现了滚动的效果。
|
||||
（2）为了实现文字**自动连续滚动**的效果，需要把步骤（1）中点击按钮的操作，放到**定时器**中去。
|
||||
|
||||
比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：
|
||||
我们先来看一下 点击事件里的代码改怎么写。
|
||||
|
||||
**步骤 1**：每次点击按钮，字符串就滚动一次。代码如下：
|
||||
|
||||
```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]
|
||||
```javascript
|
||||
startMethod: function () {
|
||||
// 获取 msg 的第一个字符
|
||||
var start = this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
var end = this.msg.substring(1);
|
||||
// 重新拼接得到新的字符串，并赋值给 this.msg
|
||||
this.msg = end + start;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
效果：
|
||||
**步骤2**：给上面的操作添加定时器。代码如下：
|
||||
|
||||
|
||||
|
||||
为了实现上面的效果，如果我用`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]
|
||||
```javascript
|
||||
startMethod: function () {
|
||||
var _this = this;
|
||||
//添加定时器：点击按钮后，让字符串连续滚动
|
||||
setInterval(function () {
|
||||
// 获取 msg 的第一个字符
|
||||
var start = _this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
var end = _this.msg.substring(1);
|
||||
// 重新拼接得到新的字符串，并赋值给 this.msg
|
||||
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
|
||||
_this.msg = end + start;
|
||||
console.log(_this.msg);
|
||||
}, 400);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
|
||||
上面的代码中，我们发现，如果在定时器中直接使用this，这个this指向的是window。为了解决这个问题，我们是通过`_this`来解决了这个问题。
|
||||
|
||||
另外，我们还可以利用箭头函数来解决this指向的问题，因为箭头函数总的this指向，会继承外层函数的this指向。如下。
|
||||
|
||||
### 数组的遍历赋值
|
||||
**步骤2的改进版**：用箭头函数来改进定时器，解决this指向的问题。代码如下：
|
||||
|
||||
针对下面这样的数组：
|
||||
|
||||
|
||||
```html
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
arr1: [2, 5, 3, 1, 1],
|
||||
```javascript
|
||||
startMethod: function () {
|
||||
//添加定时器：点击按钮后，让字符串连续滚动
|
||||
setInterval(() => {
|
||||
// 获取 msg 的第一个字符
|
||||
var start = this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
var end = this.msg.substring(1);
|
||||
// 重新拼接得到新的字符串，并赋值给 this.msg
|
||||
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
|
||||
this.msg = end + start;
|
||||
console.log(_this.msg);
|
||||
}, 400);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
将数组中的**值**赋给li：
|
||||
**步骤3**：停止定时器。如下：
|
||||
|
||||
```html
|
||||
<li v-for="item in arr1">{{item}}</li>
|
||||
```
|
||||
我们还需要加一个按钮，点击按钮后，停止文字滚动。也就是停止定时器。
|
||||
|
||||
提示：我们最好把定时器的id放在全局的位置（放到data里），这样的话，开启定时器的方法和停止定时器的方法，都可以同时访问到这个定时器。
|
||||
|
||||
将数组中的**值和index**赋给li：
|
||||
代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
|
||||
<li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 对象的遍历赋值
|
||||
|
||||
|
||||
针对下面这样的对象：
|
||||
|
||||
```html
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
```javascript
|
||||
data: {
|
||||
obj1: {
|
||||
name: 'smyhvae',
|
||||
age: '26',
|
||||
gender: '男'
|
||||
}
|
||||
msg: '生命壹号，永不止步～～～',
|
||||
intervalId: null
|
||||
},
|
||||
methods: {
|
||||
startMethod: function () {
|
||||
//添加定时器：点击按钮后，让字符串连续滚动
|
||||
this.intervalId = setInterval(() => { //【注意】这个定时器的this，一定不要忘记了
|
||||
// 获取 msg 的第一个字符
|
||||
var start = this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
var end = this.msg.substring(1);
|
||||
// 重新拼接得到新的字符串，并赋值给 this.msg
|
||||
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
|
||||
this.msg = end + start;
|
||||
console.log(_this.msg);
|
||||
}, 400);
|
||||
},
|
||||
|
||||
stopMethod: function () {
|
||||
//停止定时器：点击按钮后，停止字符串的滚动
|
||||
clearInterval(this.intervalId);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
将上面的`obj1`对象的数据赋值给li，写法如下：
|
||||
|
||||
**【重要】步骤4**：一开始的时候，还需要判断是否已经存在定时器。如下：
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<!-- 括号里如果写两个参数：则第一个参数代表value，第二个参数代表key -->
|
||||
<li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>
|
||||
步骤3中的代码，虽然做了停止定时器的操作，但是有个问题：在连续多次点击“启动定时器”按钮的情况下，此时再点击“停止定时器”的按钮，是没有反应的。因此，我们需要改进的地方是：
|
||||
|
||||
<h3>---分隔线---</h3>
|
||||
- **在开启定时器之前，先做一个判断**：如果定时器不为 null，就不继续往下执行了（即不再开启新的定时器），防止开启了多个定时器。
|
||||
|
||||
<!-- 括号里如果写三个参数：则第一个参数代表value，第二个参数代表key，第三个参数代表index -->
|
||||
<li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
- **停止定时器的时候，虽然定时器停止了，但定时器并不为 null**。因此，最后我们还需要手动将定时器设置为null。这样，才能恢复到最初始的状态。
|
||||
|
||||
```
|
||||
**完整版代码**：
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## v-if：设置元素的显示和隐藏
|
||||
|
||||
**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
|
||||
|
||||
在切换时，元素和它的数据绑定会被销毁并重建。
|
||||
|
||||
举例如下：（点击按钮时，切换和隐藏盒子）
|
||||
针对上面的四个步骤，为了实现这个案例，完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<script src="vue.js"></script>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<button v-on:click="toggle">显示/隐藏</button>
|
||||
<div v-if="isShow">我是盒子</div>
|
||||
</div>
|
||||
</body>
|
||||
<div id="app">
|
||||
<p>{{msg}}</p>
|
||||
<input type="button" value="跑马灯走起" @click="startMethod">
|
||||
<input type="button" value="跑马灯停止" @click="stopMethod">
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
isShow: true
|
||||
},
|
||||
methods: {
|
||||
toggle: function() {
|
||||
this.isShow = !this.isShow;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<script src="vue2.5.16.js"></script>
|
||||
<script>
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
msg: '生命壹号，永不止步～～～',
|
||||
intervalId: null
|
||||
},
|
||||
methods: {
|
||||
startMethod: function () {
|
||||
|
||||
//【重要】在开启定时器之前，先进行判断，避免出现多个定时器
|
||||
//如果出现了多个定时器，后面的“停止定时器”操作是无效的
|
||||
if (this.intervalId != null) return; //【注意】这个定时器的this，一定不要忘记了
|
||||
|
||||
//添加定时器：点击按钮后，让字符串连续滚动
|
||||
this.intervalId = setInterval(() => {
|
||||
// 获取 msg 的第一个字符
|
||||
var start = this.msg.substring(0, 1);
|
||||
// 获取 后面的所有字符
|
||||
var end = this.msg.substring(1);
|
||||
// 重新拼接得到新的字符串，并赋值给 this.msg
|
||||
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
|
||||
this.msg = end + start;
|
||||
console.log(this.msg);
|
||||
}, 400);
|
||||
},
|
||||
|
||||
stopMethod: function () {
|
||||
//停止定时器：点击按钮后，停止字符串的滚动
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
**上方代码的总结**：
|
||||
|
||||
- 在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过`this`来访问。这里的**this指向的是Vue的实例对象**。
|
||||
|
||||
## v-show：设置元素的显示和隐藏
|
||||
- VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。这样做 的好处是：**程序员只需要关心数据，不需要考虑如何重新渲染DOM页面；减少DOM操作**。
|
||||
|
||||
**作用**：根据表达式的真假条件，来切换元素的 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>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
**v-if和v-show的区别**：
|
||||
|
||||
`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
|
||||
- 在调用定时器 id 的时候，代码是`this.intervalId`，这个`this`一定不要漏掉了。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
301
21-Vue基础/01-02.Vue的系统指令(二).md
Normal file
301
21-Vue基础/01-02.Vue的系统指令(二).md
Normal file
@ -0,0 +1,301 @@
|
||||
|
||||
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
为了实现上面的效果，如果我用`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>
|
||||
```
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 对象的遍历赋值
|
||||
|
||||
|
||||
针对下面这样的对象：
|
||||
|
||||
```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>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 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>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
**v-if和v-show的区别**：
|
||||
|
||||
`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user