博客列表 >VUE学习之常用指令2

VUE学习之常用指令2

景云
景云原创
2021年03月31日 15:18:15488浏览

1.key的作用

对于列表循环时,如果不用key,会导致出现文不对题的情况,比如添加列表条目后循环出来的列表有单选框时,不使用key会导致选中者错位;例如:

  1. <div id="app">
  2. <label>新老师: <input type="text" v-model="name"></label>
  3. <button @click="add">增加</button>
  4. <ul>
  5. //开始选中第二个,如果这里不用key,添加条目后选中的将会是第三个
  6. <li v-for="item of list" :key="item.id">
  7. <input type="radio" name="name">
  8. {{item.id}}--{{item.name}}
  9. </li>
  10. </ul>
  11. </ul>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14. <script>
  15. const vm = new Vue({
  16. el: '#app',
  17. data: {
  18. name: '',
  19. list: [
  20. { id: 3, name: "赵老师" },
  21. { id: 2, name: "钱老师" },
  22. { id: 1, name: "孙老师" },
  23. ]
  24. },
  25. methods: {
  26. add(){
  27. this.list.unshift({ id: this.list.length+1, name:this.name });
  28. }
  29. },
  30. });
  31. </script>

2.v-if,v-show:条件渲染

  1. <div id="app">
  2. // v-if: 元素是否添加到页面中,不添加时相当于css中visibility: hidden,dom结构中没有痕迹
  3. <!-- 单分支 -->
  4. <p v-if="flag">{{msg}}</p>
  5. <button
  6. @click="flag = !flag"
  7. v-text="tips = flag ? `隐藏` : `显示`"
  8. ></button>
  9. <!-- 多分支 -->
  10. <p v-if="point > 1000 && point < 2000">{{grade[0]}}</p>
  11. <p v-else-if="point >= 2001 && point < 3000">{{grade[1]}}</p>
  12. <p v-else-if="point >= 3001 && point < 4000">{{grade[2]}}</p>
  13. <p v-else-if="point >= 4000">{{grade[3]}}</p>
  14. <p v-else>{{grade[4]}}</p>
  15. // v-show: 元素是否显示出来(元素已经在dom结构中);相当于css中的display:none
  16. <!-- v-show: -->
  17. <p v-show="status">祝大家薪资越来越高</p>
  18. </div>
  19. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20. <script>
  21. const vm = new Vue({
  22. el: document.querySelector("#app"),
  23. data() {
  24. return {
  25. msg: "古德猫宁",
  26. flag: true,
  27. tips: "隐藏",
  28. point: 4500,
  29. grade: [
  30. "白银",
  31. "黄金",
  32. "铂金",
  33. "钻石",
  34. "青铜",
  35. ],
  36. status: true,
  37. };
  38. },
  39. });
  40. </script>

3. todolist:键盘修饰符

  1. <div class="app">
  2. <-- 使用了键盘修饰符: enter -->
  3. <input type="text" @keyup.enter="submit($event)" />
  4. <ul v-if="list.length > 0">
  5. <li v-for="(item,index) of list" :key="index">{{item}}</li>
  6. </ul>
  7. </div>
  8. <script>
  9. const vm = new Vue({
  10. el: document.querySelector(".app"),
  11. data() {
  12. return {
  13. list: [],
  14. };
  15. },
  16. // 事件方法
  17. methods: {
  18. submit(ev) {
  19. this.list.unshift(ev.target.value);
  20. ev.target.value = null;
  21. //如果不用键盘修饰符,这里将需要判断是否按下Enter键
  22. // if (ev.key === "Enter") {
  23. // this.list.unshift(ev.target.value);
  24. // ev.target.value = null;
  25. // }
  26. },
  27. },
  28. });
  29. </script>

4. 生命周期

  1. vue实例从创建到销毁的全过程;vue生命周期是函数,为每个周期提供了一个编程接口/钩子,开放出来供用户自定义。
  1. <div id="app">{{words}}</div>
  2. <script>
  3. const vm = new Vue({
  4. el: document.querySelector("#app"),
  5. data() {
  6. return {
  7. words: "古德那艾特",
  8. };
  9. },
  10. // 实例创建之前,data不能用,el不可用
  11. beforeCreate() {
  12. console.log("实例创建前:", this.$el, this.words);//实例创建前: undefined undefined
  13. },
  14. // 实例创建完成,data能用,el不可用
  15. created() {
  16. console.log("实例创建完成:", this.$el, this.words);//实例创建完成: undefined 大家晚上吃了吗?
  17. },
  18. // 挂载完成, 类似于"load",data,el都可用
  19. mounted() {
  20. console.log("挂载创建完成:", this.$el, this.words);//挂载创建完成: <div id="app"> 大家晚上吃了吗?
  21. },
  22. // 更新完成,只有进行更新时updated才会执行
  23. updated() {
  24. console.log("更新完成 data.words =", this.words);
  25. },
  26. });
  27. vm.words = "how are you";//更新操作
  28. </script>

5. v-model:计算属性

  1. <div class="app">
  2. <p>
  3. 数量:
  4. <input type="number" v-model="num" style="width: 5em" min="0" />
  5. </p>
  6. <p>单价: {{price}} 元</p>
  7. <p>金额: {{amount}} 元</p>
  8. </div>
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. <script>
  11. const vm = new Vue({
  12. el: document.querySelector(".app"),
  13. data() {
  14. return {
  15. num: 0,
  16. price: 50,
  17. res: 0,
  18. };
  19. },
  20. // 计算属性: 最终会和data合并,所以不要和data中已有属性重名
  21. computed: {
  22. // 访问器属性有getter/setter
  23. // 计算属性默认是getter
  24. amount: {
  25. get() {
  26. return this.num * this.price;
  27. },
  28. set(value) {
  29. console.log(value);
  30. if (value > 1000) this.price = 40;
  31. },
  32. },
  33. },
  34. });
  35. </script>

6. watch:侦听器属性;计算属性能完成的功能,侦听器几乎都可以完成;侦听器属性与计算属性最大的区别就是随时监听元素。

  1. <div class="app">
  2. <p>
  3. <input
  4. type="number"
  5. v-model="num"
  6. style="width: 5em"
  7. min="0"
  8. :max="max"
  9. />
  10. </p>
  11. <p>单价: {{price}} 元</p>
  12. <p>金额: {{res}} 元</p>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15. <script>
  16. const vm = new Vue({
  17. el: document.querySelector(".app"),
  18. data() {
  19. return {
  20. num: 0,
  21. price: 50,
  22. res: 0,
  23. max: 100,
  24. };
  25. },
  26. // 侦听器属性
  27. watch: {
  28. // 侦听的是某一个属性的值的变化,它的属性名与data中要监听的属性同名
  29. num(newValut, oldValue) {
  30. //newValut为变化后的新值,oldValue是变化之前的旧值
  31. this.res = newValut * this.price;
  32. // 监听库存
  33. if (newValut >= 10) {
  34. this.max = newValut;
  35. alert("每人限购10个");
  36. }
  37. },
  38. },
  39. });
  40. </script>

使用VUE前记得先导入库

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议