Vue核心知识-Vue的数据绑定

模板绑定

{{}} 中可以进行简单的一元、二元运算，但不能写语句

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    
V
      {{isActive ? 'active' V: 'not active'}}
      {{arr.join(' ')}}
    
  `,
  data: {
    isActive: false,
    arr: [1, 2, 3]
  }
})

调用全局变量

template: `
    

      {{Date.now()}}
    
  `,

vue 中，在模板里可以访问的，一个是绑定到 this 上的所有值，是可以访问到的；一个是 vue 自建的白名单，默认的 JS 的全局对象，也是可以访问到的。

但是自己定义在外层的全局变量是不能访问的。

// 控制台报错
var globalVar = '111' // eslint-disable-line
new Vue({
  el: '#root',
  template: `
    

      {{globalVar}}
    
  `  
})

绑定 html

使用 v-html 指令

new Vue({
  el: '#root',
  template: `
    

      

    
  `,
  data: {
    html: '123'
  }
})

动态绑定属性

v-bind 指令，简写 :

new Vue({
  el: '#root',
  template: `
    

    
  `,
  data: {
    aaa: 'main'
  }
})

绑定事件

v-on 指令，简写 @

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    

      

    
  `,
  data: {
    aaa: 'main',
    html: '123'
  },
  methods: {
    handleClick () {
      alert('clicked') // eslint-disable-line
    }
  }
})

vue 对这种绑定方式做过优化，不用担心性能上的问题，和事件委托对比。

动态绑定 Class

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    

      

    
  `,
  data: {
    isActive: false,
    aaa: 'main',
    html: '123'
  }
})

数组的写法

数组和对象合并的写方法

这种写法，方便我们合并多个动态 Class

通过 computed

通过 computed 返回一个完整的对象，再绑定 class

动态绑定 Style

import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    

      

    
  `,
  data: {
    html: '123',
    styles: {
      color: 'red'
    }
  },
})

数组、对象合并的写法

new Vue({
  template: `
    

      

    
  `,
  data: {
    html: '123',
    styles: {
      color: 'red'
    },
    styles2: {
      color: 'black'
    }
  }
})

vue 会自动添加 prefix

vue 会根据浏览器对样式进行判断，需要加前缀的都会加上去。

styles: {
      color: 'red',
      appearance: 'none'
    },

chorme看得到的结果

123