本人忘了的时候复习用的笔记，所以写的比较乱。
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的代理服务器的方式。
