Vue 代码 总结

------------------- Vue 基础代码 -------------------

1. el: （元素的挂载位置（值可以是CSS选择器或者DOM元素））
2. data: （模型数据（值是一个对象））

------------------- Vue 指令 -------------------

1. v-cloak （解决‘闪动’的问题）
2. v-text （填充纯文本）
3. v-html （填充HTML片段）
   ① 存在安全问题
   ② 本网站内部数据可以使用，来自第三方的数据不可以用
4. v-pre （填充原始信息）（ <h1>h1> 会直接显示，而不是代码的形式 ）
   ① 显示原始信息，跳过编译过程（分析编译过程）
5. v-once （只编译一次）（数据响应式）
   如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能
6. v-model （双向数据绑定指令）（ 1、从页面到数据 2、从数据到页面）
7. v-on:click 简写 @click （事件绑定）
8. v-on:click=‘handle’ （后面写函数名 ，就是绑定函数）
   v-on:click=‘handle()’ （函数名后面可以加括号，里面可以 传参 ）
   $event （括号里的 时间对象名称）
9. .stop 阻止冒泡 （ v-on:click.stop=“handle1” ）
10. .prevent 阻止默认行为
11. .enter 回车键 （ v-on:keyup.enter=“handle1”）
12. .esc 退出键
13. Vue.config.keyCodes.aaa = 65（自定义按键修饰符）

------------------- 属性绑定 -------------------

1. v-bind指令用法 （ v-bind:href=’ ’ 简写 : href=’ '）
2. 控制 isActive 的值在 true 和 false 之间进行切换 (从而达到显示隐藏的效果)
3. v-bind:style
4. v-bind:class
5. v-bind:href
6. v-bind:自定义名称（组件中使用）
   在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型

------------------- 分支循环结构 -------------------

1. v-if （条件判断， 条件正确才显示）
2. v-else
3. v-else-if
4. v-show （控制元素样式是否显示 display:none）
5. v-for 遍历数组 （v-for=’(item,index) in list’ { {item}} — { {index}} ） ）
   item 代表元素 index 代表索引号
6. :key 的作用：帮助Vue区分不同的元素，从而提高性能（:key=‘item.id’）
7. v-for=’(value, key, index) in object’ 遍历对象 （可以简写成 v，k，i）
8. v-if=‘value==12’ v-for=’(v, k, i) in object’ （v-if 和 v-for 结合使用）

------------------- 表单操作 -------------------

1. Input 单行文本 （就是 v-model ）
2. textarea 多行文本 （就是 v-model ）
3. select 下拉多选 （v-model = value的值，表示默认显示 value=3的）
   （occupation 有多个，也就是数组形式，表示默认显示 value= 2和3 的）
4. radio 单选框 （v-model = value的值， 谁 就默认显示）
5. checkbox 多选框 （v-model = value的值（多选的值都是数组的形式） ， 谁就默认显示，）

表单域修饰符

1. number：把字符串转化为数值
2. trim：去掉开始和结尾的空格
3. lazy : 将input事件(只要发送改变就触发) 切换为change事件(失去焦点时触发)

---------------- 自定义指令（directive） -----------------

（局部指令 直接写在 实例里面）

	Vue.directive('focus' {
     
		inserted: function(el) {
     
		// 获取元素的焦点
		el.focus();
	}
	})
	 自定义指令用法:
	<input type="text" v-focus>
	带参数的
		Vue.directive(‘color', {
     
		bind: function(el, binding) {
     
		   // 根据指令的参数设置背景色
          // console.log(binding.value.color)  // orange
          // 这个 color 是 msg 里面的 属性名
			el.style.backgroundColor = binding.value.color;
		}
	})
	<input type="text" v-color='{color:"orange"}'>

-------------- 计算属性（computed） ---------------

 computed: {
     
        reverseString: function(){
     
          return this.msg.split('').reverse().join('');
        }
      }

-------------------- 过滤器（filter） -------------------

（局部过滤器 直接写在 实例里面）

	Vue.filter(‘过滤器名称’, function(value){
     
		// 过滤器业务逻辑
	})
	使用：
	<div>{
     {
     msg | 过滤器名称 }}</div> 
	<div>{
     {
     msg | upper | lower}}</div>  // 使用多个过滤器
	<div v-bind:id=“id | formatId"></div> 

	带参数的过滤器 
	Vue.filter(‘format’, function(value, arg1){
     
		// value就是过滤器传递过来的参数
	})
	使用方法：  （括号里面 就是参数）
	<div>{
     {
     date | format(‘yyyy-MM-dd')}}</div>

-------------------- 生命周期 -------------------

主要阶段

1. 挂载（初始化相关属性）

1. beforeCreate （在实例初始化之后，数据观测和事件配置之前被调用）
2. created （在实例创建完成后被立即调用）
3. beforeMount （在挂载开始之前被调用）
4. mounted （el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子）
   （前期主要记住这个， 调用 ajax 数据的 时候使用）

2. 更新（元素或组件的变更操作）

1. beforeUpdate （数据更新时调用，发生在虚拟DOM打补丁之前）
2. updated （由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子）

3. 销毁（销毁相关属性）

1. beforeDestroy （ 实例销毁之前调用）
2. destroyed （实例销毁后调用）

-------------------- 数组相关API -------------------

1. 变异方法(会影响数组的原始数据的变化)

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

2. 替换数组(不会影响原始的数组数据，而是形成一个新的数组)

1. filter()
2. concat()
3. slice()

3. 修改响应式数据 （ 动态处理响应式数据）

1. Vue.set(vm.items, indexOfItem, newValue)
2. vm.$set(vm.items, indexOfItem, newValue)
   参数一 表示要处理的数组名称
   参数二 表示要处理的数组的索引
   参数三 表示要处理的数组的值

------------------ 组件化开发思想 -------------------

1. 全局组件注册语法

	Vue.component(组件名称（需要在 html 中 转换短横线形式）, {
     
		data: 组件数据,
		template: 组件模板内容
	})
	// 注册一个名为 button-counter 的新组件
	Vue.component('button-counter', {
     
		data: function () {
     
			return {
     
				count: 0
			}
		},
		template: '点击了{
     { count }}次.'
	})
	调用：
	<div id="app">
		<button-counter></button-counter>     组件名
	</div>

------------------ 组件间数据交互 -------------------

1. 父组件向子组件传值

1. props （ 组件内部通过props接收传递过来的值）
   跟组件名 差不多 都需要在 html 中 转换短横线形式
2. v-bind:title=“来自父组件的数据”（ 父组件通过属性将值传递给子组件*）

2. 子组件向父组件传值（分为 携带 参数和 不携带 ）

1. 子组件通过自定义事件向父组件传递信息
   （v-on:click='符号emit(“enlarge-text”)）
   （$emit(“enlarge-text”, 0.1)）
2. 父组件监听子组件的事件
   （v-on:enlarge-text=‘handle’）
   （ v-on:enlarge-text=‘handle($event)’）

3. 非父子组件间传值

1. 单独的事件中心管理组件间的通信

	var eventHub = new Vue() // 名字任意

2. 监听事件与销毁事件（监听事件 写在 mounted:function(){} 里面）

	eventHub.$on('add-todo', (val)=>{
     } ) 
	eventHub.$off('add-todo')

3. 触发事件

	eventHub.$emit(‘add-todo', val)

------------------ 组件插槽的作用 -------------------

作用：父组件向子组件传递内容

1. <slot>默认内容slot>
   如果父组件没有内容， 则显示slot里面的内容，如果父组件有内容，则slot的内容则会被覆盖消失
2. slot 的 name 属性 （ 插槽自定义设置）

 1.
   <p slot='header'>标题信息</p>   绑定父子组件
 2.
   <slot name='header'></slot>

3. 作用域插槽 （应用场景：父组件对子组件的内容进行加工处理）

 1. 给 slot 设置 v-bind:info(任意名字) = ''
 2. 给 templat 设置 slot-scope='slotProps'
 3. 里面的 属性设置  slotProps.info.id==3