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

本文小编为大家详细介绍“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.firstNamevm.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、无参


Greet
Greet

2、有参


Greet 

Greet

只需要event对象时,

111

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


  Submit

几种错误写法

111
111
事件修饰符

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

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



  




 



...
...
...

1.事件修饰符

 



 


 
...

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

ok

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




...
 
 
...

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

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

5、条件渲染

基础

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

Vue is awesome!
isShow为false时显示

问题:那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。

原因:两个模板使用了相同的元素,虚拟DOM渲染时,出于性能考虑 不会被替换掉仅仅是替换了它的 placeholder

解决:添加一个具有唯一值的 key attribute 即可,key不同,不会复用


  
  
  
  

注意, 元素仍然会被高效地复用,因为它们没有添加 key attribute。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

Hello!

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display

注意,v-show 不支持