VUE.js一些常用指令

最新推荐文章于 2025-10-31 10:55:03 发布

原创最新推荐文章于 2025-10-31 10:55:03 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #es6

Uue.js 专栏收录该内容

3 篇文章

订阅专栏

VUE.js一些常用指令

el: 挂载元素
data 储存数据可以是数组[]、对象{}、字符串""、数值等等一些数据（当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值）
methods 通常是实现某种特定功能的函数

computer 计算属性（计算属性是基于它们的响应式依赖进行缓存的）可以简单理解为缓存 getter、setter是computer内置函数，默认自带

computer计算属性举例：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

watch侦听属性（Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
上面代码是命令式且重复的。将它与计算属性的版本进行比较：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

v-if VS v-show

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0cXDMBnl-1634642378984)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211015213451968.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vE4rGMdR-1634642378987)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211015213619224.png)]

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for(遍历) 可以遍历一个数组来渲染一个列表、也可以遍历对象

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

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-bind： (属性绑定) 简写：:bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on:（事件绑定）指令，它用于监听 DOM 事件简写：@

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-model (事件双向绑定)

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

原始模板

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCnBGRz8-1634642378989)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211019184046990.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pWHncoQu-1634642378991)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20211019184020640.png)]
。为了输出真正的 HTML，你需要使用 v-html

[外链图片转存中…(img-KCnBGRz8-1634642378989)]

[外链图片转存中…(img-pWHncoQu-1634642378991)]