1-vue项目结构
配置 vue
引入 vue
- 下载: vue.js (这里仅提供生产环境使用的压缩版本)或
1
<script src="./vue.js"></script>
通过cdn引用1
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>- 以下代码以本地使用为例
- 创建
vue实例1
2
3
4
5
6
7
8
9<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
new Vue({
// 调用Vue构造函数 配置参数
})
</script>
</body>- 可选
var vm = new Vue({})使用参数接收, 不接收也能实现同样的效果, 所以暂不接收. vm代表view model, 只是习惯变量名, 非必须.
- 可选
模板 template
使用
vue控制元素
- 参数
el(element):Vue所控制的元素, 使用选择器作为参数1
2
3
4
5
6
7
8
9<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app"
})
</script>
</body> - 为
div添加内容1
2
3
4
5
6
7
8
9
10
11
12
13<body>
<div id="app">
<h1>
标题: vue app
</h1>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app"
})
</script>
</body>- 查看页面, 正常显示
- 此处的
div并非是DOM节点, 而是vue模板
数据 data
在页面中使用数据
- 参数
data: 页面中可供使用的数据使用1
2
3
4
5
6
7
8<script>
new Vue({
el: "#app",
data: {
title: "vue app"
}
})
</script>Mustache语法 在HTML中引用数据Mustache语法: 又称“大胡子语法”或“猫须语法”, 使用双大括号{{ }}来包裹变量或Js表达式，从而实现数据的动态绑定效果同上1
2
3
4
5<div id="app">
<h1>
标题: {{title}}
</h1>
</div> - 好处:
vue的特点: 数据响应式
动态绑定, 即当数据变化后, 模板会重新渲染
示例: 商品管理1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<body>
<div id="app">
<h1>
标题: 商品管理系统
</h1>
<ul>
<li v-for="item in products">
商品名称: {{item.name}} 商品库存: {{item.stock}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
products: [{
name: "商品1",
stock: 10
}, {
name: "商品2",
stock: 9
}, {
name: "商品3",
stock: 8
}, ]
}
})
</script>
</body>- 用到了命令
v-for将会在后文加以解释 - 数据均为响应式, 可动态变化重新渲染
更改数据:
添加按钮
1
2
3
4
5<ul>
<li v-for="item in products">
商品名称: {{item.name}} 商品库存: <button>-</button>{{item.stock}}<button>+</button>
</li>
</ul>注册事件
在vue模板中给按钮注册事件使用@*而不是on*, 同样会在后文解释1
2
3
4
5
6
7
8
9<ul>
<li v-for="item in products">
商品名称: {{item.name}}
商品库存:
<button @click="item.stock--">-</button>
{{item.stock}}
<button @click="item.stock++">+</button>
</li>
</ul>效果如下:
- 用到了命令
- 商品名称: {{item.name}} 商品库存: {{item.stock}}
方法 methods
传入函数
以上的数据需要添加约束 >=0, 这里在 vue 构造函数中传入函数
参数
methods: 页面中可供使用的函数使用函数
changeStock约束新值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<script>
new Vue({
el: "#app",
data: {
products: [{
name: "商品1",
stock: 10
}, {
name: "商品2",
stock: 9
}, {
name: "商品3",
stock: 8
}, ]
},
methods: {
changeStock(product, newStock){
if (newStock < 0) {
newStock = 0;
}
product.stock = newStock
}
}
})
</script>调用
1
2
3
4
5
6
7
8<ul>
<li v-for="item in products">
商品名称: {{item.name}}
商品库存: <button @click="changeStock(item, item.stock-1)">-</button>
{{item.stock}}
<button @click="changeStock(item, item.stock+1)">+</button>
</li>
</ul>效果如下:
- 商品名称: {{item.name}} 商品库存: {{item.stock}}
优化状态显示
存货为
0时显示 “无货”可使用三目运算符
1
2
3
4
5
6
7
8<ul>
<li v-for="item in products">
商品名称: {{item.name}}
商品库存: <button @click="changeStock(item, item.stock-1)">-</button>
{{item.stock?item.stock:'无货'}}
<button @click="changeStock(item, item.stock+1)">+</button>
</li>
</ul>效果如下
- 商品名称: {{item.name}} 商品库存: {{item.stock?item.stock:'无货'}}
计算属性 computed
参数
computed: 页面中可供使用的数据计算商品总数
total1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<script>
new Vue({
el: "#app",
data: {
products: [{
name: "商品1",
stock: 10
}, {
name: "商品2",
stock: 9
}, {
name: "商品3",
stock: 8
}, ]
},
computed: {
total(){
this.products.reduce((a, b) => a + b.stock, 0);
}
},
methods: {
changeStock(product, newStock){
if (newStock < 0) {
newStock = 0;
}
product.stock = newStock;
}
}
})
</script>直接使用, 不用调用
1
2
3
4
5
6
7
8<ul>
<li v-for="item in products">
商品名称: {{item.name}} 商品库存:
<button @click="changeStock(item, item.stock-1)">-</button> {{item.stock?item.stock:'无货'}}
<button @click="changeStock(item, item.stock+1)">+</button>
</li>
</ul>
<p>total: {{total}}</p>效果如下
- 商品名称: {{item.name}} 商品库存: {{item.stock?item.stock:'无货'}}
total: {{total}}
删除
删除按钮
在
v-for添加获取索引的变量1
2
3
4
5
6
7
8<ul>
<li v-for="(item, i) in products">
商品名称: {{item.name}} 商品库存:
<button @click="changeStock(item, item.stock-1)">-</button> {{item.stock?item.stock:'无货'}}
<button @click="changeStock(item, item.stock+1)">+</button>
<button @click="remove(i)">删除</button>
</li>
</ul>删除操作
无需操作
DOM元素, 仅需操作数据即可1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33<script>
new Vue({
el: "#app",
data: {
products: [{
name: "商品1",
stock: 10
}, {
name: "商品2",
stock: 9
}, {
name: "商品3",
stock: 8
}, ]
},
computed: {
total() {
return this.products.reduce((a, b) => a + b.stock, 0);
}
},
methods: {
changeStock(product, newStock) {
if (newStock < 0) {
newStock = 0;
}
product.stock = newStock;
},
remove(index) {
this.products.splice(index, 1);
}
}
})
</script>效果如下
- 商品名称: {{item.name}} 商品库存: {{item.stock?item.stock:'无货'}}
total: {{total}}