Vue 4.28

Vue

1.内置指令

• v-bind : 单向绑定解析表达式, 可简写为 :xxx
• v-model : 双向数据绑定
• v-for : 遍历数组/对象/字符串
• v-on : 绑定事件监听, 可简写为@
• v-if : 条件渲染（动态控制节点是否存存在）
• v-else : 条件渲染（动态控制节点是否存存在）
• v-show : 条件渲染 (动态控制节点是否展示)
• v-text：
  作用：向其所在的节点中渲染文本内容。
  与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
• v-html:
  cookie简介：
  作用：向指定节点中渲染包含html结构的内容。
  与插值语法的区别：
  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
  (2).v-html可以识别html结构。
  注意：v-html有安全性问题！！！！
  (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
  (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
• v-cloak:没有值
  1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。（display：none）
• v-once：没有值
  1.v-once所在节点在初次动态渲染后，就视为静态内容了。
  2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
• v-pre:
  1.跳过其所在节点的编译过程。
  2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

2.自定义指令

2.1定义语法

• 局部指令：
  new Vue({ directives:{指令名:配置对象} })
  new Vue({ directives{指令名:回调函数} })
• 全局指令：
  Vue.directive(指令名,配置对象) 或
  Vue.directive(指令名,回调函数)

2.2配置对象中常用的3个回调

• bind：指令与元素成功绑定时调用。
• inserted：指令所在元素被插入页面时调用。
• update：指令所在模板结构被重新解析时调用。

2.3注意：

• 指令定义时不加v-，但使用时要加v-；
• 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

3.生命周期（生命周期回调函数、生命周期函数、生命周期钩子）

• 定义：Vue在关键时刻帮我们调用的一些特殊名称的函数
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
• 生命周期函数中的this指向是vm 或 组件实例对象
• 常用的生命周期钩子：
  1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
  2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
• 关于销毁Vue实例：
  1.销毁后借助Vue开发者工具看不到任何信息。
  2.销毁后自定义事件会失效，但原生DOM事件依然有效。
  3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
• 生命周期图示

4.组件

4.1定义

实现应用中局部功能代码和资源的集合

4.2使用组件三个步骤

• 定义组件(创建组件)：

  使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
  ①el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  ②.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
注意：使用template可以配置组件结构

• 注册组件
  1.局部注册：靠new Vue的时候传入components选项
  2.全局注册：靠Vue.component(‘组件名’,组件)
• 使用组件(写组件标签)
  编写组件标签：< school>< /school>

4.3注意

• 组件名

一个单词组成：
  第一种写法(首字母小写)：school
  第二种写法(首字母大写)：School
多个单词组成：
  第一种写法(kebab-case命名)：my-school
  第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
注意：
  (1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
  (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

• 组件标签:
  第一种写法：< school>< /school>
  第二种写法：< school/>
  备注：不用使用脚手架时，< school/>会导致后续组件不能渲染。
• 简写方式
  const school = Vue.extend(options) 可简写为：const school = options

4.4组件嵌套

4.5VueComponent

• school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
• 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
• 注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
• 关于this指向：
    1.组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    2.new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
• VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
  Vue的实例对象，以后简称vm。

4.6内置关系

	VueComponent.prototype.__proto__ === Vue.prototype

意义：让组件实例对象(vc)可以访问到Vue原型上的属性和方法

实例的隐形原型对象__proto__永远指向自己缔造者的原型对象prototype

4.7单文件组件

创建Vue文件，包含< template>，< style>,< scrpt>