Vue知识点整理

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

Vue 实例使用的根 DOM 元素。

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

获取定义在data外的数据和方法。

当前实例的直接子组件。

获取被插槽分发的内容。

获取具名插槽。

获取注册过refs的所有DOM元素和组件实例。

Vue是否运行于服务端。

主动销毁该实例。

挂载DOM。

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

使回调函数在 DOM 更新完成后被调用。

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM *** 作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 VuenextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

实例被创建之前执行。在生命周期过程中只执行一次。

实例创建完成之后执行。在生命周期过程中只执行一次。

挂载组件之前（如果有挂载组件的 *** 作）。在生命周期过程中只执行一次。

组件挂载之后。在生命周期过程中只执行一次。

组件更新前。

组件更新完成。

组件销毁前。

组件被销毁。

computed是计算属性（通过其他变量计算得来的另一个属性），在相关响应式依赖发生变化时它们才会重新求值。

watch是侦听器，来响应数据的变化，当需要在数据变化时执行异步或开销较大的 *** 作时，这个方式最有用。

computed和watch都不要去改变自己监听的属性，而是要去生成一个新的值，否则会触发无限循环。

v-if=false生效时会使节点不存在在DOM流中，会动态增删节点，比较耗能；

v-show只是在节点上加上display:none。

v-if可配合v-else-if、v-else使用。

v-for的优先级高于v-if，所以在两者同时使用时，v-if会作用于每一个v-for循环上。

继承的组件的prop需要通过propsData传入，data可以直接改变。

需求：有一些内容，是在调用组件时根据场景去写的。

父组件使用子组件时：

<slot></slot>的内容将被123代替。

父组件使用子组件时：

注意：一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

需求：插槽内容能够访问子组件中才有的数据。

子组件：

父组件中使用：

和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法

PS: 生命周期钩子 = 生命周期函数 = 生命周期事件

    Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

    也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM

    那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

    在Vue中如果想要拿到DOM元素我们可以通过ref来获取

    在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落</>

    在使用的地方通过this$refsxxx获取, 例如this$refmyppp

    ref添加到元素DOM上, 拿到的就是元素DOM

    ref添加到组件上, 拿到的就是组件

在组件上定义ref="名字",可以通过this$refs名字，，，获取dom元素。。例如下面：

<div id="out">

    <h2>组件 *** 作</h2>

    <hr/>

    <p ref="tit">组件 *** 作组件 *** 作v组件 *** 作组件 *** 作组件 *** 作</p>

    <button @click="tap">点击</button>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

        el:'#out',

        data:{

        },

methods:{

        tap(){

             consolelog(this$refstitinnerHTML)//获取dom元素把dom元素的内容拿了出来

        }

    }

})

v-model,,,在输入框，单选框，多选框等等，添加v-model=“tit”的时候v-model的值必须在data里面声明；

v-model的值是他们的value值

1创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ，以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="/node_modules\vue\dist\vuejs"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vmmsg取到对应的内容 ,也可以赋值      }})</script>

2声明式渲染

Vuejs 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

21 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值：

<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式

可以将js中的new Vue复制给一个全局变量vm此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vmmessage值，同时页面也会发生改变

在控制台中输入

vmmessge="你好,Vue"

22使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vuejs 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok 'YES' : 'NO' }}{{ messagesplit('')reverse()join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><!-- 数字 *** 作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ messagesplit('')reverse()join('')  }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1png

但是有个限制就是，每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式

23 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm$datamsg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

24 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model,  页面显示的结果就是view

再来看一下mvvm的图

mvvmjpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3实例上的方法

除了数据属性，Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$，以便与用户定义的属性区分开来。例如：

vardata={a:1}varvm=newVue({el:'#example',data:data})vm$data===data// => truevm$el===documentgetElementById('example')// => true

31 实例上常用的属性和方法

vm$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm$data// vm 上的数据vm$watch// 监听vm$el// 当前el元素vm$set// 后加的属性实现响应式vm$options// vm 配置 上的 所有属性vm$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的

4实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域

看下如下的示例:

##  <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>//  Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})//  Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){onetitle="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了

能否在two实例中修改one实例中的数据呢,

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写

5 Vue *** 作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行 *** 作,那么该如何处理呢,

*** 作DOM元素:

在需要 *** 作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取 *** 作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组consolelog(this$refswuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref

所以$refs属性获取的是所有具有ref属性的DOM元素的集

因此要想 *** 作确定的DOM元素就需要在通过当初的ref值获取

简而言之: 就是ref在dom元素上通过this$refs自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行 *** 作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

### 表单校验

rules属性绑定

data中定义规则

表单item上prop属性绑定

注意点：  prop的值和规则的值以及表单的值需要保持一致

### 在vue中如何获取dom元素

    - 定义属性

    <div ref='qqq' @click="btn">111111</div>

    - 获取：this$refsqqq

### 如何携带token

登录成功的时候将获取的token做本地缓存

需要做请求拦截====其他所有请求需要携带请求头  Authorization

    - api/indexjs

        - 做请求拦截    获取本地缓存

        - 将本都缓存的值添加到请求头上面去

###  左侧菜单数据展示

    - 封装函数  ===获取左侧菜单数据请求的函数    api/indexjs

    - homevue

        + 导入封装请求函数

        + 调用这个函数获取数据，并且将数据 赋值给data中的menuList

        + 将数据循环出来 ====进行2层循环

    步骤分析：

    - 静态组件布局编写===从官网复制过来

    - 动态渲染左侧菜单导航===将获取的请求数据使用循环

    - 配置属性默认值展开一个  ====查看官网配置属性

    - 配置路由实现显示对应的组件

###  做菜菜单导航图标的显示

+ 引入iconfontcss文件      mainjs中引入

+ 一级图标

    - 准备一个对象或者数组

          iconObj: {

            0: 'icon-user',

            1: 'icon-tijikongjian',

            2: 'icon-shangpin',

            3: 'icon-danju',

            4: 'icon-baobiao'

        },

    - 图标标签属性绑定  class  然后根据索引找到对象中的哪一个类名进行显示

+ 二级图标====直接在二级循环标题前面提加图标标签====写死

#### 左侧菜单步骤分析：

    - 1-显示组件菜单=====从官网复制

    - 2-只展开一个  通过控制  index

    - 3-配置路由 ===点击谁右边就显示哪一个组件 

        + 配置项上面添加一个router属性  :router="true"

        + 配置唯一值index的值为path值=====:index="item2path

    - 4-改变默认高亮颜色  active-text-color="#00ff00"

    - 5-点击当前只展开其他收起  :unique-opened="true"

    - 6-刷新保持最后一次的高亮 

        + 设置默认展开项  :default-active="defaultActive"

        + 点击

            + 给当前每一项的二级菜单  绑定点击事件 并且获取当前的path值

            + 将这个值赋值给 defaultActive 并且做本地缓存刷新的时候还可以获取上一次的path值

            + 刷新后获取这个值  defaultActive=从本都缓存中拿 ||  'users'

    - 7-解决二级菜单的每一项的右边框    el-menu {border:none;}

    - 8-点击收起菜单功能

        + 布局一个按钮  点击按钮

        + 点击设置 collapse=true  or  false 

        + 改变左侧侧边栏宽度样式的设置    <el-aside :width="collapse'64px':'200px'">

        + 关闭收起和展开的动画  :collapse-transition="false"

  ###  路由拦截

  路由拦截和请求拦截的区别

  请求拦截=====只要请求就拦截

  路由拦截====只要路由值发生改变就拦截

  ###  如何设置路由拦截

    + 在router文件中设置路由前置拦截  routerbeforeEach((to,form,next)=>{})

    + 判断是不是lofgin路由值  是 就直接放行，

    + 判断是不是有token  有token就放行 没有就去login

    + 最后解决掉了问题会出现兼容性  解决方法如下

    const originalPush = VueRouterprototypepush;

    VueRouterprototypepush = function push(location) {

    return originalPushcall(this, location)catch(err => err);

    };

以上就是关于Vue知识点整理全部的内容，包括:Vue知识点整理、vue核心基础-vue生命周期方法和特殊特性ref、vue组件 *** 作 ---ref --v-model 2018-11-05等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！