Vue.js 技术解析

何为构造器

对于Vue.js 项目来说,每个应用的起步都需要使用Vue.js的构造器函数创建一个根实例,如下

// 逻辑部分代码,建立Vue实例var vm = new Vue({ // 选项})

在实例化Vue.js 的时候,需要传入一个选项对象,它包含数据模板,挂载元素,方法和生命周期钩子等选项,全部的选项可以在api中查看。

对于已经创建的相关的构造器,可以扩展为其他构造器,相当于对某一构造器的继承,从而达到可复用组件构造器的目的,代码如下

var MyComponent = Vue.extend({

})

// 所有的 MyComponent 实例都将会以预定义的扩展选项被创建var MyComponentInstance = new MyComponent()

实例属性和方法

每个Vue实例在被创建的时候,都需要经过一系列的初始化的过程,而在初始化的过程中,加入一些data属性,即表示此实例的一些响应事件或者数据属性等,例如,需要设置数据监听,编译模板,和挂载实例到DOM,在数据变化时更新DOM,在这个过程中也会执行一些叫做生命周期的函数,给予用户在一些特定场景下的执行其他代码的机会。data对象中既定的值发生改变,视图会自动产生响应并及时匹配值,产生响应的效果,例如可以初始化如下的代码。

// 我们的数据对象var data = {a:1}// 该对象被加入到一个Vue.js 的实例中var vm = new Vue({ data: data})// 他们引用相同的对象vm.a === data.a // true// 设置属性也会影响到原始数据vm.a = 2data.a // => 2// 反之亦然data.a = 3vm.a // => 3

当这些数据改变的时候,视图会重新渲染。

生命周期

当出现数据监听,编译模板,挂载实例到DOM和在数据变化时更新DOM等操作,会在此时允许插入开发者添加到特定的代码,比如以下的代码,created钩子事件可以用来在一个实例创建之后执行代码段

// 逻辑部分代码,建立Vue实例new Vue({ data: { a:1 }})// 相关方法定义created: function() { // this 指向vm实例 console.log("a is:" + this.a)}// => "a is: 1"

为什么叫做钩子,主要是针对于某个实例事件发生后需要响应已经预设好的代码,即某一个钩子,勾住了一个实例的状态和事件。也有一些钩子,在实例生命周期的不同场景下调用,如mounted,updated和destroyed,钩子的this指向调用它的Vue.js 实例。

Vue.js 路由

动态路由

编写src/router/index.js 设定一条新的路由

// 引入相关的代码包import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWOrld'import User from '@/components/User'

// 使用引入的包Vue.use(Router)export default new Router({ // 定义路由 routers: [ { path: '/' name: "helloWorld" component: HelloWorld } ]})

上述配置,/ 路由会映射到相同的路由上,也就是说,会访问到HelloWorld页面

小明菜市场

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200701A0WEQQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券