04:基础功能演练:VUE实例中的元素

本章主要内容:

一、vue中的数据

二、el与template

三、methods、watch、computed

四、生命周期钩子

五、data详情

创建一个vue实例很简单,你只需要new一个vue对象就可以了。

var vm = new Vue({

})

这样一个简单的vue实例就创建好了,vm是ViewModel 的简称,它就是一个变量名。
在创建vue实例的时候,还可以往实例中传入多种对象,他们在其中实现各种不同的功能。

本章将讲诉如何创建一个实例,然后添加你想要的功能。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。

一、数据

data:

每当你创建一个vue实例,它都会为其加入一个data,当data的值发生变化的时候,你的视图中对应绑定的部分也会随之发生变化。

var winData={
    title:'如何创建一个VUE实例'
}
var vm = new Vue({
  data: winData
})

vm中的data是它的一个对象,将winData赋值给vm中的data。

vm.title===winData.title
//随着winData的值发生变化,vm中的值也会发生变化,它会自动跟新
//如果你改变vm.title的值,那么随着winData中的title也会随之发生变化
//他们是相互的,其中每一个改变都会影响到另一个的值

如果你在vm渲染之后再添加一个数据,如

vm.subject=='vue实例讲解'

这个时候如果你输出winData.subject,你得到的结果将会是undefined,也就是说,vm和winData之间的绑定都是在渲染前进行的,如果你在渲染后进行添加,他们直接也只有渲染前的数据才是绑定的,所以如果你有需要在渲染后再去修改某些值,你也需要在之前就定义好这个变量,赋予初始值,然后再去改变它的值,而不是渲染后直接新添加。
比如:

var vm = new Vue({
  data: {
  nowDate: '2017-12-17',
  nowPage: 1,
  pages: 0,
  isActive: true,
  dataList: [],
  bgImg:null
    }
})

本章末尾将对data进行额外的介绍

props:

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。

示例:

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法,提供校验
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

子组件要显式地用 props 选项声明它预期的数据:

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

然后我们可以这样向它传入一个普通字符串:

<child message="hello!"></child>

二、el和template

el:

在创建vue实例的时候,往往会有一个el对象,它是用来做什么的?

var vm = new Vue({
  el: '#example',
  data: {
      msg:'vue教程'
  }
})

vm.el===document.getElementById(‘example’)

el就是vue实例所依靠的dom根元素,el:“app”,将vm实例挂在id为app的DOM节点上,vm实例的作用范围就在id为app这个DOM内。

template:

在演示props的代码中出现了一个template,它里面包含了一些html代码,它是一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。

如果值以 # 开始,则它将被用作选择符,并使用匹配元素的 innerHTML 作为模板。常用的技巧是用

出于安全考虑,你应该只使用你信任的 Vue 模板。避免使用其他人生成的内容作为你的模板。

如果 Vue 选项中包含渲染函数,该模板将被忽略。

简单的来说,它就是一个VUE的标签,你可以把html代码放置在其中,它会将html代码渲染至页面上。对于它的使用会在后续文章进行讲解。

三、methods、watch、computed

它们三者都是以函数为主体,但是它们之间却各有区别。

methods:

它就是用来装载可以调用的函数,您可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

示例:

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

如果你要通过对DOM的操作来触发这些函数,那么应该使用v-on 对操作和事件进行绑定,之前也有简单的介绍。

computed是计算属性,在第二章的时候已经为大家介绍过了,而watch与computed一样,他们都是在数据发生变化之后去进行某些处理。

在vue中调用computed和调用data一样,都是this.funName,而不是methods这样的this.funName(),而一般情况watch与computed都是系统自动调用去实现数据改变的。

watch监听+事件

即监听到某些条件后去触发事件进行某些处理。

关于他们三者如果有想了解更多可以查看博客【从作用机制和性质上看待methods,watch和computed的关系】【http://blog.csdn.net/insistlzh/article/details/78836864

四、生命周期钩子

【每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。】

各个钩子函数的调用时间:

1.beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2.created

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

3.beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

notice:该钩子在服务器端渲染期间不被调用。

4.mounted

el 被新创建的 vm. e l 替 换 , 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 , 当 m o u n t e d 被 调 用 时 v m . el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm. elrootmountedvm.el 也在文档内。
页面渲染完成后初始化的处理都可以放在这里。

notice: mounted 不会承诺所有的子组件也都一起被挂载。

5.beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

notice:该钩子在服务器端渲染期间不被调用。

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

notice:updated 不会承诺所有的子组件也都一起被重绘。

7.activated

keep-alive 组件激活时调用。

notice:该钩子在服务器端渲染期间不被调用。

8.deactivated

keep-alive 组件停用时调用。

notice:该钩子在服务器端渲染期间不被调用。

9.beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

notice:该钩子在服务器端渲染期间不被调用。

10.destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

notice:该钩子在服务器端渲染期间不被调用。

关于第七、八点中涉及的keep-alive,大家可以前往官网进行学习,文中不多加阐述。【https://cn.vuejs.org/v2/api/#keep-alive】

附上生命周期图:
image

data详情:

我们常见的data有两种类型:Object 或 Function,即对象或方法。

Object:

new Vue({
        el: '#app',
        data:{
            msg:'Object对象'
        }
    })

Function:

export default{
    data(){
        return {
           msg:'Function方法'
        }
    }
 }

其中在组件中只能使用第二种。

他们之间的区别在于:

Object对象在项目全局都可见,而方法则只在当前组件可见。

所以在组件中使用Object对象,会造成变量污染。
使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

以下为vue官网对data的介绍:

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。

实例创建之后,可以通过 vm. d a t a 访 问 原 始 数 据 对 象 。 V u e 实 例 也 代 理 了 d a t a 对 象 上 所 有 的 属 性 , 因 此 访 问 v m . a 等 价 于 访 问 v m . data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a 等价于访问 vm. data访Vuedata访vm.a访vm.data.a。

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。

如果需要,可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(…)) 得到深拷贝的原始数据对象。

示例:

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

注意,不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }})。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.myProp 将是 undefined。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页