Vue浅解

Vue

一、初识vue

1、什么是vue

Vue是一个轻量级框架

组件化

数据的双向绑定

​ Vue是一个MVVM框架，数据双向绑定。

指令

​ Vue.js与页面交互，通过指令完成

组件化

​ 对某一个功能进行封装，可重复用的代码

路由

​ vue-router—>官方插件，进行页面跳转

状态管理

vuex进行存储

2、vue实例

vue引入

超链接

3、声明式渲染

1）显示

插值表达式：{{message}}

v-bind:title = “message”     /      :title = "message"

v-if=“seen”

v-for =“item	in	muster”			{{item}}

v-on:click="click"		/	@click="click"

v-model='message' ==>双向绑定

2)添加数据

     添加数据

​     todos.push() ==> 添加到末尾

​	删除末尾元素 ==> todos.pop()

​      todos.unshift()  ==> 添加到开头

​	删除开头元素 ==> todos.shift()

3）数组截取数据

v-for='item in  demoArray.slice（0,5）'

二、模板语法

1、文本

数据绑定最常见的方式就是使用‘’Mustache‘’语法（双大括号）的文本插值：

例：

<span>Message: {{ msg }}span>

指令：v-once

含义：执行一次性的插值

通过使用v-once指令，你也能执行一次性的插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定：

例：

<span v-once>这个将不会改变：{{ msg }}span>

2、原始 HTML

指令：v-HTML

含义：使style得以表达

例：

指令：v-text

含义： v-text结果和插值表达式 是一样的

例：

插值表达式支持JavaScript表达式的使用

        <div>
            number+1运算: {{number + 1}}
        div>
        
        <div>
            三元运算符：{{ ok ? "yes" : "no" }}
        div>
        
        <div>
            
            {{message.split('').reverse().join('')}}
        div>
        
        

3、动态参数

指令： :[]=’’

举例：

测试动态参数

4、条件渲染

1、v-if v-else-if v-else

不可见的元素包裹

key：用于管理可复用元素的

2、v-show

注意：不支持template，也不支持v-else

区别：

1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）；2.  v-show 有更高的初始渲染开销（频繁切换，建议使用 v-show），而 v-if 的首次渲染开销要小的多；3.  v-if 有更高的切换开销，v-show 切换开销小；4.  v-if 有配套的 v-else-if 和 v-else，而 v-show 没有5.  v-if 可以搭配 template 使用，而 v-show 不行6.  v-if 是惰性的，出事条件什么都不做，当第一次为真，才开始条件渲染7.	v-show 不管出事条件是什么，元素一直被渲染，基于css进行切换，display注意： 不推荐v-if和v-for一起使用（v-for优先级高一点）

5、语法糖

v-on

===》@

const app = new Vue({	el: '#app',	data: {		message: 'hello'	},	methods: {		func(message, event) {						}	}})访问原始dom事件

6、事件修饰符

1、stop 阻止冒泡事件

...

2.prevent 阻止默认事件

<@click.prevent>

3.Once 只允许点击一次

4、keyup

5、enter

6、delete

7.计算属性

{{reverse}}computed：{	reverse（）{	  	return	this.message。split('').reverse().join('')	}}

计算和方法的区别：

计算属性是基于他们的响应式依赖进行缓存的，只有相关响应式依赖发生改变时，他们才会重新求值。

方法是多次执行的

//方法methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}//计算属性computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }

8、侦听属性

用来侦听某个属性是不是变化的

const app = new Vue({	el: '#app',	data: {		message: 'hello'	},methods: {  reversedMessage: function () {    return this.message.split('').reverse().join('')  }}//计算属性computed: {    // 计算属性的 getter    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }  //侦听属性  watch： {  	 	message（val，oldval）{  	 	}  	 	list{  	 		Handle(val,oldval){  	 		  	 		},  	 		deep:true  	 	}  }})

9、class

v-bind:class=‘red’

对象语法

:class = “{key:value}”

数组语法

:class=’[key,value]’

数组语法可以用三元表达式

:class=’[‘isRed’?red : green]’

10、style

style优先级高于class

style 的普通使用

hello world

style的对象语法

color是data中的数据

style的数组语法

data() {	return {		color: {color:red},		font: {fontSize:28px}	}}

11、v-for

data: {	array:[		{text:'aaaaa'},		{text:'bbbbb'},	]}//顺序是固定的，名字可变this.array.foreach((item, index, data) ==> {})

v-for：数组、对象、数字

数组

对象

data：{	object： {		title：'标题',		author:'作者'	}}//注意不能保证拿到的值和数据源的顺序是一致的//value

就地更新

当数据循序改变时，只是元素显示的索引正确，但并没有真正的更新到DOM中。

解决方案：绑定key属性，尽量使用字符串或数值类型

数字

循环十次，number从1开始，index从0开始

v-for不能与v-if同时使用

v-for优先级高于v-if

解决办法：

先处理数据再v-for

computed：{}

12、表单输入

文本

data: {	message: ''}相当于两个指令的集合1. :value='message'2. @input='message=$event.target.value'

多行文本

	{{message}} //不起作用

复选框

{{checked}}data: {	checked: false}

多个复选框

//for规定label与哪个表单元素进行绑定{{checked}}data: {	checked: []}

三、生命周期

1、创建阶段

beforCreate() {}

created(){}

beforMount(){}

mounted(){}

2、更新阶段

beforupdate(){}

update(){}

3、销毁阶段

beforDestory(){}

Destory(){}

 		      // 第一个声明周期的钩子函数            beforeCreate() {                console.log(this.show);                this.show()            },            created() {                console.log(this.show);                this.show()            },            //第三个生命周期，模板已经渲染，但还没有挂载到页面上            beforeMount() {                console.log(document.getElementById('hh').innerText);            },            //内存中模板替换到页面中            mounted() {                console.log(document.getElementById('hh').innerText);            },            //mounted执行完毕之后，vue实例已经创建完成。            //beforupdate,页面没有更新，但是数据更新了            beforUpdate() {                console.log(document.getElementById('hh').innerText);                console.log(this.message);            },            //页面和数据都已经更新了            update() {                console.log(document.getElementById('hh').innerText);                console.log( 'message' ,this.message);            },            //销毁阶段                        //第七个生命周期函数，所有的data和methods，指令、、、都处于可用，尚未销毁            beforeDestroy() {            },            //一切都没了            Destroy() {}

四、组件

父子组件传值

父组件向子组件传值：props:{ ‘ list’ : Array}

子组件向父组件传值：

//不带参数

this.$emit(‘delete’)

this.$emit(‘delete’, index)

1、修饰符

.lazy 懒加载

.number 数字

. stop：阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）

. prevent：阻止默认事件的发生

. capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自 然顺序执行触发的事件。

. self：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

. once：设置事件只能触发一次，比如按钮的点击等。

. passive：该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的 方法，可以使用该修饰符进行加强，但是效果并没有感觉到。

2、全局组件：

3、局部组件：

11. async/await

比promise更好的解决了回调地狱。

async function() {  awiat fn()}

12. Symbol

新的基本类型

13. Set集合

存储任何类型的唯一值，即集合中所保存的元素是不重复的。类数组结构。

arr = [1,2,3,1]let arrNew = new Set(arr)arrNew = [1,2,3]

类数组不是数组，要转化为数组Array.form(arrNew)这样arrNew才是数组了

十一、Js的宏任务和微任务

宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：

(macro)task->渲染->(macro)task->...

宏任务包含：

script(整体代码)setTimeoutsetIntervalI/OUI交互事件postMessageMessageChannelsetImmediate(Node.js 环境)

微任务

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

微任务包含：

Promise.thenObject.observeMutationObserverprocess.nextTick(Node.js 环境)

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

执行一个宏任务（栈中没有就从事件队列中获取）执行过程中如果遇到微任务，就将它添加到微任务的任务队列中宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

同步与异步、宏任务和微任务分别是函数两个不同维度的描述。

异步任务：setTimeout和setInterval、ajax、事件绑定等

同步任务：除了异步任务外的所有任务

微任务：process.nextTick和 Promise后的theny语句和catch语句等

宏任务：除了微任务以外的所有任务

执行顺序判断方法

先同步再异步，在此基础上先宏任务再微任务