Vue计算属性、事件监听以及条件渲染实例分析

本文小编为大家详细介绍"Vue计算属性、事件监听以及条件渲染实例分析"，内容详细，步骤清晰，细节处理妥当，希望这篇"Vue计算属性、事件监听以及条件渲染实例分析"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

基础语法

1、 插值（动态内容）

Mustache语法(双大括号)

将data中的文本数据，插入到HTML中，此时数据是响应式的。

Message: {{ msg }}{{firstName}}{{lastName}}{{firstName+lastName}}{{firstName+""+lastName}}//使用 JavaScript 表达式
 {{counter*2}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

指令

• v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新

这个将不会改变: {{ msg }}

• v-html :解析html并展示

• v-text：渲染指定dom的内容文本，类似Mustache，一般不用，不够灵活，会覆盖标签内所有内容

• v-pre：原封不动展示标签内容，不进行解析

{{message}} 

结果：{{message}}

• v-cloak：解决vue解析卡顿会出现{

  {}}闪烁的问题
  vue解析之前，p有属性v-cloak，解析后没有此属性。
  所以 可以通过这个指令隐藏未编译的 Mustache 标签直到实例准备完毕

  
{{message}}

2、绑定属性（动态属性）

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。简写为冒号:

1、元素的src和href

百度

2、class绑定

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。

data: {  isActive: true,  hasError: false}

结果渲染为：

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里，也可以定义在data

data: {  classObject: {    active: true,    'text-danger': false  }}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。

data: {  isActive: true,  error: null},computed: {  classObject: function () {    return {      active: this.isActive && !this.error,      'text-danger': this.error && this.error.type === 'fatal'    }  }}

返回对象的方法

data: {  isActive: true,  error: null},methods: {  IsActive() {    return {      active: this.isActive && !this.error,      line:isLine    }  }}

数组语法

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

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

渲染为：

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

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

3、 style绑定内联样式

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

 data: {  activeColor: 'red',  fontSize: 30}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}

同样的，对象语法常常结合返回对象的计算属性使用。或者方法

 //计算属性
 //方法

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

3、计算属性

在模板中放入太多的逻辑会让模板过重且难以维护，需要对数据进行变化处理后再显示

   {{ message.split('').reverse().join('') }} 

基础例子

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"
 

结果：

Original message: "Hello"

Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // => 'eybdooG'

你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性的 getter和setter

计算属性默认只有 getter，是只读属性，不过在需要时你也可以提供一个 setter：

// ...computed: {  fullName: {    // getter    get: function () {      return this.firstName + ' ' + this.lastName    },    // setter    set: function (newValue) {      var names = newValue.split(' ')      this.firstName = names[0]      this.lastName = names[names.length - 1]    }  }}// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

因为计算属性一般没有setter，所以简写为

 fullName:  function () {      return this.firstName + ' ' + this.lastName }

计算属性 vs 方法
通过在表达式中调用方法也能达到同样的效果

Reversed message: "{{ reversedMessage() }}"
// 在组件中

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

{{ fullName }}

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

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

计算属性传参

计算属性本身是不能传参的，但是可以通过闭包传参，但是传参之后没有缓存机制了，和methods没有什么区别，所以官网并没有介绍这个

 computed: {          usertype(){                  return function (value){                          var user = ''                          value === 1 ? user = '学生' : user = '老师'                          return user              }          }  }

4、事件监听

基础

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。简写@click
许多事件处理逻辑会更为复杂，因此 v-on 还可以接收一个需要调用的方法名称

    Add 1     +      -     
The button above has been clicked {{ counter }} times.

参数问题(括号问题)

1、无参

GreetGreet

2、有参

Greet Greet

只需要event对象时，

111

需要event对象，同时也需要其他对象时，可以用特殊变量 $event 把它传入方法：

  Submit

几种错误写法

111111

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  
 
...
...
...

1.事件修饰符

• .stop 阻止事件冒泡，调用event.stopPropagation

• .prevent 阻止事件默认行为，调用event.preventDefault()

• .self 事件绑定的元素本身触发时才触发回调

 
...

• .once 事件只能触发一次，第二次就不会触发了

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上

• .native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件,监听组件的原生事件

ok

• .passive 能够提升移动端的性能。

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

...

• .capture

  
...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

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

5、条件渲染

基础

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

Vue is awesome!
isShow为false时显示

在