vue 学习笔记

vue指令

v-cloak  //搭配花括号使用；只会渲染花括号内容；该属性可添加样式； 
	[v-cloak]{
            display:none;
       		 }
v-text  //渲染文字数据会覆盖标签内容常用；
v-html //渲染的数据会先解析为html内容；
v-bind: //提供用于绑定属性的指令如：v-bind:title="mytitle";mytitle为data的key；
: //v-bind: 的简写；
v-on: //事件绑定 简写：@；
v-model // 数据双向绑定 注意：此指令只能运用在from里
v-for // 循环指令写法 <p v-for="(it,i) in item">{{ i }}----{{ it }}</p> item data 值 it 自定义变量 i 自定义索引；如果循环对象(value,key,i) 则可以写三个值;该指令可以使用方法传值实时更新
//使用v-for时必须使用:key 属性指定唯一性
v-if // 和v-show效果一样只是实现原理不同；他会创建与删除元素;适用于只有在特定条件下显示的业务
v-show //  和v-if效果一样只是实现原理不同；他会设置透明度为0;适用于经常显示和隐藏的业务
@keyup // 键盘抬起事件

vue自定义指令

<input v-focus> //引用自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {//el是指被绑定的元素DOM
    // 聚焦元素
    el.focus()
  }
})

//注册局部指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {//el是指被绑定的元素DOM
      el.focus()
    }
  }
}

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
unbind：只调用一次，指令与元素解绑时调用。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。




指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

vue事件相关

.stop //阻止冒泡（当子标签和父标签重叠且都有事件则可以阻止其他他事件即父标签事件）
.prevent //阻止默认行为如a标签禁止跳转；from禁止提交
.capture // 实现捕获触发事件（和冒泡触发相反）
.self //只阻止自身冒泡行为
.once //事件只触发一次也会影响到其他行为如.self
按键修饰符
官方内置：
.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右
.按键码 //可以操作所有按键
自定义全局按键修饰符：
Vue.config.Vue.config.keyCodes.f2 = 113;

vue标签样式的创建

<div class="dialog" :style="{'padding-left':labelWidth}"></div>//内联样式
 
<div class="dialog" :style="{backgroundImage:'url('+IMG_SRC+')'}"></div>//内联样式
 
<div :style="{color:0 ? '#000' : '#fff'}"></div>//内联样式
<div :style="styel"></div>//引入data属性
<div :style="[styel,style1]"></div>//引入data属性 多属性引入

vue 的实例创建即属性

var vm = new Vue({//创建vue实例vm
            el: "#app",//绑定标签id
            data:{//使用数据呈键值对的形式
                msg : 'hello vue'
            },
            methods: {//方法区
                lang(）{alert("hello");            
            }
        })
methods // vue实例中定义所有可用方法（方法区）格式：methods : {   show : function(){ alert("hello")}          }；方法可简写为： show(){ alert("hello")}  
在vue实例中，如果想要获取 data上的数据，或者要调用 methods 中的方法，必须通过 this.数据属性名 或 this.方法名 来进行访问
() => {} //内部方法的this指向外部方法的this

vue 过滤器

<h1>{{ msg | Format}}</h1>//得到数据先执行 Format 过滤器处理后渲染页面
//;当要传参给过滤器的时候加小括号传参Format(arg);如果传多个参数用逗号隔开;过滤器可以多次调用用 | 隔开;
// 声明一个全局的过滤器
 Vue.filter('Format', function (value) { //如果有参数或者多个参数用逗号隔开但是第一个参数是被过滤的数据(value,arg)
 	return value.replace(/1/g, 0);//替换所有的1为0
 });




var vm = new Vue({//创建vue实例vm
            el: "#app",//绑定标签id
            data:{//使用数据呈键值对的形式
                msg : 'hello vue'
            },
            methods: {//方法区
                lang(）{alert("hello");            
            }，
           filters : {//私有过滤器
            	dateFormat : function(value){
					return value.replace(/-/g, "???????");
				}
            }
        })

vue生命周期

   			beforeCreate() {//实例完全被创建出来之前执行此方法（此时获取不到 data 和 methods）
                
            },
            created() {//实例创建后初始化参数后执行（此时能获取到 data 和 methods）
                
            },
            beforeMount() {//模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中（可以获取到未渲染的html页面）
                //此时数据是最新的；页面没有更新
            },
            mounted() {//内存中的模板已经挂载到页面中；用户可以看到渲染好的页面
                //此方法是实例创建期间的最后一个生命周期函数，当执行完此方法就表示实例已经被完全创建好了，此时如果
                //没有其他操作的话这个实例就静静的躺在内存中
                //如果需要操作某些插件
            },
            updated() {//此方法执行时页面已经渲染完毕
                
            },
            beforeDestroy() {//此时进入到销毁过程但组件未被销毁
                
            },
            destroyed() {//此时组件已经被完全销毁
                
            }