我的总结的Vue使用的注意事项

本人忘了的时候复习用的笔记，因此写的比较乱。

---

1. css只在当前组件起做用

• 在style标签中写入scoped便可 例如：

---

2. v-if 和 v-show 区别

• v-if按照条件是否渲染，v-show是display的block或none；

---

3. $route和$router的区别

• $route是“路由信息对象”， 当前的页面的路由信息： 包括path，params，hash，query，fullPath，matched，name等路由信息参数。 而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

使用方法：

• 建立模板： var Home = {template："#home"}
• 配置路由: var routes = [{path:"/home", component:Home}]
• 生成路由： var route = new VueRouter({routes});
• 启动路由 new Vue({ router })

---

4. vue.js的两个核心是什么？

• 数据驱动、组件系统

---

5. vue几种经常使用的指令

• v-bind: 行间属性绑定 或者用冒号 :

• v-bind:title  鼠标移上的显示

• v-bind:src  绑定图片路径

• v-bind:html 绑定HTML文本和标签

• v-bind:text 绑定文本 （字符串）

• v-bind:class 绑定类样式（数组）

• v-bind:style  动态绑定样式 （对象）

• v-for: 1.x 和 2.x是不同的

• v-for="i in json"

• v-for="(key, value) in json"

1.x 能够是使用$index, $key, 2.x 被移除
- <ul id="example">
    <li v-for="item in items">
        {{$index}}
        {{$key}}
    </li>
</ul>
复制代码

<ul id="example">
    <li v-for="(item,index) in items">
        {{item}}
        {{index}}
    </li>
</ul>
复制代码

• v-on:click="one();two()"

• @click="one();two()" 分号隔开

• v-if显示隐藏是将dom元素整个添加或删除，

• v-show隐藏则是为该元素添加css--display:none，dom元素还在。

• v-hide 和v-show正好相反

• v-else紧跟在v-if或者v-show后边，不然将不被识别。

---

6. vue经常使用的修饰符？

.prevent: 提交事件再也不重载页面； .stop: 阻止单击事件冒泡； .self: 当事件发生在该元素自己而不是子元素的时候会触发； .capture: 事件侦听，事件发生的时候会调用

7. v-on 能够绑定多个方法吗？

• 能够, @click="one();two()" 分号隔开

8. vue中 key 值的做用？

• 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key的做用主要是为了高效的更新虚拟DOM。

9. 什么是vue的计算属性？

• computed里面的数据是函数， 在computed中this指向实例化对象， 要有返回值
• computed里面的数据是对象 对象里面是get和set方法， 在data要有数据，这样来set这个data， 在computed中this指向实例化对象， get方法要有返回值
• （下面是转载的）
• 在模板中放入太多的逻辑会让模板太重且难以维护，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。 好处： ①使得数据处理结构清晰； ②依赖于数据，数据更新，处理结果自动更新； ③计算属性内部this指向vm实例； ④在template调用时，直接写计算属性名便可； ⑤经常使用的是getter方法，获取数据，也可使用set方法改变数据； ⑥相较于methods，无论依赖的数据变不变，methods都会从新计算，可是依赖数据不变的时候computed从缓存中获取，不会从新计算。

---

10. vue等单页面应用及其优缺点

• （下面这句转载的） -优势：Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。 MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。 缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（若是要支持SEO，建议经过服务端来进行渲染组件）； 第一次加载首页耗时相对长一些；不可使用浏览器的导航按钮须要自行实现前进、后退。

11. 生命周期

c m u d beforeCreate（建立前） 在数据观测和初始化事件还未开始 created（建立后） 完成数据观测，属性和方法的运算，初始化事件，el 替换，并挂载到实例上去以后调用。实例已完成如下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程当中进行ajax交互。 beforeUpdate（更新前） 在数据更新以前调用，发生在虚拟DOM从新渲染和打补丁以前。能够在该钩子中进一步地更改状态，不会触发附加的重渲染过程。 updated（更新后） 在因为数据更改致使的虚拟DOM从新渲染和打补丁以后调用。调用时，组件DOM已经更新，因此能够执行依赖于DOM的操做。然而在大多数状况下，应该避免在此期间更改状态，由于这可能会致使更新无限循环。该钩子在服务器端渲染期间不被调用。 beforeDestroy（销毁前） 在实例销毁以前调用。实例仍然彻底可用。 destroyed（销毁后） 在实例销毁以后调用。调用后，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

12. 什么是mvvm？

• （下面这段转载的） MVVM 是 Model-View-ViewModel 的缩写。 Model表明数据模型，也能够在Model中定义数据修改和操做的业务逻辑。 View 表明UI 组件，它负责将数据模型转化成UI 展示出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，链接Model和View。 在MVVM架构下，View 和 Model 之间并无直接的联系，而是经过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 所以View 数据的变化会同步到Model中，而Model 数据的变化也会当即反应到View 上。 ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来，而View 和 Model 之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，不须要手动操做DOM, 不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理。

13. 描述vuex

vuex用于组件之间共享数据 以store做为容器 state：用来存储共享数据， 数据池 getters：用来获取处理事后的数据，具备缓存的做用 mutations： 同步提交状态的更改 actions:异步提交状态的更改 module：当状态管理多了， 使用module来划分多个模块

14. 路由传值

props：true的使用 $route的使用

15. vue经常使用的交互工具

post方法要记得告知后端什么类型格式的文件 vue-resource 0.7.1版本比较好 http.post .ajax({});

16. $watch

• 监听对象中的data里面的数据的变化
• var vue = new Vue ( { el:'#root', data:{ a:"", b:"" } }); 开启监控：， 返回值是中止监控的函数 var watchA = vue.$watch('a', function(newValue, oldValue){ vue.c = vue.a // 这样a改变就会执行函数 }); 中止监控： watchA();

17. 过滤器

• 1.x 提供自带的过滤器 ：

capitalize, uppercase, debounce '100', currency, pluralize 'dog' ,

limitBy v-for="i in arr | limitBy 2" 截取前两个， limitBy 截取长度， 截取起点,

filterBy v-for="i in arr | filterBy 'male' in 'sex'" 过滤i中的sex是male的,

orderBy 排序

自定义过滤器的方法 :

单向过滤器：Vue.filter('过滤器的名字', 参数){return 返回值};

双向过滤器： Vue.filter('过滤器名字', {read(inputValue){}, write(newValue, oldValue, params){}})

• 2.x 只提供过滤器的方法 ： 行间要使用括号传参数

18. 实例化对象的方法

不能里面外面都定义 data 也就是data , 能够赋值取值 log 返回data 只能查看，不能赋值和取值 $destroy 销毁实例化对象

---

19. cloak 防止用户看到为渲染的数据{{}}

css中 [v-cloak]{display:none}

---

20. 自定义指令

注意使用的时候：指令名字比能有大写字母！！！ 能够实现的功能： 拖拽， 随机背景颜色，图片放大， 计数 Vue，directive('指令名', function(){

}); 双向绑定自定义指令： Vue.directive('inputColor', { bind(){ 这里写初始化 }, update(参数){ 这里写更新后的数据 } })

---

21. 自定义标签

Vue.elementDirective('lyz', { bind(){ 初始化 }, update(param){ 更新组件 } })

---

22. vue 的route的mode

hash：hash 虽然出如今 URL 中，但不会被包括在 HTTP 请求中，对后端彻底没有影响，所以改变 hash 不会从新加载页面。 history：利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法， 后端要作地址重定向的处理。 history.go(-2);//后退两次 history.go(2);//前进两次 history.back(); //后退 hsitory.forward(); //前进

---

23. 实例化对象传递

var bus = new Vue(); Vue.emit('数据名', (接收到的数据)=>{ this.本身的变量名 = 接收到的数据 })

---

24. 动画的生命周期

• 生命周期事件6种
• css样式4种（加上显示时候的状态一共5种）
• 行间css指令两种（推荐）

---

25. 全局组件

组件输出 -> 打包（给包组件命名，做为标签名使用） -> 输出打包后的模块 -> Vue.use(模块名) -> <全局组件名字 />

打包组件的js文件

import cp1 from './cp1.vue'
import cp1 from './cp1.vue'
let package = {
    install(vue){
        vue.component('cp1', cp1)
        vue.component('cp2', cp2)
    }
}
export default package;
复制代码

main.js

import package from "globalCp"
Vue.use(package)
复制代码

其余vue文件直接使用便可

<cp1></cp1>
复制代码

26.跨域

设置vue.config.js， 里面设置devServer的proxy， 这个是webpack的代理服务器的方式。