Vue学习笔记(二)

计算属性

模板内的表达式非常便利,如果在模板中放入太多的逻辑并且多次引用会让模板过重且难以维护,所以在此时应当使用计算属性。

基本使用

具体代码:

{{name + ' ' + age + '岁'}}


{{info}}

输出:
Vue学习笔记(二)_第1张图片

setter与getter

计算属性默认只有getter,不过在需要时也可以提供一个setter。

具体代码:

{{info}}

当我们运行app.info = 'lq 10'时,setter会被调用,页面将会做出相应的更新。

与methods的对比

具体代码:

methods:{{getInfo()}}

methods:{{getInfo()}}

computed:{{info}}

computed:{{info}}

我们可以在控制台发现:getInfo打印了两次,而info只打印了一次。因此可以看出,如果需要多次使用,使用计算属性将比使用methods的性能更高。


哪些数组的方法是响应式的

push、pop、shift、unshift、splice、sort、reverse是响应式的,而通过索引值修改数组元素不是响应式的。

代码参考:哪些数组的方法是响应式的


组件

基本使用

步骤:

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件

具体代码:

const cpn1 = Vue.extend({
  template: `
    

hello

组件

` }) Vue.component('cpn', cpn1) const app = new Vue({ el: '#app' })

输出:
Vue学习笔记(二)_第2张图片

全局组件

全局组件:在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。

具体代码:

const cpn1 = Vue.extend({
  template: `
    

我是全局组件

` }) // 全局组件:可以在多个vue实例使用 Vue.component('cpn', cpn1) const app = new Vue({ el: '#app' }) const app2 = new Vue({ el: '#app2' })

以上代码在浏览器中会显示三行内容。

局部组件

具体代码:

const cpn1 = Vue.extend({
  template: `
    

我是局部组件

` }) const app = new Vue({ el: '#app', // 注册局部组件 components: { cpn: cpn1 } }) const app2 = new Vue({ el: '#app2' })

以上代码在浏览器中只会显示两行内容!

语法糖

全局组件

Vue.component('cpn1', {
  template: `
    

header1

content1

` })

局部组件

const app = new Vue({
  el: '#app',
  components: {
    'cpn2': {
      template: `
        

header2

content2

` } } })

提取template内容

①使用script标签,注意类型为text/x-template

②使用template标签


组件之间的通信

  • 父组件向子组件通过props传递数据
  • 子组件向父组件通过自定义事件$emit传递数据

在以下代码中,将用Vue实例作为父组件!

父传子

父组件向子组件通信使用props!

props有两种写法,一种是数组写法,一种是对象写法。当使用对象写法时,还可以进行类型验证等操作。

数组写法

具体代码:

const cpn = {
  template: '#cpn',
  props: ['cpnGame']
}
const app = new Vue({
  el: '#app',
  data: {
    game: ['天龙八部', '英雄联盟']
  },
  components: {
    cpn
  }
})

对象写法

在对象写法中,可以进行数据类型验证,支持以下数据类型:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

除此之外,还可以添加default进行设置默认值,required进行是否必填项。

具体代码:

const cpn = {
  template: '#cpn',
  // 对象写法
  props: {
    // 1、单个类型检查
    // cpnGame: Array

    // 2、可能多个类型检查
    // cpnGame: [Array, Number]

    // 3、default代表默认值,required表示是否必填
    cpnGame: {
      type: Array,
      default() {
        return ['hhh', 'qqqq', 'aaa']
      },
      required: true
    }
  }
}

子传父

子组件向父组件通信使用$emit自定义事件!

就是在子组件通过$emit()发出一个事件。然后在父组件中,通过v-on来监听子组件发出的事件。

具体代码:

const cpn = {
  template: '#cpn',
  data() {
    return {
      list: [
        {
          id: 1,
          name: 'lq'
        },
        {
          id: 2,
          name: 'zww'
        }
      ]
    }
  },
  methods: {
    listClick(item) {
      this.$emit('item-click', item)
    }
  }
}
const app = new Vue({
  el: '#app',
  components: {
    cpn
  },
  methods: {
    cpnClick(item) {
      console.log(item);
    }
  }
})

你可能感兴趣的:(Vue学习笔记(二))