Vue基础篇

内容简介：

1）Vue指令

2）computed和watch

3）生命周期钩子

4）组件间的传参

5）插槽

6）修饰符

7）nextTick()

前端三大框架：

Vue：尤雨溪开发

React：Facebook主导开发

Angular：谷歌主导开发

为什么选择Vue

1国内Vue的市场份额占比多

2简单易上手，非常适合前端开发初学者学习

前置知识：

1HTML、CSS和JS基础

2了解Node和npm

3webpack（可选，vue-cli已经封装了打包功能）

使用Vue的两种方式：

1直接script标签引入vuejs文件

2基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）

前端框架与库的区别

• jquery 库 -> DOM( *** 作DOM) + 动画+ ajax请求

• 框架 -> 全方位功能

一、指令

指令（Directives）是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。

v-model也可用在自定义组件上。

5v-for（列表渲染）

使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1 利用索引直接设置数组的某一项 2 对象属性的添加或删除

二、computed和watch

三、生命周期钩子

什么是Vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。

1）beforeCreate

此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。

2）created

此时可以读取data的值，并可以对其进行 *** 作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行>

一般使用 v-for 遍历数组然后给每个子元素绑定 onClick 方法然后传入下标：

但如果列表很长需要渲染的元素很多，在每一个子元素上都绑定 onClick 方法会消耗性能。

可以使用事件代理，只在父元素上绑定 onClick 方法，在子元素上绑定自定义属性 data-index ，赋值下标，当点击子元素时，父元素的点击事件捕获子元素的点击事件，然后在点击事件的回调函数中使用 etargetgetAttribute('data-index') ，来获取绑定在自定义属性 data-index 上的下标：

注意：本篇没有干货

ref有以下用法用法：

1、ref 加在普通的元素上，用thisrefname 获取到的是dom元素

2、ref 加在子组件上，用thisrefname 获取到的是组件实例，可以使用组件的所有方法。

3、利用 v-for 和 ref 获取一组数组或者dom 节点

效果图：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this$nextTick(()=>{}) 中调用。

vue 问题笔记 ref获取不到指定的DOM节点问题解决

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

现在没用过vue框架，都不好意思说自己是干前端呢，当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度，现在连小程序都推出了mpvue，你确定你还不赶紧了解了解vue吗，我这篇文章的内容都是些很基础的vue知识，后续会补上

解析 ： 

-  beforecreate ：可以在这加个loading事件 

- created  ：在这结束loading，还做一些初始化，实现函数自执行 

- mounted  ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 

- beforeDestory : 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

其中key为对象里面的键，value为对象里面的值，其本意就是动态改变原来已经固定的值值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)

解析  

遍历后{{parentname}}的已经固定了，这时候点击编辑按钮，改变里面的值，虽然后台数据已经发生了改变，但那时页面渲染的效果并不会发生改变，这时候要想改变页面上的值，就需要使用vueset(‘想要改变的对象’，’要渲染的键‘，’要渲染的值‘)， 

在空的数组中不能使用push传入数据，所以应当使用vm$set给数组添加

    使用v-bind动态给元素绑定

这样可以在遍历的时候给不同的元素动态绑定不同id

在下次dom更新循结束之后延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom

在vue中获取当前点击的元素对象，在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值，具体如 下

这个指令保持在元素上直到关联实例结束编译 /，可隐藏为编译的标签直到实例准备完毕

computer也是一个对象，类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存，写法如下：

前一兄弟元素必须有v-if 或v-else-if

前一兄弟必须有v-if或v-else-if

vue包含一组观察数组的变异方法，所以它们也会出发视图更新

由于javascript的限制，Vue不能检测一下变动的数组

对于已经创建实例，vue不能动态添加根级别的响应式属性，但是可以使用Vueset( object, key, value )方法嵌套对象添加响应式属性

props可以是数组或对象，用于接收来父组件的数据，或者使用对象作为替代

1axiospost('url', {data} )

axios发送跨域请求

  var headers ={

'headers':{

'Content-Type':' application/x-$>

以上就是关于Vue基础篇全部的内容，包括:Vue基础篇、vue中ref（$refs）用法和作用、vue事件代理等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！