Blogger Information
Blog 62
fans 2
comment 1
visits 42216
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PartIII 07 vue常用指令与语法基础(0908tue)
老黑
Original
823 people have browsed it

主要内容:vue常用指令与语法基础

  1. 计算属性(computed)和过滤器(filters)
  2. 监听器属性(watch)
  3. 样式修改(dom中引入vue元素)
  4. 条件与显示(dom中加入v-if条件判断)
  5. 列表渲染(dom中通过v-for进行遍历及渲染)

1. vue模版语法

  • v-:vue指令前缀
  • 条件语句
  • html格式语句
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <script src="../lib/vue.js"></script>
  7. <title>模板语法</title>
  8. </head>
  9. <body>
  10. <div class="app">
  11. <p>{{words}}</p>
  12. <!-- v-: vue指令的前缀,以html自定义属性的方式书写 -->
  13. <p v-html="code"></p>
  14. <p>{{10*30}}</p>
  15. <p>{{true ? '心情好' : '难过'}}</p>
  16. <p>{{'ABCD'.split('').reverse().join('')}}</p>
  17. <p>{{'Hello World'}}</p>
  18. </div>
  19. <script>
  20. const vm = new Vue({
  21. el: ".app",
  22. data: {
  23. words: "Hello php.cn",
  24. code: "<strong>朱老师</strong>",
  25. },
  26. });
  27. </script>
  28. </body>
  29. </html>

2. 计算属性和过滤器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>计算属性和过滤器</title>
  7. <script src="../lib/vue.js"></script>
  8. </head>
  9. <body>
  10. <div class="app">
  11. <p>{{reverseWords}}</p>
  12. <p>{{words | wordsToCase | substring}}</p>
  13. </div>
  14. <script>
  15. const vm = new Vue({
  16. el: ".app",
  17. data: {
  18. words: "hello php.cn",
  19. },
  20. // 计算属性
  21. computed: {
  22. reverseWords() {
  23. return this.words.split("").reverse().join("");
  24. // 先拆分、再反转、再合并
  25. },
  26. },
  27. // 过滤器
  28. filters: {
  29. wordsToCase(str) {
  30. return str.toUpperCase();
  31. },
  32. substring: (str) => str.substr(2, 3),
  33. // substr:从第三位开始取三个元素
  34. },
  35. });
  36. </script>
  37. </body>
  38. </html>

3. 监听器属性(watch)

  • methods和watch结合
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>侦听器属性</title>
  7. <script src="../lib/vue.js"></script>
  8. </head>
  9. <body>
  10. <p>小小加法器</p>
  11. <div class="app">
  12. <input type="number" v-model="add1" /> +
  13. <input type="number" v-model="add2" /> = <span>{{res}}</span>
  14. </div>
  15. <script>
  16. const vm = new Vue({
  17. el: ".app",
  18. data: {
  19. add1: 0,
  20. add2: 0,
  21. res: 0,
  22. },
  23. // 侦听器属性
  24. /*
  25. watch: {
  26. add1(newVal, oldVal) { // 这个地方等同于 add1: function(newVal, oldVal)......
  27. // console.log(
  28. // "new = %d, old = %d",
  29. // parseFloat(newVal),
  30. // parseFloat(oldVal)
  31. // );
  32. // console.log("new = %d, old = %d", newVal * 1, oldVal * 1);
  33. this.res = this.newVal * 1 + this.oldVal * 1;
  34. },
  35. add2(newVal, oldVal) {
  36. this.res = this.newVal * 1 + this.oldVal * 1;
  37. },
  38. },
  39. */
  40. // 公共方法
  41. methods: {
  42. // 事件方法或公共函数
  43. add(newVal, addend) {
  44. this.res = this.newVal * 1 + this.oldVal * 1;
  45. // 通过 *1的方式进行字符串转数字。
  46. },
  47. },
  48. watch: {
  49. add1(newVal) {
  50. this.add(newVal, this.add2);
  51. },
  52. add2(newVal) {
  53. this.add(newVal, this.add1);
  54. },
  55. },
  56. });
  57. </script>
  58. </body>
  59. </html>

  • 用计算属性更方便
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>侦听器属性2</title>
  7. <script src="../lib/vue.js"></script>
  8. </head>
  9. <body>
  10. <p>小小加法器</p>
  11. <div class="app">
  12. <input type="number" v-model="add1" /> +
  13. <input type="number" v-model="add2" /> = <span>{{res}}</span>
  14. </div>
  15. <script>
  16. const vm = new Vue({
  17. el: ".app",
  18. data: {
  19. add1: 0,
  20. add2: 0,
  21. },
  22. computed: {
  23. res() {
  24. return this.add1 * 1 + this.add2 * 1;
  25. },
  26. },
  27. });
  28. </script>
  29. </body>
  30. </html>

4. 样式的修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>样式的修改</title>
  7. <script src="../lib/vue.js"></script>
  8. <style>
  9. .active {
  10. color: red;
  11. }
  12. .bigger {
  13. font-size: 1.5rem;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="app">
  19. <!-- <p class="active">Hello World</p> -->
  20. <!-- 对象字面量 -->
  21. <!-- <p v-bind:class="{active: isActive, bigger: isBigger}">Hello World</p> -->
  22. <!-- 对象字面量简化 -->
  23. <!-- <p v-bind:class="style1">Hello World</p> -->
  24. <!-- 数组 -->
  25. <!-- <p v-bind:class="[active, bigger]">Hello World</p> -->
  26. <!-- 字面量 -->
  27. <!-- <p v-bind:class="['active', 'bigger']">Hello World</p> -->
  28. <!-- <p style="color: red">Hello World</p> -->
  29. <!-- v-bind:style="" -->
  30. <!-- <p style="color: violet; font-size: 2rem">Hello World</p> -->
  31. <!-- <p v-bind:style="`color: violet; font-size: 2rem`">Hello World</p> -->
  32. <!-- <p v-bind:style="{color:color, fontSize:fontSize}">Hello World</p> -->
  33. <p :style="{color:color, fontSize:fontSize}">Hello World</p>
  34. <!-- 这个地方是简写,将v-bind省略掉了 -->
  35. <p :class="'active'">php.cn</p>
  36. </div>
  37. <script>
  38. const vm = new Vue({
  39. el: ".app",
  40. data: {
  41. isActive: true,
  42. isBigger: true,
  43. style1: {
  44. active: () => this.isActive,
  45. bigger: () => this.isBigger,
  46. },
  47. active: "active",
  48. bigger: "bigger",
  49. // style
  50. color: "green",
  51. fontSize: "2rem",
  52. },
  53. });
  54. </script>
  55. </body>
  56. </html>

5. 条件与显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>条件与显示</title>
  7. <script src="../lib/vue.js"></script>
  8. </head>
  9. <body>
  10. <div class="app">
  11. <p v-if="score > 90 && score <=100">学帝</p>
  12. <p v-else-if="score >= 80 && score < 90">学霸</p>
  13. <p v-else-if="score >= 60 && score < 80">学渣</p>
  14. <p v-else>留级</p>
  15. <hr />
  16. <button type="button" v-on:click="handle">{{tips}}</button>
  17. <p v-show="flag">vue是一个语法简洁的渐进式前端框架</p>
  18. </div>
  19. <script>
  20. const vm = new Vue({
  21. el: ".app",
  22. data: {
  23. score: 95,
  24. flag: true,
  25. tips: "隐藏",
  26. },
  27. methods: {
  28. handle() {
  29. this.flag = !this.flag;
  30. // 上面这样设置后,等于click一次为显示,一次为隐藏。两者动态切换了。
  31. this.tips = this.flag ? "隐藏" : "显示";
  32. },
  33. },
  34. });
  35. // if (){}: v-if
  36. // if (){} else {} : v-else
  37. // if (){} else if () {} else {}: v-else-if
  38. </script>
  39. </body>
  40. </html>

6. 列表渲染

  • v-for遍历并展示
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <script src="../lib/vue.js"></script>
  7. <title>列表渲染</title>
  8. </head>
  9. <body>
  10. <div class="app">
  11. <!-- v-for="item of arr" -->
  12. <ul>
  13. <!-- 数组 -->
  14. <li v-for="color of colors">{{color}}</li>
  15. </ul>
  16. <hr />
  17. <ul>
  18. <!-- 对象-->
  19. <li v-for=" (item,key) of course">{{key}} : {{item}}</li>
  20. </ul>
  21. <hr />
  22. <ul>
  23. <!-- 对象数组:每个元素师对象-->
  24. <li v-for="user of users">{{user.name}} ( {{user.email}} )</li>
  25. </ul>
  26. </div>
  27. <script>
  28. const vm = new Vue({
  29. el: ".app",
  30. data: {
  31. // array
  32. colors: ["red", "green", "blue"],
  33. // object
  34. course: { name: "vue基础", lecture: "朱老师" },
  35. // obj-arr
  36. users: [
  37. { name: "admin", email: "a@qq.com" },
  38. { name: "peter", email: "p@qq.com" },
  39. ],
  40. },
  41. });
  42. // 遍历数组
  43. // const arr = ["html", "css", "js"];
  44. // console.log(Object.keys(arr));
  45. // Object.keys(arr).forEach((item) => console.log(arr[item]));
  46. // 遍历对象
  47. // const obj = { id: 1, name: "peter", email: "peter@qq.com" };
  48. // Object.keys(obj).forEach((item) => console.log(obj[item]));
  49. // 遍历对象数组
  50. const objArr = [
  51. { id: 1, name: "admin" },
  52. { id: 2, name: "jack" },
  53. ];
  54. console.log(Object.keys(objArr));
  55. let lis = "";
  56. // 或者
  57. // for (item of objArr) {
  58. // console.log(item.id, item.name);
  59. // }
  60. </script>
  61. </body>
  62. </html>

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:vue中的指令众多, 且不同的版本之间有些差异, 要留意
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post