Vue学习笔记

1.ES6中字符串的新方法

给字符串补足位数

padStart（2，‘0’）

padEnd（，’’）

2.VUE的按键修饰符：监听固定按键

监听固定按键

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

也可使用键盘码

自定义全局按键修饰符的方法

Vue.config.keyCodes.f2 = 113;

//@keyup.enter="add()"

3.VUE自定义指令的方法

Vue中所有的指令在调用时，都以v-开头

全局定义

方法：

参数1：指令名称，定义时指令名称不需要加v-，调用时才加上

参数2：是一个对象，对象身上有指令相关的函数，函数在特定阶段执行相关操作

钩子函数内的参数，（

第一个为el，原生dom对象,

第二个为指令传入的参数如：v-focus(200) ）

 Vue.directive('focus',{
    bind: function(el){  //当指令绑定元素上，执行bind函数，只执行一次
       // el.focus()  无效，因为此时dom还没有解析完成，绑定先行
    },
    inserted: function(){ //当元素插入DOM中时，执行该函数，只触发一次
    	el.focus();  //插入dom时调用
    },
    updated: function(){  //当Vnode更新时，执行updated ，可能触发多次
    }
})

私有定义

在实例中直接添加directives对象即可

directives:　{

	'fontweight': {
        bind: function(el,binding){
            el.style.fontWeight = bingding.value;
        },
        inserted: function(el,b){
                
        }

	}
}

简写方式

如果只需要对bing和update钩子，可以简写如下

directives:　{//等同于同时写了bind和updated两个钩子

	'fontsize': function(el,binding){
            el.style.fontsize = parseInt(binding.value)+'px';
}

4.VUE实例的生命周期

主要的生命周期函数分类：

1.创建期间的生命周期函数：

• beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
• created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
• beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
• mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数：

• beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
• updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3.销毁期间的生命周期函数：

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

5.模块化和组件化的区别

模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证每个功能模块的职能单一

组件化：从UI界面的角度进行划分；前端的组件化方便UI组件的重用

VUE组件：为了拆分Vue实例的代码量，能够以不同的组件，来划分不同的功能模块

6.Vue组件化创建方式

1.全局组件

1.第一种

Vue.component('组件名称',{

template:  "这里放标签"

})

第二种（字面量类型的模板组件）

Vue.component('组件名称',{

template:  ‘#这里放id’

})

然后在实例控制区域之外定义template标签，直接在里面写结构

使用方法都是直接：<组件名称></组件名称>

注意：这里的组件名称如果使用驼峰命名法的话，那么在html结构中要使用-分隔开，而不能使用驼峰

2.私有组件

components属性定义内部私有组件

components:{
	'com1':{
		template：''
}

7.组件中的data属性

组件里的data要定义为一个函数，且函数要返回一个对象

data:function(){
	return { }
}
//可以简写为 
	data(){
		return {}
	},

使用方法和实例中的是一样的

问：为什么组件中的data 必须是一个函数呢？

​ 为了不让复用的组件之间的数据相互影响，所以使用函数来创建，且返回一个内部对象，这样子每次创建一个复用的组件时，之间的数据是相互独立的。

8.组件切换（常用）

如登陆和注册窗口场景

方法1：使用v-if属性和v-else属性。

	<login v-if="flag"></login>
    <register v-else="flag"></register>
    <script>
    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>

方法2：使用component标签的is属性

定义一个变量名comName，用注册点击事件来更改展示组件的名称

<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<component *:is*="comName"></component>

9.组件传值

1.父组件向子组件传值（传递数据）

默认情况下子组件无法直接访问父组件中的data数据和methods方法

通过属性绑定的形式v-bind自定义属性可以传递给子属性

props属性是唯一一个数组类型的，专门用来存储父组件传递来的数据，且该数据是只读的，无法重新赋值，

实际可修改，但是会报错

<com1 v-bind：parentmsg=“msg”></com1>
<!--子组件定义 -->     
com1: {
	template:  '<h1>子组件</h1>' ,
	props:   ['parentmsg'],//将父组件传递过来的属性在props数组中定义一下才能使用该数据
}

2.传递方法可以让子组件向父组件传值（使用v-on）

实质：$emit()子组件向父组件传参

<com1 v-on：func=“show”></com1>
//调用方法
	com1: {
    	template:  '<h1>子组件</h1>' ,
        methods: {
            myclick(){
                //重点在这个$emit方法
                this.$emit('func',第二个参数开始为父组件传参)//相当于子组件向父组件传参
            }
        }
	}

10.vue获取dom元素和组件

使用ref获取

$this.refs

<h3 id="myh3 ref="myh3">123</h3>
this.$refs.myh3.in

11.vue路由