目录
一、表单输入绑定
二、过滤器
2.1、局部写法：
2.2全局过滤器语法：
三、内置指令汇总
四、自定义指令
4.1、布局定义、函数式：
4.2、第二种写法： 对象式：
4.3、全局自定义指令
4.4、总结：
五、生命周期
5.1、简介
5.2、八个阶段
5.3、生命周期图解
六、vue组件
6.1、传统方式编程
6.2、vue组件编程
6.3、组件使用
6.4、组件总结
七、vueComponent构造函数
一、表单输入绑定
表单一般输入框、下拉、多选、单选、文本框， 都使用 v-model去绑定值；
<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
// 复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
// 单选框
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
// 选择
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
</select>二、过滤器
数据处理的方式， 一般 computed、methods也能实现功能。
{{ 变量 | 过滤器1 | 过滤器2 }}
2.1、局部写法：
可以传参、可串联多个过滤器
{{ time | timeFormater}}
将日期格式化， timeFormater默认为函数， time默认是传入的值；
filters: {
timeFormater(value){
// 通过一系列方法处理value，并return输出
return value;
}
}
//timeFormater 函数也可以传参数
{{ time | timeFormater('YYYY-MM-DD')}}
// str设置默认值
timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
// 通过一系列方法处理value，并return输出
// return value;
return dayjs(value).format(str)
}2.2全局过滤器语法：
Vue.filter('过滤器名', function(value){
// 任意处理代码， 符合需求即可
return value.sploce(0,4);
})三、内置指令汇总
v-text 给标签插入文本 类似于{{}}插值语法
{{}} 插值语法
v-bind 单向绑定解析表达式，简写成 :xxx
v-model 双向数据绑定，表单中多使用；
v-for 遍历数组、对象、字符串
v-on 绑定事件，简写为 @
v-if 条件渲染，动态控制节点是否存在
v-else 条件渲染，动态控制节点是否存在
v-show 条件渲染，动态控制节点是否展示
v-html 插入文本，支持html语法解析
v-cloak 等vue内容渲染好之后再显示， 避免出现{{}}这种内容；
v-once 加在标签上可以保留原始值不变，初始化一次后不会再改变
v-pre 不解析插值语法这些，写的什么样，显示的就是什么样
<h3 v-pre>初始化的n:{{n}}</h3>
显示： 初始化的n:{{n}}四、自定义指令
4.1、布局定义、函数式：
directives:{
big(element, binding){ //自定义的指令也是方法， 存在两个参数，element：DOM元素本身；
}
}
<span v-big="num"></span>
设置如下：
directives:{
big(element, binding){
element.innerText = binding.value * 10;
}
}指令方法内部去控制html的一些修改：
element.className = 'demo'
element.value = 9
element.onclick = ()=>{}
element.focus()
element.parentElement.style.backgroundColor = 'red'
4.2、第二种写法： 对象式：
v-fbind='num'
directives:{
fbind: {
// 指令与元素成功绑定时
bind(element, binding){
}
// 指令所在元素被插入页面时
inserted(element, binding){
}
// 指令所在模板被重新解析时
update(element, binding){
}
}
}相当于，函数式，执行了对象式的 bind和update方法， 只是缺少了inserted
4.3、全局自定义指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})4.4、总结：
1、可以写局部指令 和 全局指令
2、配置对象中含3个回调
1)、.bind：指令与元素成功绑定时调用
2)、.inserted：指令所在元素被插入页面时调用
3)、.update：指令所在模板结构被重新解析时调用。
3、备注：
1)、指令定义时不加 v-，但是使用时要加 v-
2)、指令名如果是多个单词。要使用 kebab-Case命名方式，不要用camelCase命名。
五、生命周期
5.1、简介
1、又叫：生命周期回调函数，生命周期函数，生命周期钩子
2、什么是声明周期：vue在关键时候帮我们调用的一些特殊名称的函数；
3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求来编写的。
4、生命周期函数中的this指向的是VM 或者 组件实例对象；
5.2、八个阶段
beforeCreate、created、 解析
beforeMount、mounted、 生成真实DOM
beforeUpdate、updated、 数据变化更新DOM
beforeDestroy、destroyed 组件、DOM注销，销毁
5.3、生命周期图解
六、vue组件
vue组件化编程
6.1、传统方式编程
1)、依赖关系混乱
2)、不好维护代码复用率不高
6.2、vue组件编程
可以根据页面结构，把页面拆成几个模块， 每个模块包含一个部分；
2.1、模块：
理解：向外提供特定功能的js程序，一般就是一个js文件
为什么：js文件很多很复杂
作用：复用js、简化js的编写，提高js运作效率
2.2、组件
用来实现局部、特定 功能效果的代码集合（html、css、js、image）,多用与有复杂、重复功能的页面；
可以复用编码、简化项目编码、提高运行效率
6.3、组件使用
6.3.1、定义组件：
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})注意：组件的data必须是个函数。return要使用的数据
6.3.2、全局注册组件：
new Vue({ el: '#components-demo' })
// 方法二：
Vue.components('使用名', 定义的组件名)6.3.3、局部注册组件：
components: {
使用名1: 创建的组件1,
使用名2: 创建的组件2 ......
}
6.3.4、使用组件
<使用名1></使用名1>
6.4、组件总结
6.4.1、使用组件的三大步骤：
定义组件（创建组件）、注册组件、使用组件（写组件标签）
6.4.2、如何定义一个组件？
使用Vue.extend(options)创建，其中options 和 new Vue(options) 时传入的options几乎一样，但也存在如下区别：
1、el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务用哪个容器；
2、data必须写成函数：避免组件被复用时，数据存在引用关系；
3、使用template可以配置组件结构
const hello = Vue.extend({
name: 'heoolComponent',
template: `
<div><h2>你好：{{name}}</h2></div>
`,
data(){
return {
name: 'TOM'
}
},
methods: {},
mounted: {},
computed: {}
})6.4.3、如何注册组件？
1)、局部注册：靠new vue的时候传入components选项
2)、全局注册：靠Vue.component('使用组件名', 组件)；
6.4.4、编写组件标签
<组件名></组件名>
七、vueComponent构造函数
1、school组件本质是一个名为 vueComponent的构造函数，且是vue.extend生成的
2、我们使用<school></school>或<school/>时，vue解析会帮我们创建school组件的实例对象；也就是执行 new VueComponent(options)。
3、注意：每次调用vue.extend返回的都是一个新的vueConponent
4、this指向：
1)、组件配置： data、methods、watch、computed的this都是vueConponent实例对象
2)、new Vue()配置中：data、methods、watch、computed的this都是vue 实例对象
5、vueComponent 的实力对象，以后建成vc（也可称：组件实例对象）
vue的实例对象，简称vm
