漫若浮光z
漫若浮光z

vue使用

详细内容可以到vue官方文档查看

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外)。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

参数
  • 绑定属性（v-bind，简写 : ），href 是参数
...
简写：...
  • 添加事件（v-on，简写 @ ），事件名是参数
...
简写：...
动态参数
 ...
  • 这里的 attributeName （动态属性）会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
  • 动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里无效。同样，在 DOM 中使用模板时需要回避大写键名。
修饰符
  • 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
  • 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
    事件修饰符
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive（ .passive 修饰符尤其能够提升移动端的性能。）

















...





...









...
  • 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

计算属性与侦听属性

下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

每调用一次now方法就会刷新时间：

methods: {
  now: function () {
    return Date.now()
  }
}

计算属性：computed
方法：methods
侦听属性：watch（响应数据的变化）

  • 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时，它们才会重新求值。就是说如果相关的变量没有发生改变，多次访问计算属性，会立即返回之前的计算结果，而不必再次执行函数。
  • 而每当触发重新渲染时，调用方法就会再次执行函数。
  • 如果不希望有缓存，可以用方法来替代计算属性。
  • Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch ，然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。但当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
  • computed 一般用于进行简单的计算，把模板上的简单计算逻辑放到 computed 中，简化模板，减轻模板负担。
  • watch 更多用于更为复杂的计算，监听数据与数据之间的变动。还可以执行异步操作。

样式设置

绑定 class（v-bind:class）
  • 对象
    可以传给 v-bind:class 一个对象，动态地切换 class。

    上面的语法表示 active 这个 class 是否存在取决于数据属性 isActive 的 truthiness
    。isActive 为 true 则显示 active样式表 。
data: {
  isActive: true
}

v-bind:class 指令也可以与普通的 class 属性共存，

如下data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：
  • 数组
    可以把一个数组传给 v-bind:class，当成一个 class 列表来用。


data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式：

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy
时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
  • 组件
    当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
    例如，如果你声明了这个组件：
Vue.component('my-component', {
  template: '
Hi
'
})

然后在使用它的时候添加一些 class：

HTML 将被渲染为:

Hi

对于带数据绑定 class 也同样适用：

当 isActive 为 truthy 时，HTML 将被渲染成为：

Hi
绑定内联样式（v-bind:style）
  • 对象
    v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：


data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
  • 数组
    v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

条件渲染

v-if ，v-else，v-else-if ，v-show

  • v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
Vue is awesome!

也可以用 v-else 添加一个“else 块”：

Vue is awesome!


Oh no
  • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
  • 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
  • v-show 指令用于根据条件展示元素。
    注意，v-show 不支持