1.key的作用
对于列表循环时,如果不用key,会导致出现文不对题的情况,比如添加列表条目后循环出来的列表有单选框时,不使用key会导致选中者错位;例如:
<div id="app">
<label>新老师: <input type="text" v-model="name"></label>
<button @click="add">增加</button>
<ul>
//开始选中第二个,如果这里不用key,添加条目后选中的将会是第三个
<li v-for="item of list" :key="item.id">
<input type="radio" name="name">
{{item.id}}--{{item.name}}
</li>
</ul>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '',
list: [
{ id: 3, name: "赵老师" },
{ id: 2, name: "钱老师" },
{ id: 1, name: "孙老师" },
]
},
methods: {
add(){
this.list.unshift({ id: this.list.length+1, name:this.name });
}
},
});
</script>
2.v-if,v-show:条件渲染
<div id="app">
// v-if: 元素是否添加到页面中,不添加时相当于css中visibility: hidden,dom结构中没有痕迹
<!-- 单分支 -->
<p v-if="flag">{{msg}}</p>
<button
@click="flag = !flag"
v-text="tips = flag ? `隐藏` : `显示`"
></button>
<!-- 多分支 -->
<p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
<p v-else-if="point >= 2001 && point < 3000">{{grade[1]}}</p>
<p v-else-if="point >= 3001 && point < 4000">{{grade[2]}}</p>
<p v-else-if="point >= 4000">{{grade[3]}}</p>
<p v-else>{{grade[4]}}</p>
// v-show: 元素是否显示出来(元素已经在dom结构中);相当于css中的display:none
<!-- v-show: -->
<p v-show="status">祝大家薪资越来越高</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: document.querySelector("#app"),
data() {
return {
msg: "古德猫宁",
flag: true,
tips: "隐藏",
point: 4500,
grade: [
"白银",
"黄金",
"铂金",
"钻石",
"青铜",
],
status: true,
};
},
});
</script>
3. todolist:键盘修饰符
<div class="app">
<-- 使用了键盘修饰符: enter -->
<input type="text" @keyup.enter="submit($event)" />
<ul v-if="list.length > 0">
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
const vm = new Vue({
el: document.querySelector(".app"),
data() {
return {
list: [],
};
},
// 事件方法
methods: {
submit(ev) {
this.list.unshift(ev.target.value);
ev.target.value = null;
//如果不用键盘修饰符,这里将需要判断是否按下Enter键
// if (ev.key === "Enter") {
// this.list.unshift(ev.target.value);
// ev.target.value = null;
// }
},
},
});
</script>
4. 生命周期
vue实例从创建到销毁的全过程;vue生命周期是函数,为每个周期提供了一个编程接口/钩子,开放出来供用户自定义。
<div id="app">{{words}}</div>
<script>
const vm = new Vue({
el: document.querySelector("#app"),
data() {
return {
words: "古德那艾特",
};
},
// 实例创建之前,data不能用,el不可用
beforeCreate() {
console.log("实例创建前:", this.$el, this.words);//实例创建前: undefined undefined
},
// 实例创建完成,data能用,el不可用
created() {
console.log("实例创建完成:", this.$el, this.words);//实例创建完成: undefined 大家晚上吃了吗?
},
// 挂载完成, 类似于"load",data,el都可用
mounted() {
console.log("挂载创建完成:", this.$el, this.words);//挂载创建完成: <div id="app"> 大家晚上吃了吗?
},
// 更新完成,只有进行更新时updated才会执行
updated() {
console.log("更新完成 data.words =", this.words);
},
});
vm.words = "how are you";//更新操作
</script>
5. v-model:计算属性
<div class="app">
<p>
数量:
<input type="number" v-model="num" style="width: 5em" min="0" />
</p>
<p>单价: {{price}} 元</p>
<p>金额: {{amount}} 元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: document.querySelector(".app"),
data() {
return {
num: 0,
price: 50,
res: 0,
};
},
// 计算属性: 最终会和data合并,所以不要和data中已有属性重名
computed: {
// 访问器属性有getter/setter
// 计算属性默认是getter
amount: {
get() {
return this.num * this.price;
},
set(value) {
console.log(value);
if (value > 1000) this.price = 40;
},
},
},
});
</script>
6. watch:侦听器属性;计算属性能完成的功能,侦听器几乎都可以完成;侦听器属性与计算属性最大的区别就是随时监听元素。
<div class="app">
<p>
<input
type="number"
v-model="num"
style="width: 5em"
min="0"
:max="max"
/>
</p>
<p>单价: {{price}} 元</p>
<p>金额: {{res}} 元</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: document.querySelector(".app"),
data() {
return {
num: 0,
price: 50,
res: 0,
max: 100,
};
},
// 侦听器属性
watch: {
// 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名
num(newValut, oldValue) {
//newValut为变化后的新值,oldValue是变化之前的旧值
this.res = newValut * this.price;
// 监听库存
if (newValut >= 10) {
this.max = newValut;
alert("每人限购10个");
}
},
},
});
</script>
使用VUE前记得先导入库