search

博客列表 >PartIII 07 vue常用指令与语法基础（0908tue）

PartIII 07 vue常用指令与语法基础（0908tue）

老黑
老黑原创
2020年09月12日 21:58:32824浏览

主要内容：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>
  17.       <p>{{'ABCD'.split('').reverse().join('')}}</p>
  18.       <p>{{'Hello World'}}</p>
  19.     </div>
  21.     <script>
  22.       const vm = new Vue({
  23.         el: ".app",
  24.         data: {
  25.           words: "Hello php.cn",
  26.           code: "<strong>朱老师</strong>",
  27.         },
  28.       });
  29.     </script>
  30.   </body>
  31. </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>
  16.     <script>
  17.       const vm = new Vue({
  18.         el: ".app",
  19.         data: {
  20.           add1: 0,
  21.           add2: 0,
  22.           res: 0,
  23.         },
  24.         // 侦听器属性
  25.         /*
  26.         watch: {
  27.           add1(newVal, oldVal) {    // 这个地方等同于 add1: function(newVal, oldVal)......
  28.             // console.log(
  29.             //   "new = %d, old = %d",
  30.             //   parseFloat(newVal),
  31.             //   parseFloat(oldVal)
  32.             // );
  33.             // console.log("new = %d, old = %d", newVal * 1, oldVal * 1);
  34.             this.res = this.newVal * 1 + this.oldVal * 1;
  35.           },
  36.           add2(newVal, oldVal) {
  37.             this.res = this.newVal * 1 + this.oldVal * 1;
  38.           },
  39.         },
  40.         */
  41.         // 公共方法
  42.         methods: {
  43.           // 事件方法或公共函数
  44.           add(newVal, addend) {
  45.             this.res = this.newVal * 1 + this.oldVal * 1;
  46.             // 通过 *1的方式进行字符串转数字。
  47.           },
  48.         },
  50.         watch: {
  51.           add1(newVal) {
  52.             this.add(newVal, this.add2);
  53.           },
  54.           add2(newVal) {
  55.             this.add(newVal, this.add1);
  56.           },
  57.         },
  58.       });
  59.     </script>
  60.   </body>
  61. </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>
  16.     <script>
  17.       const vm = new Vue({
  18.         el: ".app",
  19.         data: {
  20.           add1: 0,
  21.           add2: 0,
  22.         },
  24.         computed: {
  25.           res() {
  26.             return this.add1 * 1 + this.add2 * 1;
  27.           },
  28.         },
  29.       });
  30.     </script>
  31.   </body>
  32. </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> -->
  30.       <!-- v-bind:style="" -->
  31.       <!-- <p style="color: violet; font-size: 2rem">Hello World</p> -->
  32.       <!-- <p v-bind:style="`color: violet; font-size: 2rem`">Hello World</p> -->
  33.       <!-- <p v-bind:style="{color:color, fontSize:fontSize}">Hello World</p> -->
  34.       <p :style="{color:color, fontSize:fontSize}">Hello World</p> 
  35.       <!-- 这个地方是简写，将v-bind省略掉了 -->
  36.       <p :class="'active'">php.cn</p>
  37.     </div>
  39.     <script>
  40.       const vm = new Vue({
  41.         el: ".app",
  42.         data: {
  43.           isActive: true,
  44.           isBigger: true,
  46.           style1: {
  47.             active: () => this.isActive,
  48.             bigger: () => this.isBigger,
  49.           },
  51.           active: "active",
  52.           bigger: "bigger",
  54.           // style
  55.           color: "green",
  56.           fontSize: "2rem",
  57.         },
  58.       });
  59.     </script>
  60.   </body>
  61. </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>
  16.       <hr />
  18.       <button type="button" v-on:click="handle">{{tips}}</button>
  19.       <p v-show="flag">vue是一个语法简洁的渐进式前端框架</p>
  20.     </div>
  22.     <script>
  23.       const vm = new Vue({
  24.         el: ".app",
  25.         data: {
  26.           score: 95,
  27.           flag: true,
  28.           tips: "隐藏",
  29.         },
  31.         methods: {
  32.           handle() {
  33.             this.flag = !this.flag;
  34.             // 上面这样设置后，等于click一次为显示，一次为隐藏。两者动态切换了。
  35.             this.tips = this.flag ? "隐藏" : "显示";
  36.           },
  37.         },
  38.       });
  40.       //   if (){}: v-if
  41.       //   if (){} else {} : v-else
  42.       //   if (){} else if () {} else {}: v-else-if
  43.     </script>
  44.   </body>
  45. </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]));
  50.       // 遍历对象数组
  51.       const objArr = [
  52.         { id: 1, name: "admin" },
  53.         { id: 2, name: "jack" },
  54.       ];
  55.       console.log(Object.keys(objArr));
  56.       let lis = "";
  58.       // 或者
  59.       //   for (item of objArr) {
  60.       //     console.log(item.id, item.name);
  61.       //   }
  62.     </script>
  63.   </body>
  64. </html>
上一条：PartIII 08 vue中的组件及传参（0909wed）下一条：PartIII 06 模块与vue简介（0907mon）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多