金银忍冬
金银忍冬

vue 全家桶

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

语法：{{表达式 | 过滤器}}
demo：
:class="node | checkboxClass"

{{price | myCurrency('￥',true)}}

filters: {
	/*　
	语法：{{表达式 | 过滤器}}
	demo：
	:class="node | checkboxClass"
	
{{price | myCurrency('￥',true)}}

	*/
	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中添加标签，就可以分发不在子组件的template属性中的内容显示在子组件中

具名slot

父组件要在分发的标签中添加属性"slot=name名"
子组件在对应分发位置上的slot标签添加属性"name=name名"

js 里面用 ''  html 里 用 ""  java里用 ""


    
       

           1
       

       

           2
       

    
    

    

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:'
我是子组件
'
		}
	},//  局部组件
})


 

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()


    
    
    stop

    
    
prevent


    
    prevent

    
    


    

    
    
    
capture


    
    
    
self



    
    submit 
    
submit

 

 

 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函数有三个参数：

  1. to:router即将进入的路由对象
  2. from:当前导航即将离开的路由
  3. 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指令

  1. v-html  模板语法 原始html指令
  2. v-model 模板语法 双向绑定指令
  3. v-if 条件判断
  4. v-else-if 多重条件判断
  5. v-else 
  6. v-show 只是简单地切换元素的 CSS 属性 display
  7. v-show 不支持