vue学习笔记

一、Vue 基础知识
1.安装vue
注：node版本必须大于等于8.9
vue-cli3.x:npm install -g @vue/cli
vue-cli2.x:npm install -g @vue/cli-init

2.创建项目
vue init webpack my-project
注：安装依赖的时候，选择最后一个，就是自己安装
cd my-project
npm install
npm start或npm run dev

3.工程目录

4.基础指令
Mustache:{{ 变量 }} 只能存在单行语句
v-once:只能渲染一次
v-html:解析html结构
v-bind:指令（解析属性中的对象）
v-bind简写：“ ：”
v-if:条件渲染
v-show:条件渲染

5.v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.列表渲染
v-for:指令基于一个数组来渲染一个列表"(item, index) in arr"。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
也可渲染一个对象"(value, key, index) in obj"

7.时间处理
1.事件改变data数据，data数据会引起视图的变化
2.事件传递参数
$event
3.数组更新检测
最开始讲数组的时候：老师在讲一个方法的时候会说，返回一个原数组还是新数组
变异方法：
改变原数组，则可以引起视图更新 push(),pop(),shift(),unshift(),splice(),sort(),reverse()
不改变原数组，创建新数组，则无法引起视图更新 filter()、concat() 和 slice()

8.计算属性
计算属性缓存 VS 方法
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

9.Class 与 Style 绑定
1.对象中属性名可接收字符串；也可接收对象的key，但不会随值改变，并且不能拼接
2.数组中属性名可以接收对象,并且可以拼接字符串
3.对象中值是可以拼接的

10.表单输入绑定
v-model
.lazy
.number
.trim
watch: 监听事件,实时监听数据变化

11.组件传递数据prop 父–>子 通信

12.自定义事件向父级组件传递数据 子–>父 通信
$emit(‘自定义事件’)

13.动态组件
在动态组件上使用 keep-alive 保持之前的状态

二、Vue 网络请求
1.基础插槽
2.具名插槽
3.编译作用域
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
4.作用域插槽（数据传递）

{{ parent.child }}

5.生命周期
beforeCreate
created创建完成
beforeMount
mounted挂载完成
beforeUpdate
updated更新完成
beforeDestroy
destroyed销毁完成
6.过渡与动画 transfrom transition
7.自定义指令
全局 vue.directive(’’,{})
局部 directives: {
’ ': function(){}
}
8.过滤器 filter
用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式

{{ message | capitalize }}

当全局过滤器和局部过滤器重名时，会采用局部过滤器

9.网络请求
react --> fetch
vue官网之前维护了一个网络请求：vue-resource，后期不维护了，推荐使用axios
vue --> axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
Features(特点)
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装：
	npm install axios --save
引入：
	import Axios from 'axios'
	Vue.prototype.$axios = Axios

10.axios配置
this.$axios({
method: ‘post’,
url: ‘/user/12345’,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

11.axios跨域处理
配置：
proxyTable: {
‘/douban_api’: {
target: ‘http://api.douban.com’,
pathRewrite: {
‘^/douban_api’: ‘’
},
changeOrigin: true
}
},

main.js:
	Vue.prototype.HOST= '/douban_api'

访问：
	mounted(){
	    var url = this.HOST + '/list-2.html';
	    this.$axios({
	      method: 'get',
	      url: url,
	    })
	    .then(function(response){
	      console.log(response);
	    })
	    .catch(function(error){
	      console.log(error);
	    });
 }