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实例的生命周期

主要的生命周期函数分类:lifecycle
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: '

登录组件

'
}) Vue.component('register', { template: '

注册组件

'
}) // 创建 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:  '

子组件

'
, methods: { myclick(){ //重点在这个$emit方法 this.$emit('func',第二个参数开始为父组件传参)//相当于子组件向父组件传参 } } }

10.vue获取dom元素和组件

使用ref获取

$this.refs

123

this.$refs.myh3.in

11.vue路由

你可能感兴趣的:(Vue学习笔记)