简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Vue常用指令和语法基础
Blogger Information
Blog 55
fans 3
comment 0
visits 54556
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue常用指令和语法基础
王佳祥
Original
752 people have browsed it

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() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！