Vue学习笔记03 指令-生命周期-组件

Vue学习笔记03

指令

内置指令

指令	描述	说明
v-bind:xxx	单向绑定数据	简写 :xxx 绑定是引号里的js表达式的执行的结果，v-bind:age=“18” 绑定的是数字18
v-model:value=“”	双向数据绑定	简写v-model=“”
v-for	遍历数组/对象/字符串	绑定key
v-on:事件	绑定事件监听	简写@
v-if=“”	条件渲染	动态控制节点是否存在
v-show=“”	条件渲染	动态控制节点是否展示
v-text=“”	向节点中渲染文本内容，直接覆盖	不解析html标签
v-html=“”	向节点中渲染文本内容，直接覆盖	可以解析html标签,会有安全问题
v-clock	Vue实例创建完毕并接管容器后,会删掉v-clock	没有值，配合css可以解决网速慢时页面展示{{xxx}}的问题
v-once	初次动态渲染后，视为静态内容
v-pre	跳过其所在节点的编译过程，写什么就是什么	可以利用其跳过没有使用指令语法、没有使用插值语法的节点，会加快编译。页面优化

<div>你好,{{name}}</div>  /*你好，ranan*/
<div v-text="name">你好,<div>  /*ranan*/

v-cloak

v-cloak：本质是一个特殊属性，Vue实例创建完毕并接管容器之后删除
解决问题:当网速过慢的时候，防止未经解析的属性出现在页面
解决的办法：配合css可以解决网速慢时页面展示{{xxx}}的问题

[v-cloak]{
	display:none;
}
	
<div id="root">
	<h2 v-cloak>{{name}}</h2>
</div>
 <script src></script> //假设这个地方引入js卡了5秒
 <script>
new Vue({
			el:'#root',
			data:{
				name:'ranan'
			}
		})
 </script>

自定义指定

自定义指令直接操作DOM元素

定义直接定义指令名，使用时v-指令名
调用的时机
1.指令与元素成功绑定时
2.指令所在的模板被重新解析时 (新数据生成虚拟新的虚拟DOM)

需求1:big指令将绑定的值变大10倍(写法1)
需求2:定义v-fbind指令，和v-bind功能类似，让其绑定的input默认获取焦点

new Vue({
	//局部指令
	directives:{
		//第一个参数是真实DOM，第二个参数是对象，里面的value值是自定义标签绑定的变量
		//bind和update时调用
		big(element,binding){
			element.innerText = binding.value*10;
		},
		fbind(element,binding){
			element.value= binding.value;
			element.focus();//失败了
		}
	}
})
Vue.directive(指令名,function) //写法1
Vue.directive(指令名,配置对象)

原因:input标签与v-fbind绑定成功之后在内存中，并没有渲染到页面。(先绑定再渲染)点击按钮时，处于指定调用的第二个时机，此时已经有真实DOM了，所以能获取到焦点
Vue3解决了这个问题

解决办法 采用写法2

//局部指令 函数名固定
fbind:{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
}

注意点
1.HTML里采用 v-big-number，key是字符串js里使用'big-number',不能使用简写big-number
2.自定义的指令this指向window，因为需要直接操作DOM

生命周期

是什么
Vue在关键时刻帮我们调用的一些特殊名称的函数

生命周期函数中的this指向vm或组件实例对象

常用钩子
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
很少自杀

Vue组件化编程

组件:实现应用中局部功能的代码和资源的集合
好处:复用编码，简化项目编码，提高运行效率

模块化:当应用中的js都以模块来编写，那么这个应用就是一个模块化的应用
组件化:当应用中的功能用多组件的方式编写，那么这个应用就是一个组件化的应用

多组件文件:一个文件中包含了n个组件
单组件文件:一个文件只包含1个组件

多组件文件

1.创建组件，组件中的data采用函数返回的形式
2.注册组件在根组件
3.使用

//3.通过组件标签使用
<组件名></组件名>
//1.组件的创建
const school = Vue.extend(options);
//简写 const school = options;
new Vue({
	el:'#root';
	//2.局部注册组件
	compomemts:{
		组件名:school
	}
})

//2.全局组件注册
Vue.conponent('组件名',组件值)

组件名写法

多单词:XxYyy
在组件定义的配置中可以使用name指定组件在开发者工具中呈现的名字。

VueComponent ★

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，new VueComponent(options)
3.每次调用Vue.extend，返回的都是一个全新的VueComponent
4.关于this指向：

• 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
• new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
  5.VueComponent的实例对象，以后简称vc组件实例对象
  Vue的实例对象，以后简称vm。

VueComponent.prototype.__proto__ === Vue.prototype
组件对象的实例可以访问Vue原型的属性和方法

单文件组件

单文件命名:xxx,vue --处理加工–> 浏览器能识别的js
加工工具脚手架:vue-cli

命名习惯Xxxx或者XxxYyy

<template><!--template不参与编译，所以最后的DOM里没有template标签-->
<!--组件的HTML结构-->
</template>
<script>
export default Vue.extend(options)//Vue.extend可以省略
export default {//省略写法
	name:'School',
	data(){
	}，
	components:{}
}; //默认暴露，引用 import xxx from path
//组件交换相关的代码，数据、方法等js
</script>
<style>
/*组件的样式*/
</style>

这些都是单个组件的写法，所有的组件都要受vm的管理，我们通常创建main.js入口文件，在里面创建Vue实例。新建一个HTML文件作为容器引入main.js

import App from './App.js'
//main.js
new Vue({
	el:'#root',
	components:{App},
	tempalete:`<App></App>`
})

组件化编写流程

1. 实现静态组件:抽取组件，使用组件实现静态案例
2. 展示动态组件-考虑数据的存放位置，一个组件再用放在组件自身，一些组件在用，放在他们共同的父组件上(状态提升)
   2.1 数据的类型，名称是什么
   2.2 数据保存在哪个组件
   3.交互-从绑定事件监听开始