Vue

渐进式JavaScript框架

渐进式：想用什么就用什么

库：封装的属性和库（例JQuery）

框架：拥有自己的语法规则和元素

单文件SFC

全局css样式引入到main.js，js库引入到单个vue文件上

因为单文件vue作用域相互独立

js库设置全局的方法

//main.js
import axios from 'axios'
Vue.prototype.$axios = axios
//$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。

scoped

让样式只在组件内生效

组件内标签都被添加一个data-v-hash值

style里所有的选择器都加上属性选择器

指令

v-bind 绑定属性:

v-on 绑定事件@

v-on事件修饰符

<a @click.prevent.stop= "toBaidu" href="baidu.com"></a>
//.stop 阻止事件冒泡 ；.prevent 阻止默认行为

v-model 双向绑定

<btn :value="count" @input="val => count = val"></btn>
//本质就是一个语法糖，给value属性赋值，绑定input事件，并把值传给变量

.native

自定义的组件无法像html标签一样触发原生事件，需要使用native

父组件监听子组件的一个原生事件

.sync

实现父子组件数据之间的双向绑定，与v-model类似。
类别在于：一个组件上只能有一个v-model，.sync修饰符可以有多个。

// 正常父传子： 
<com1 :a="num" :b="num2"></com1>

// 加上sync之后父传子： 
<com1 :a.sync="num" .b.sync="num2"></com1> 

// 它等价于
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

绑定复选框分两种情况，由变量的类型决定

1.数组：将复选框的value值放在数组中

2.非数组：最终都会转为boolean (checked属性)

v-for

侦听数组

就地复用 (就是按index比较)

虚拟dom是什么？

本质就是一个JS对象，保存DOM关键信息

虚拟dom的好处是什么？

提高DOM更新的性能，不频繁操作真实DOM，只更新变化的部分

动态class

:class = “{类名:布尔值}”

动态style

:style = “{css属性名:值}”

计算属性

1.带缓存

2.函数内使用的变量发送改变，会重新计算结果返回

computed: {
    "计算属性名"(){ //一个函数就是一个计算属性
        return "值"
    }
}
//计算属性也是vue数据变量，不要和data里的重名

<div>
    总价格：{{计算属性名}}
</div>

完整写法

computed: {
    "计算属性名":{
        set(val) {},
        get() {
            return value
        }
    }
}

侦听器

watch:{
	"要侦听的属性名"(newVal,oldVal){
        
    }
}

完整写法（侦听对象）

watch:{
	"要侦听的属性名":{
        deep: true,
    	hander(newVal,oldVal){
        
    		}
     }
}//无法获取oldVal，这是vue2官方bug，但不影响开发

组件通信

组件就是可复用的Vue实例，封装了标签、样式和JS代码

父传子(props)

单向数据流：

如果父组件给子组件传递的数据是引用数据类型，那修改其内部属性不会触发单项数据流的限制

所谓的单项数据流只会看传过来的变量是否修改，引用类型地址值如果没变就不算修改

父组件传值，子组件用props接收

//子组件
export default {
    props: ['title']
}

//父组件
<子组件 title='开业'></子组件>

props完整写法

props: {
    title: {
        type: String,
        required: true, //必须项
        default: '购物车'
    }
    
}

子传父

子组件使用$emit

<div @click='sub'></div>

methods:{
    sub(){
        this.$emit('自定义事件',val)
    }
}

父组件绑定自定义事件和事件处理函数

<son @自定义事件="fn"></son>

methods:{
	fn(val){}
}

生命周期函数

钩子函数：四个阶段八个方法，(一共十一个钩子

vue2的生命周期

插槽

当组件内某一部分标签不确定时使用

子组件使用slot标签，父组件在子组件标签内写内容代替slot

默认内容

如果没传内容显示默认内容

具名插槽

一个组件内有2处以上slot时

//son.vue
<slot name="title"></slot>
<slot name="content"></slot>

//app.vue
<son>
    <template v-slot:title></template>
    <template #content></template> //#是缩写
</son>

作用域插槽

父组件使用子组件的变量

//son.vue
<slot :row="obj">
	<p>{{ obj.one }}</p>
</slot>

//app.vue
<son>
    <template v-slot="scope">
    	{{ scope.row.two }}
    </template>
</son>

自定义指令

全局注册

Vue.directive("指令名", {
	"inserted" (el){
	//当前指令所绑定的元素	
	}
})

组件进阶

$refs 可以获取原生DOM元素和组件实例对象

<template>
	<h1 ref="myH1"></h1>
</template>

<script>
	mounted(){
        console.log(this.$refs.myH1)
    }
</script>

$nextTick 修改完数据后，立即获取更新后的DOM

//Vue中在数据更新后，DOM更新是异步操作
methods:{
	change(){
        this.msg= '丑p'
        console.log('msg的标签')// 打印的是以前的内容
        
        this.$nextTick(() => {
         console.log('msg的标签')// 丑p   
        })
    }
}

WGenji-Blog

Vue基础

Vue