赞
踩
使用el方式:
使用render函数方式:
插值表达式
插值表达式相当于一个占位符,只会替换掉其中的占位置的内容。
v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。
插值表达式和v-text不能够解析html标签,v-html能够解析html标签。
结论:
指令
VUE提供的14个指令:
计算属性和侦听器
Class和Style绑定
当绑定样式时,我们可以使用Class和Style。它们分别可以绑定数组或者对象,实际开发中,我们推荐使用Class绑定,可以实现样式复用。
条件渲染/列表渲染
表单输入绑定
当我们使用v-model绑定表单元素时,它负责去监听用户的输入事件,以及更新数据,即双向绑定。
组件
组件是可复用的Vue实例,一个组件封装了html,css,js,它可以实现页面上的一个功能区域,可以无限次的被重用。
插槽
插槽一般用于在自定义组件中挖坑,使用这个组件时去填坑。这样可以使组件更灵活。
插件
如vuex、vue-router都是插件。也可以自己开发插件。
混入mixin
如果多个组件都有相同的选项,就可以使用mixin方式,把相同的选项进行合并,让代码重用。是让组件重用的一种方式。
深入响应式原理
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。
当多个路由组件都有相同的内容,我们可以把这个相同的内容提取到一个公共的组件当中。
常用方法:
$router.push()
this.$router.push('/')
this.$router.push({
name: 'Detail', params: {
id: 1 } })
push方法会记录本次历史。
$router.replace()
this.$router.replace('/login')
注意:和push方法有些类似,都可以跳转到指定的路径,参数形式也是一样的。但是,replace方法不会记录本次历史,它会把我们当前的历史改变为我们指定的路径。
$router.go()
go是跳转到历史中的某一次,负数为后退。
this.$router.go(-2)
这两种模式都是客户端路由的实现方式,即当路径发生变化时,不会像服务器发送请求,是由JS监视路径的变化,然后根据不同的地址渲染不同的内容。如果需要服务端内容,会发送Ajax请求去获取。
表现形式的区别
Hash模式
URL中#后面的内容作为路径地址;监听hashchange事件;根据当前路由地址找到对应组件重新渲染。
History模式
History模式是一个正常的url。要用好History模式,还需要服务端配置支持。
通过调用history.pushState()改变地址栏;监听popstate事件;根据当前路由地址找到对应组件重新渲染。
原理的区别
history.pushState() //IE10以后才支持
history.replaceState()
history.go()
History模式的使用
const router = new VueRouter({
// mode: 'hash',
mode: 'history',
routes
})
const path = require('path') // 导入处理 history 模式的模块 const history = require('connect-history-api-fallback') // 导入 express const express = require('express') const app = express() // 注册处理 history 模式的中间件 app.use(history()) // 处理静态资源的中间件,网站根目录 ../web app.use(express.static(path.join(__dirname, '../web'))) // 开启服务器,端口是 3000 app.listen(3000, () => { console.log('服务器开启,端口:3000') })
History模式-nginx服务器配置:
location / {
root html;
index index.html index.htm;
#新添加内容
#尝试读取$uri(当前请求的路径),如果读取不到读取$uri/这个文件夹下的首页
#如果都获取不到返回根目录中的 index.html
try_files $uri $uri/ /index.html;
}
#
启动
start nginx
# 重启
nginx -s reload
# 停止
nginx -s stop
Vue Router 的核心代码
//router/index.js // 注册插件 // Vue.use() 内部调用传入对象的 install 方法 Vue.use(VueRouter) // 创建路由对象 const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: homeComponent } ] }) // 创建 Vue 实例,注册 router 对象 new Vue({ router, render: h => h(App) }).$mount('#app')
类图
实现思路
实现代码(History模式)
let _Vue = null //创建 VueRouter 插件,即实现 VueRouter 类 export default class VueRouter { static install(Vue) { // 1. 判断插件是否已经被加载/安装 // 如果插件已经安装直接返回 if (VueRouter.install.installed) { return } VueRouter.install.installed = true // 2. 把Vue构造函数记录到全局变量 _Vue = Vue // 3. 把创建Vue实例时传入的 router 对象注入/挂载到 Vue 实例上(注意:只执行一次) //混入 _Vue.mixin({ beforeCreate() { // 插件的 install() 方法中调用 init() 初始化 if (this.$options.router) { _Vue.prototype.$router = this.$options.router // 初始化插件的时候,调用 init this.$options.router.init() } } }) } //构造函数 constructor(options) { this.options = options // 记录路径和对应的组件 this.routeMap = { } this.data = _Vue.observable({ // 当前的默认路径 current: '/' }) } //初始化 init() { this.initRouteMap() this.initComponents() this.initEvent() } //解析路由规则成键值对形式 initRouteMap() { // routes => [{ name: '', path: '', component: }] //遍历所有的路由规则,把路由规则解析成键值对的形式,存储到routeMap中 this.options.routes.forEach(route => { // 记录路径和组件的映射关系 this.routeMap[route.path] = route.component }) } //创建 router-link 和 router-view 组件 initComponents() { _Vue.component('router-link', { props: { to: String }, // template: '<a :href="to"><slot></slot></a>' //运行时版本不支持template,需要使用render render(h) { return h('a', { attrs: { href: this.to }, on: { click: this.clickHandler } }, [this.$slots.default]) }, methods: { clickHandler(e) { history.pushState({ }, '', this.to) this.$router.data.current = this.to e.preventDefault() } } }) const self = this _Vue.component('router-view', { render(h) { // 根据当前路径找到对应的组件,注意 this 的问题 const component = self.routeMap[self.data.current] return h(component) } }) } //注册事件 initEvent() { window.addEventListener('popstate', () => { this.data.current = window.location.pathname }) } }
Vue的构建版本
注意:
vue-cli 创建的项目默认使用的是运行时版本的 Vue.js
module.exports = {
runtimeCompiler: true
}
数据响应式、双向绑定、数据驱动。
Vue 2.x(基于Object.defineProperty)
一个对象中一个属性需要转换 getter/setter ,处理方式:
// 模拟 Vue 中的 data 选项 let data = { msg: 'hello' } // 模拟 Vue 的实例 let vm = { } // 数据劫持:当访问或者设置 vm 中的成员的时候,做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举(可遍历) enumerable: true, // 可配置(可以使用 delete 删除,可以通过 defineProperty 重新定义) configurable: true, // 当获取值的时候执行 get () { console.log('get: ', data.msg) return data.msg }, // 当设置值的时候执行 set (newValue) { console.
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。