Vue 学习(二、基础 - vue 常用指令和 options 选项)

最新推荐文章于 2024-05-09 05:10:22 发布

ares5k

最新推荐文章于 2024-05-09 05:10:22 发布

阅读量704

点赞数 2

分类专栏： # Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Ares5kong/article/details/121266181

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

文章目录

一、文本插值
- 1. Mustache
- 2. v-once
二、绑定属性
三、计算选项
四、过滤器选项

更多、更新、更详细的指令用法，建议参考 Vue 官方 API 文档

一、文本插值

1. Mustache

用来在 DOM 元素的文本中显示 Vue 相关内容，如，Vue 对象内的自定义数据，Vue 循环指令中的迭代变量等
Mustache 的语法为双花括号 {{ 变量名 }}，其可以实时监听数据变化

效果：
mustache 语法
代码：

<body>
    <div id="app">{{showMessage}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          showMessage: 'Hello World!'
        }
      })
    </script>
  </body>

2. v-once

v-once 指令，是 Vue 扩展出来的 DOM 元素属性，通常与 Mustache 语法搭配使用，搭配后, Mustache 将不再
把数据的变化实时反应到对应元素上

效果：
v-once 指令
代码：

<body>
    <div id="app"><p v-once>{{showMessage}}</p></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          showMessage: 'Hello World!',
        },
      })
    </script>
  </body>

二、绑定属性

v-bind 指令，用来给 DOM 默认拥有的属性赋值，其具体语法为 v-bind:DOM 属性名，其语法糖为 :DOM 属性名，使用 v-bind 指令后，DOM 属性的属性值有一些差别，可以分类为 CSS 属性赋值、Style 属性赋值、其他属性赋值

1. v-bind: CSS 属性赋值

v-bind 指令，用来给 DOM 默认拥有的属性赋值，其具体语法为 v-bind:DOM 属性名，其语法糖为 :DOM 属性名，使用 v-bind 指令后，DOM 属性的属性值有一些差别，分为常规属性赋值、CSS 属性赋值、Style 属性赋值三种常见情况

2. v-bind: Style 属性赋值

该场景下使用 v-bind 后, 有三种使用方式可以参考

方式一: 注意使用的是中括号 []

<body>
  <div id="app">
    <div v-bind:style="[size, border]"></div>
    <div :style="[size, border]"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        size: {
          'width': '100px',
          'height': '100px'
        },
        border: {
          'border': '1px solid black'
        }
      }
    })
  </script>
</body>

方式二: 注意使用的是花括号 {}

<body>
  <div id="app">
    <div v-bind:style="{width: divWidth, height:divHeight, border:divBorder}"></div>
    <div :style="{width: divWidth, height:divHeight, border:divBorder}"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        divWidth: '100px',
        divHeight: '100px',
        divBorder: '1px solid black'
      }
    })
  </script>
</body>

方式三: 注意，直接写值要加上引号和像素单位

<body>
  <div id="app">
    <div v-bind:style="{width: '100px', height:'100px', border:'1px solid black'}"></div>
    <div :style="{width: '100px', height:'100px', border:'1px solid black'}"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app'
    })
  </script>
</body>

3. v-bind: 常规属性赋值

该场景下使用 v-bind 后, DOM 元素的属性值可以是 Vue 对象 中的自定义数据，也可以直接写值。注意：直接写值
的时候，一定要加引号，否则 v-bind 默认会去 Vue 对象 内查找对应得变量

<body>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
  <div id="app">
    <!-- v-bind 语法糖 -->
    <img :src="imgUrl" />
    <!-- v-bind 完整写法 -->
    <img v-bind:src="imgUrl" />
    <!-- 注意：直接写值，要写引号，否则 v-bind 会在 vue 中查找对应的变量 -->
    <img v-bind:src="'https://cn.vuejs.org/images/logo.svg'" />
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://cn.vuejs.org/images/logo.svg'
      }
    })
  </script>
</body>

三、计算选项

computed 是 options 中的选项，用来定义计算属性，使用场景：当一个值需要计算才能使用，并且多处使用时，可
以考虑用该选项来避免计算的代码重复出现，它与方法不同的是，计算属性会缓存，不会每次都执行，只有相关的数据
变化时才会再次执行

computed 中计算属性的完整写法：

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        first: 'Hello',
        last: 'World!'
      },
      computed: {
        show: {
          get: function () {
            return this.first + ' ' + this.last
          },
          set: function (val) {
            this.first = val + this.first
          }
        }
      }
    })
    console.log(app.show) // 结果：Hello World!
    app.show = 'ares5k, '
    console.log(app.show) // 结果：ares5k, Hello World!
    console.log(app.first) // 结果：ares5k, Hello
  </script>
</body>

computed 中的计算属性只需要 getter 时，可以简写为：

<body>
  <div id="app">{{show}}</div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        first: 'Hello',
        last: 'World!'
      },
      computed: {
        show:function() {
          return this.first + ' ' + this.last
        }
      }
    })
    console.log(app.show) // 结果：Hello World!
  </script>
</body>

四、过滤器选项

与 computed 看起来很像，但 filters 中，修改相关数据后，不会实现响应式，既 DOM 元素不会做出同步，并且不
会将计算后的值缓存，每次使用时，不管相关数据是否变化，都要重新执行

filters 中的内容，可以连续使用，使用语法为 {{ 原始值 | filter1 | filter2}}, 定义 filters 时，默认会有一个参数，
原始值会被自动传入，如果需要多个参数，使用时，只传其他参数就可以，不需要手动传入 原始值

效果：修改后的 message 并没有实时响应在 DOM 元素中
filters
代码：

<body>
  <div id="app">
    {{200 | price | unit('元')}} <br/>
    {{message}}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data:{
        message: 'Hello World'
      },
      filters: {
        price: function (val) {
          this.message = 'Aresk5' // 不会实时响应在 DOM 元素中
          return val.toFixed(2)
        },
        unit: function (val, unitName) {
          return val + ' ' + unitName
        }
      }
    })
  </script>
</body>