Vue学习笔记(二)
Contents
Vue学习笔记
作者:黄志成
博客:地址
内置指令
v-cloak & v-once
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div v-cloak id="app">
<div v-once>
{{text}}
</div>
<input type="text" v-model="text"></input>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
text: "Hcheng's Vue course"
}
});
</script>
</html>
v-cloak 是解决初始化慢导致页面闪动的最佳实践.
v-once 只让元素渲染一次,之后数据变动则不再渲染
v-if & v-else-if & v-else
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div v-cloak id="app">
<h1 v-if="status == 0"> status 是 0 显示该行</h1>
<h1 v-else-if="status == 1"> status 是 1 显示该行</h1>
<h1 v-else> status 是 其他 显示该行</h1>
<input type="text" v-model="status"></input>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
status: "0"
}
});
</script>
</html>
Vue在渲染元素时,出于效率考虑,会尽可能复用已有元素非重新渲染
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div v-cloak id="app">
<input type="text" v-if="status == 0" placeholder="这是status0"></input>
<input type="text" v-else placeholder="这是status-其他"></input>
<button @click="changeStatus">修改status</button>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
status: "0"
},
methods: {
changeStatus: function () {
this.status = this.status == "0" ? "1" : "0" ;
}
}
});
</script>
</html>
点击切换按钮的时候,虽然Dom变了,但是之前在输入框的内容没有变,说明被复用了.
如果不想这么做,可以使用vue 提供的 key属性,它可以让你决定是否复用元素
<input type="text" v-if="status == 0" placeholder="这是status0" key="status0"></input>
<input type="text" v-else placeholder="这是status-其他" key="statusOther"></input>
v-show
v-show用法和v-if基本一致,只不过v-show是改变元素css属性.让他隐藏并不是移除.
v-show不能在template上使用
v-for
当需要对一个数组遍历的时候就会用到v-for命令它的表达式需要配合 in 使用
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items">{{index}} -{{ item.name }}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
items: [
{'name': 'iphone6'},
{'name': 'iphone7'},
{'name': 'iphone8'},
{'name': 'iphone9'}
]
}
});
</script>
</html>
这样就会在页面上显示
- 0 - iphone6
1 - iphone7
2 - iphone8
3 - iphone9
除数组之外,对象也可以遍历
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) in items">{{ index }} - {{ key }} : {{ value }}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
items: {
name: 'huangzhicheng',
blogUrl: 'http://www.webhuang.cn'
}
}
});
</script>
</html>
v-for 还可以迭代整数 v-for="n in 10"
数组操作
Vue提供了一组观察数组变异的方法,使用它们改变数组也会触发视图更新
- push() 尾部追加一个元素
- pop() 弹出尾部一个元素
- shift() 删除头部第一个元素
- unshift() 头部追加一个元素
- splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
- sort() 排序
- reverse() 翻转
还有些方法不会改变原数组
- filter()
- concat()
- slice()
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items">{{index}} -{{ item.name }}</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
items: [
{'name': 'iphone6'},
{'name': 'iphone7'},
{'name': 'iphone8'},
{'name': 'mi6'}
]
}
});
app.items = app.items.filter(function (item) {
return item.name.match(/iphone/)
})
</script>
</html>
上面的例子是匹配含有iphone的name,结果是成功过滤了mi6。
有些变动的数组是不会触发视图更新的.
- 通过索引直接设置项
- 修改数组长度
解决第一个办法可以使用Vue内置方法 set
下面给出一个购物车的Demo吧
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
<tr v-for="(good,index) in items">
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>
<button @click="addGoodsNum(index)">+</button>
<input type="number" v-model.number="good.num"></input>
<button @click="reduceGoodsNum(index)">-</button>
</td>
<td><button @click="deleteGoods(index)">移除</button></td>
</tr>
</table>
<h3>总价:<span>{{totalPrice}}</span>元</h3>
<div>
<b>送货时间:</b>
<input type="radio" name="day" v-model="picked" value="周一-周五">周一-周五
<input type="radio" name="day" v-model="picked" value="双休">双休
<h4>你选择的是:{{ picked }}</h4>
</div>
<div>
<b>附加商品</b>
<input type="checkbox" v-model="checked" value="手机套">手机套
<input type="checkbox" v-model="checked" value="手机膜">手机膜
<input type="checkbox" v-model="checked" value="碎屏险">碎屏险
<br />
<h4>你选择的是:{{ checked }}</h4>
</div>
<div>
<b>支付方式:</b>
<select name="payWay" v-model="selected">
<option disabled="" value="请选择">请选择</option>
<option value="支付宝">支付宝</option>
<option value="微信">微信</option>
</select>
<h4>你选择的是:{{ selected }}</h4>
</div>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
items: [
{name: 'iphone6', price: 2999, num: 1},
{name: 'iphone7',price: 3999, num: 2},
{name: 'iphone8',price: 4999, num: 1},
{name: 'mi6',price: 1999, num: 2},
],
picked: "周一-周五",
selected: "支付宝",
checked: []
},
computed: {
totalPrice: function () {
var total = 0;
_this = this;
for (var i = 0; i < _this.items.length; i++) {
var item = _this.items[i];
if (item.num <= 0) {
_this.items.splice(i, 1);
}
}
for (var i = 0; i < _this.items.length; i++) {
var item = _this.items[i];
total += item.price * item.num;
}
return total;
}
},
methods :{
deleteGoods: function (index) {
this.items.splice(index, 1);
},
addGoodsNum: function (index) {
this.items[index].num++;
},
reduceGoodsNum: function (index) {
this.items[index].num--;
}
}
});
</script>
</html>
下一节开始学习Vue中的组件部分。是最核心最精彩的部分.
发表评论