生命周期
BeforeCreate 数据观测初始化事件还未开始 el 和 data 并未初始化
进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定,无el选项
Created 完成数据观测,属性和方法的运算,初始化事件,
mount(el)
BeforeMount 在挂载开始之前被调用,相关的render函数首次被调用。完成了 el 和 data 初始化
创建vm.
el 替换,并挂载到实例上去之后调用。
挂在完毕如果调用vm.$destory()
BeforeUpdate 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前
虚拟DOM 重新渲染并应用更新
Updated 由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用
BeforeDestroy 在实例销毁之前调用。实例仍然完全可用。
解除绑定,销毁子组件以及事件监听器
Destroyed 在实例销毁之后调用。所有的事件监听器会被移除,所有的子实例也会被销毁
从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁
V-指令
v-model v-bind v-show v-if v-for v-on v-once v-html
V-model原理
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。
<input v-bind: value=”something” v-on:input=”something = $event.target.value”>
接受一个value属性
在有新的value属性时触发input事件
v-model 是动态的双向数据绑定(只能用在input, textarea, select上)
.lazy .trim .number
MVVM
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在vue中,使用了双向绑定技术,就是View的变化能实时让Model发生变化,而Model的变化也能实时更新到View。
MVC有厚重的View Controller,无处安放的网络逻辑,较差的可测试性
组件参数传递
父组件传给子组件:子组件通过props方法接受数据;
子组件传给父组件:$emit方法传递参数
Vuex多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目
Slot通信是带数据的标签
Pubsub第三方库(消息订阅与发布)适合于任何关系的组件间通信
hash模式 history模式
hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取
history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更
vuex
State:存放数据状态,不可直接修改里面数据
Mutations:定义的方法动态修改Vuex的store中的状态或数据
Getters:类似vue的计算属性,主要用来过滤一些数据。
Action:可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
Modules:项目特别复杂的时候,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
keep-alive
Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
vue.js的两个核心
数据驱动、组件系统
修饰符
.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.self: 当事件发生在该元素本身而不是子元素的时候会触发;
.capture: 事件侦听,事件发生的时候会调用
vue的key值
用于管理可复用的元素。因Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做使Vue变得非常快,为了高效的更新虚拟DOM
route & router
router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。
route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等
computed & watch
computed是一个计算属性,类似于过滤器,对于绑定到view的数据进行处理,具有缓存性,简化了计算和处理过程 有get和set
watch是一个观察动作,监听props,$emit等异步操作,无缓存性
computed的话是通过几个数据的变化,来影响一个数据,而watch,则是可以一个数据的变化,去影响多个数据
当一个属性受多个属性影响的时候就需要用到computed
当一条数据影响多条数据的时候就需要用watch
Vue-router 和location.href
使用location.href=’/url’来跳转,简单方便,但是刷新了页面;
使用history.pushState(’/url’),无刷新页面,静态跳转;
传参
路由传参:
router.js 后边跟:id配置参数
query 方法传参
name 方法传参
vue自带标签标签传参
组件传参:
父传子 props
子传父 this.
on
vuex state 存的变量,mutations改变的状态 actions 触发的行为(方法)
组件的引入
- 导入组件import Vheader from ‘./components/Vheader.vue’
- 挂载组件在export default 中 定义一个key为components,值为一个对象,这个对象中放着导入键值对;键为变量名,值为组件名,在es6中,键值相同时,可以缩写为一个单一的值。比如:components:{ Vheader }
- 在template模板中使用组件:
<Vheader> </Vheader>
转载:https://blog.csdn.net/qq_41409438/article/details/105248741