vue 自定义指令
全局注册/局部注册
钩子函数
bind(){},//绑定
inserted(){},//插入（父节点存在即可调用，不必存在于 document 中）
update(){},// 更新
componentUpdated(){},// 被绑定元素完成第一次生命周期时调用
unbind(){},// 解绑
参数【以bind 为例】
bind(el, binding, vnode, oldVnode){
el:'直接操作 DOM',
binding:{
def:{},// def 算法
name:'test', // v-test="1+1" 指令名(不包含 v- 前缀)
rawName:'v-test',
value:'2',
oldValue:'',
expression:'1+1', // v-test="1+1"
arg:'foo', // v-test:foo
modifiers:{'a':true,'b':true}, // v-test.a.b
modifiers:{'a':true,'b':true}, // v-test.a.b
}
vnode:'Vue编译的生成虚拟节点'
oldVnode:'上一次的虚拟节点'
},vue 自定义 filter
语法：<any>{{表达式 | 过滤器}}</any>
demo：
:class="node | checkboxClass"
<h1>{{price | myCurrency('￥',true)}}</h1>
filters: {
/*
语法：<any>{{表达式 | 过滤器}}</any>
demo：
:class="node | checkboxClass"
<h1>{{price | myCurrency('￥',true)}}</h1>
*/
checkboxClass () {},
},
vuex
https://vuex.vuejs.org/zh/ -- 状态管理官网
- 用 Vuex 是繁琐冗余的，
- 使用简单的 store 模式状态管理更小巧
- 多个视图使用于同一状态
- 不同视图需要变更同一状态
- import store from './store' //引入状态管理 store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
vue slot分发
父组件需要在子组件内放一些DOM，它就是负责这些DOM是否显示，在哪个地方显示
虽子组件的child标签包含一些dom和内容，但由于他不在子组件的template属性中，因此不属于子组件【不显示】
在组件template中添加<slot></slot>标签，就可以分发不在子组件的template属性中的内容显示在子组件中
具名slot
父组件要在分发的标签中添加属性"slot=name名"
子组件在对应分发位置上的slot标签添加属性"name=name名"
js 里面用 '' html 里 用 "" java里用 ""
<div id="app">
<child>
<div slot="1">
1
</div>
<div slot="2">
2
</div>
<slot name="1"></slot>
<slot name="2"></slot>
</child>
</div>var vm = new Vue({
// 选项
el:'#app',
data:{},
computed:{
dataFormat(){
let date = new Date();
let month = (date.getMonth() + 1).toString().padStart(2,'0');
let strDate = date.getDate().toString().padStart(2,'0');
return `${date.getFullYear()}-${month}-${strDate}`
},
currentTime() {
let date = new Date();
//时间格式HH:MM:SS
return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
},
},
watch:{},
methods:{},
created(){},
components:{
child:{
template:'<div>我是子组件<slot name="1"></slot><slot name="2"></slot></div>'
}
},// 局部组件
})
vue 修饰符和js事件处理机制
事件捕获（目标元素）
事件冒跑(事件传播)
事件监听
onclick
document.getElementById("btn").onclick = myClick;
document.getElementById("btn").addEventListener('click',function(){},false)
document.getElementById("btn").removeEventListenter('click',function(){},false)
阻止浏览器的默认事件的发生 event.preventDefault()
阻止事件冒泡 event.stopPropagation()
<div id="app">
<!-- 阻止js事件冒泡的作用：stopPropagation - 阻止单击事件继续传播 -->
<!--return false 除了阻止默认行为之外，还会阻止事件冒泡-->
<a @click.stop="doThis">stop</a>
<!-- 标签的默认行为：preventDefault-提交事件不再重载页面 -->
<form @submit.prevent="onSubmit">prevent</form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat">prevent</a>
<!-- 只有修饰符 -->
<form @submit.prevent>
</form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">capture</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">self</div>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
submit <input @keyup.enter="submit">
<div>submit <input @keyup.13="submit"></div>
<div>
<input @keyup.page-down="onPageDown">
</div>
</div>
vue 组件
props 我们在父组件中需要将子组件需要的数据动态导入,在子组件中，我们的接收和使用
export default{
name:"",
props:["flag","attributeList","szList","sxList"],
data(){},// data 必须是一个函数
}将父组件的方法注入子组件 @selectFunc="selectFunc"
this.$emit('selectFunc', value)ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上(组件 name )
基础组件
我们把会在各个组件中被频繁的用到称为基础组件。
可以使用 require.context 只全局注册这些非常通用的基础组件。
全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
组件 data 必须是一个函数
类型检查
type 可以是下列原生构造函数中的一个 1/8
String -- string
Number -- number
Boolean -- boolean
Symbol
Array
Object
Date
Function
组件传值
单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行
title="dkd" // 通过向子组件静态传值
:key="post.id" // 通过向子组件动态传值
props:[] // 用来接收数据
通过 @method="method" 向子组件传递事件
this.$emit('method',val) 并传入事件名称来触发一个事件 【事件分发】
this.$refs.AuditReason.initModel(opt,type); 【组件注册和调用】
this.$event 访问到被抛出的这个值 val
v-model
将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出
组件命名
html 大小写不敏感，浏览器会把所有大写字符解释为小写字符。
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
Vue Router 两种函数
Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
beforeEach函数有三个参数：
- to:router即将进入的路由对象
- from:当前导航即将离开的路由
- next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
Vue.afterEach(function(to,form))/*在跳转之后判断*/
router.beforeEach((to, from, next) => {
tips = 0
// 获取传递的参数并进行操作 每次路由加载时读取上次操作后的数组
bus.$on('switchPage', (params) => {
currentMenuList = params
})
if (Object.keys(to.meta).length !== 0) {
currentMenuList.forEach(item => {
if (item.name === to.meta.name) {
tips = 1
}
})
let obj = {
title: to.meta.title,
name: to.meta.name,
isMenu: to.meta.isMenu,
path: to.fullPath
}
if (tips === 0) {
currentMenuList.unshift(obj)
}
bus.$emit('switchPage', currentMenuList)
}
if (to.path !== '/sign') {
if (window.sessionStorage.user) {
next()
} else {
next('/sign')
}
} else {
if (window.sessionStorage.user) {
next('/')
} else {
next()
}
}
})vue 消息提示 this.$message()
/*
配置项：
type：类型【success，error，info，warning】
button：按钮
text：内容
duration:时间
*/
import VueMessage from './components/message'
Vue.use(VueMessage)
message () {
this.$message({
type:'success',
text:11111,
});
},
模板语法
{{}}
vue指令
- v-html 模板语法 原始html指令
- v-model 模板语法 双向绑定指令
- v-if 条件判断
- v-else-if 多重条件判断
- v-else
- v-show 只是简单地切换元素的 CSS 属性 display
- v-show 不支持 <template> 元素
- v-for list渲染
- v-on 事件绑定
- v-bind 属性绑定
- v-model form 数据双向绑定
- v-model component 数据双向绑定
ps:v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
频繁切换请用 v-show
属性绑定
- attr ="string" 模板语法 静态参数
- :attr="attr" 模板语法 动态参数[data 域]
- {{}} 模板语法 文本
修饰符
- .trim/.lazy/ 模板语法 form修饰符
- .stop/.prevent/.capture/.passive 模板语法 event修饰符
- .sync/.native/ 模板语法 component修饰符
- .self/.once/ 模板语法 其他修饰符
vue 实例选项参数
- el:'',
- data:{},
- methods:{},
- computed:{},
- watch{},
- beforeCreat(){},//vue 钩子函数/生命周期
- created(){},
- beforeMount(){},
- mounted(){},
- beforeDestroy(){},
- destroyed(){},
vue 渲染机制，遍历算法，局部更新
- v-bind:key 用标记需要渲染dom节点
- :key 用标记需要渲染dom节点
vue 组件
相关概念
- 组件是可复用的 Vue 实例 接收 data、computed、watch、methods 以及生命周期钩子等参数。
- el 是vue根实例特有的选项。
- 组件注册
- 有两种组件的注册类型：全局注册和局部注册
父子组件事件监听和广播通信
- 组件父级通过 v-on 监听子组件实例的任意事件：
- @click-larger="postFontSize += $event;"
- 子及组件通过 $emit()广播 和父组件发生通信
- @click="$emit('click-larger',0.1)"
- 父级组件通过$event 接收 // 0.1
- 自定义事件
- 自定义事件命名： kebab-case 的事件名
- 组件中 v-model 用法
import/require 使用一个模块系统和组件
- 模块系统局部注册
- 基础组件自动全局注册
- 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
Props 特性
- camelCase (驼峰命名法) 的 prop 名其等价kebab-case (短横线分隔命名) 命名
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定,父->子
- prop type 检查
- prop 类型检查会在一个组件实例创建之前进行验证
type 可以是下列原生构造函数中的一个
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
非 prop 特性(也是常用场景)
- 是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
- 特点：组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
- inheritAttrs: false 和 $attrs的使用确保手动决定这些特性会被赋予哪个元素
@focus.native="onFocus"
slot 内容分发
- Vue 实现了一套内容分发的 API：若组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
动态组件
- 场景：组件之间动态切换缓存
- keep-alive>component[is="currentTab"]
异步组件
- Vue 允许你以一个工厂函数的方式定义你的组件
列表过度
- 条件渲染 (用 v-if)
- 条件展示 (用 v-show)
- 动态组件 (用 component[is=''])
- 组件根节点
css 过度
- 常用的过渡都是使用 CSS 过渡。
- css 动画：CSS 动画用法同 CSS 过渡，
- 区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，
- 而是在 animationend 事件触发时删除。
- css 写动效
- css框架动效
- js 写控制css写动效
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
