search

博客列表 >Vue常用指令和语法基础

Vue常用指令和语法基础

王佳祥
王佳祥原创
2020年09月09日 17:34:29755浏览

Vue常用指令和语法基础

一、模板语法

  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="../0907/module/vue.js"></script>
  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>{{"支持字面量"}}</p>
  17.     </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>

二、计算属性和过滤器

  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="../0907/module/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <!-- 
  12.         split() 方法用于把一个字符串分割成字符串数组 
  13.         ("")为空的话每个字符之间都会被分割
  15.         reverse() 方法用于颠倒数组中元素的顺序
  17.         join() 方法用于把数组中的所有元素放入一个字符串
  18.       -->
  19.       <p>{{reverseWords}}</p>
  20.       <!--
  21.         | :管道符
  22.       -->
  23.       <p>{{words | wordsToCase}}</p>
  24.       <p>{{words | substring}}</p>
  25.     </div>
  26.     <script>
  27.       const vm = new Vue({
  28.         el: ".app",
  29.         data: {
  30.           words: "Hello PHP",
  31.         },
  32.         //计算属性
  33.         computed: {
  34.           reverseWords() {
  35.             return this.words.split("").reverse().join("");
  36.           },
  37.         },
  38.         //过滤器属性
  39.         filters: {
  40.           wordsToCase(str) {
  41.             return str.toUpperCase();
  42.           },
  43.           substring: (str) => str.substr(2, 3),
  44.         },
  45.       });
  46.     </script>
  47.   </body>
  48. </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>侦听器属性</title>
  7.     <script src="../0907/module/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" /> = {{res}}
  14.     </div>
  15.     <script>
  16.       const vm = new Vue({
  17.         el: ".app",
  18.         data: {
  19.           add1: 0,
  20.           add2: 0,
  21.           res: 0,
  22.         },
  24.         //只能侦听到data中的方法
  25.         //侦听器属性
  26.         /* watch: {
  27.           add1: function (newVal, oldVal) {
  28.              console.log(
  29.               "new = %d,old = %d",
  30.               parseFloat(newVal),
  31.               parseFloat(oldVal)
  32.             );
  33.             this.res = this.newVal * 1 + this.oldVal * 1;
  34.           },
  35.           add2: function (newVal, oldVal) {
  36.             this.res = this.newVal * 1 + this.oldVal * 1;
  37.           },
  38.         }, */
  39.         //公共方法
  40.         methods: {
  41.           //事件方法或公共函数
  42.           add(newVal, oldVal) {
  43.             this.res = this.newVal * 1 + this.oldVal * 1;
  44.           },
  45.         },
  46.         watch: {
  47.           add1(newVal) {
  48.             this.add(newVal, this.add2);
  49.           },
  50.           add2(newVal) {
  51.             this.add(newVal, this.add1);
  52.           },
  53.         },
  54.       });
  55.     </script>
  56.   </body>
  57. </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="../0907/module/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>

五、样式的修改

  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.     <style>
  8.       .active {
  9.         color: red;
  10.       }
  11.       .bigger {
  12.         font-size: 1.5rem;
  13.       }
  14.       .violet {
  15.         color: blueviolet;
  16.       }
  17.     </style>
  18.     <script src="../0907/module/vue.js"></script>
  19.   </head>
  20.   <body>
  21.     <div class="app">
  22.       <!-- <p class="active">hello world</p> -->
  23.       <!-- <p v-bind:class="{active:isActive,bigger:isBigger}">hello world</p> -->
  24.       <!-- <p v-bind:class="style1">hello world</p> -->
  25.       <!-- <p v-bind:class="[active,bigger]">hello world</p> -->
  26.       <!-- <p style="color: red">hello world</p> -->
  27.       <!-- <p v-bind:style="'color:violet;font-size:2rem'">hello world</p> -->
  28.       <!-- <p v-bind:style="`color:violet;font-size:2rem`">hello world</p> -->
  29.       <p v-bind:style="{color:color,fontSize:fontSize}">hello world</p>
  30.       <!-- 简写 -->
  31.       <p :style="{color:color,fontSize:fontSize}">hello world</p>
  32.       <p :class="'active'">hello world</p>
  33.     </div>
  34.     <script>
  35.       const vm = new Vue({
  36.         el: ".app",
  37.         data: {
  38.           isActive: true,
  39.           isBigger: true,
  40.           style1: {
  41.             active: () => this.isActive,
  42.             bigger: () => this.isBigger,
  43.           },
  44.           active: "active",
  45.           bigger: "bigger",
  46.           color: "green",
  47.           fontSize: "2rem",
  48.         },
  49.       });
  50.     </script>
  51.   </body>
  52. </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>条件与显示</title>
  7.     <script src="../0907/module/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>
  20.     <script>
  21.       const vm = new Vue({
  22.         el: ".app",
  23.         data: {
  24.           score: 95,
  25.           flag: true,
  26.           tips: "隐藏",
  27.         },
  28.         methods: {
  29.           handle() {
  30.             this.flag = !this.flag;
  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>

七、列表渲染

  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="../0907/module/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div class="app">
  11.       <ul>
  12.         <!-- 数组 -->
  13.         <li v-for="color of colors">{{color}}</li>
  14.       </ul>
  15.       <hr />
  16.       <ul>
  17.         <!-- 对象 -->
  18.         <li v-for="(item,key) of course">{{key}} : {{item}}</li>
  19.       </ul>
  20.       <hr />
  21.       <ul>
  22.         <li v-for="user of users">{{user.name}}({{user.email}})</li>
  23.       </ul>
  24.     </div>
  25.     <script>
  26.       //遍历数组
  27.       const arr = ["html", "css", "js"];
  28.       console.log(Object.keys(arr));
  29.       Object.keys(arr).forEach((item) => console.log(arr[item]));
  30.       //遍历对象
  31.       const obj = { id: 1, name: "peter", email: "peter@php.cn" };
  32.       Object.keys(obj).forEach((item) => console.log(obj[item]));
  33.       //遍历对象数组
  34.       const objArr = [
  35.         { id: 1, name: "apple" },
  36.         { id: 2, name: "orange" },
  37.       ];
  38.       console.log(Object.keys(objArr));
  39.       Object.keys(objArr).forEach((item) =>
  40.         console.log(objArr[item].id, objArr[item].name)
  41.       );
  42.       /* 
  43.       let lis = "";
  44.       lis += Object.keys(objArr).map((item) => {
  45.         return `<li>${objArr[item].id} : ${objArr[item].name}</li>`;
  46.       });
  47.       console.log(lis);
  48.       const ul = document.createElement("ul"); */
  49.       //或者
  50.       for (item of objArr) {
  51.         console.log(item.id, item.name);
  52.       }
  54.       const vm = new Vue({
  55.         el: ".app",
  56.         data: {
  57.           //array
  58.           colors: ["red", "green", "blue"],
  59.           //object
  60.           course: { name: "vue基础", lecture: "朱老师" },
  61.           //obj-arr
  62.           users: [
  63.             { name: "admin", email: "admin@qq.com" },
  64.             { name: "zhang", email: "zhang@qq.com" },
  65.           ],
  66.         },
  67.       });
  68.     </script>
  69.   </body>
  70. </html>

学习总结

1.模板语法：

  • 文本：

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

    <span>Message: {{ msg }}</span>

    通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

  • 原始 HTML:

    双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html

    v-:Vue指令的前缀，以html自定义属性的方式书写

  • 支持JavaScript 表达式

2.计算属性和过滤器

  • 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

  • 对于任何复杂逻辑，都应使用计算属性

  • Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化

  • 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

  • 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道” 符号 |指示

3.侦听器属性

  • Vue 通过 watch来添加侦听器

  • 侦听器应用场景：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

4.样式修改

(1)绑定在class上
  • 对象语法
  1. 我们可以传给 v-bind:class 一个对象，以动态地切换 class
  3. ```
  4. <div v-bind:class="{ active: isActive }"></div>
  5. ```
  6. ```
  7. data: {
  8.       isActive: true,
  9.       hasError: false
  10.       }
  11. ```
  13. 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive是否为真
  15. `v-bind:class` 指令也可以与普通的 class 属性共存

  • 数组语法

    我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

    1.   <div v-bind:class="[activeClass, errorClass]"></div>
    1.   data: {
    2.          activeClass: 'active',
    3.          errorClass: 'text-danger'
    4.         }
(2)绑定在内联样式上
  • 对象语法
  1. `v-bind:style`来设置内联样式
  3. ```

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

  1. ```
  2. ```
  3. data: {
  4.       ctiveColor: 'red',
  5.       fontSize: 30
  6.       }
  7. ```

  • 数组语法

    1. <div v-bind:style="[baseStyles, overridingStyles]"></div>

5.条件与显示

  • v-if 指令用于条件性地渲染一块内容

  • v-else 添加一个“else 块”

  • v-else-if 添加一个“else if(){} 块”

  • v-show 只是简单地切换元素的 CSS 属性 display

6.列表渲染

  • v-for 指令基于一个数组来渲染一个列表

  • v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

  • 在 v-for 块中，我们可以访问所有父作用域的属性

  • v-for 还支持一个可选的第二个参数，即当前项的索引

  • 可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法

  1. <div v-for="item of items"></div>
  • Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
上一条：高效的编写后台代码下一条：PHP 分页功能，用户信息表的编辑与删除功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多