慕课网-3小时速成vue2.x核心技术
vue：
渐进式–JavaScript 框架
特点：易用，灵活，高效！
- 已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
- 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
- 20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
总结：
小而美（灵活的语法，灵活的开发方式）=> 小但是很好用
丰富的生态（模块、插件、开发团队、开发资料） =>资料很多
广泛的应用（移动端、pc端）=>跨平台
查看github star的排名：
github搜索：star:>1
vue排名第三！
nvm(node version manager):
github搜nvm=>地址：https://github.com/nvm-sh/nvm
安装nvm：https://www.jianshu.com/p/14f98f4a5667
https://www.cnblogs.com/cllgeek/p/6076280.html
查看当前node版本：
node -v/--version
查看本地所有的node的版本：
nvm ls
带箭头的，是当前使用的版本！
查看node官网有什么版本：（可以供使用的）
nvm ls-remote // 很多个版本，查看版本号，可以安装某个版本
安装某个版本：
nvm install v11.0.0 // 安装这个版本，并切换到这个版本
切换 到某个版本：
nvm use v8.12.0 // 切换到v8上
vue在chrome的插件：vue.js devtools
安装：https://chrome-extension-downloader.com/
ID：nhdogjmejiglipccpnnnanhbledajbpd
下载完成后，在chrome的（…/更多工具/）扩展程序中，拖入这个下载
http:
vue-resource(官方不推荐使用了，但是还是很好用)
推荐：axios
- 环境介绍：
ide，npm（nvm，cnpm，cli），chrome插件（dev-tools）
- 基本用法：
模板语法
计算属性
指令：条件渲染，列表渲染，事件处理，表单，class和style，
生命周期钩子
- 组件：
基础：生命周期钩子
通讯：props，$parent，emit event，vuex
路由：vue-router
http：vue-resource，axios
动画
- 常用api
vue.use
props
DOM：el,template,render
- 部署
服务端渲染
打包编译
第一个应用：
bootcdn
vue中el绑定的时候，如果是class，只会把数据绑定到第一个class上，第二个就忽略掉了，所以通常用ID！
插值，表达式，v-html，v-bind(属性绑定)
baidu
:href
v-on:click="submit()"
@click
计算属性与侦听器
计算属性：computed
侦听器：watch
注：这两个跟data和methods是平级的！
data:{
msg:'hello vue',
},
watch:{
msg:function(n,o){
console.log(n,o);
}
}
data:{
msg:'hello vue',
anthor:'anthor hello vue'
},
watch:{
msg:function(n,o){
console.log(n,o);
}
},
computed:{
msg1:function(){
return this.msg+this.anthor;
}
}
- watch只有监听的key变化才触发！=>单一变量（可以是对象）
- computed里面返回的值，有一个变化，就是触发！！！！==>监听的是实例内的值（如果实例外的值，先变化了，那么computed的返回值不会变化，但是如果实例内的值变化了，那么是例外的值，也是会更新的）！触发条件是实例内的监听值发生变化！（实例外的值会变化，但是不会自动触发） =>多变量，但必须是实例内部的！
控制台软换行：shift+回车
（直接回车的话，就执行语句了，所以用软换行）
常用指令
v-if，v-show，v-for，
v-for=“item of list”
woshi div的内容
注：跟angular一样的，是对象格式！！！！
第二个div
// data的数据：
classStyle:{
color:'yellow',
fontSize:'30px',
}
class也是与angular相同的！
我是第三个div
disige div
注：这种混合class，注意数组里面是对象！
@vue/cli 3.x:
第一种方法：
vue create hello-world
手动选择：
上下键调整选项，空格确定是否选中，回车是确认（跳到下一步）！
eslint的时候：保存的时候检查还是提交代码的时候才检查！=>选save的时候就行
preset的时候：
如果选择是，那么以后default的项目，会默认按照这个选项生成项目！=>no就行
第二种方法：
vue ui
首选选择的时候，最后一项：使用配置文件（选中）=>
将插件的配置保存在各自的配置文件中eg：.babelrc。
完成后：页面：
tab：插件，依赖，配置，任务
插件：@vue/cli-service,@vue/cli-plugin-babel,@vue/cli-plugin-eslint
依赖：运行依赖和开发依赖！
运行：core-js，vue，vue-router，vuex
开发：babel-eslint，eslint，node-sass，saas-loader等等
配置：Vue CLI（配置vue项目），ESLint configuration（代码质量和纠错）
任务：
serve（编译并热跟新，用于开发），build（编译并压缩，用于生产），lint（检查并修复源文件），inspect（检查webpack配置）
ui界面也是可以启动项目的！
main.js中：
实例Vue，并引入router和store：
router=》路由
store=》vuex
最后绑定到#app上！
我们关心的文件：
public,src,package.json
组件：=》由繁化简！
独立，可复用，整体化
组件的原则：
控制在300行代码以内！
常用的代码！
组件带来的问题：
组件状态管理（vuex）
多组件的混合使用，多页面，复杂业务（vue-router）
组件间传参、消息、事件管理（props、emit/on、bus）
风格指南：
官网=》学习=》风格指南！
新建组件info：
webstorm新建的时候，新建vueComponent：
router.js:
route level code-splitting;路由级代码拆分
this generates a separate chunk (about.[hash].js) for this route：这将为此路由生成一个单独的块（about.[hash].js）。==>about的路由
which is lazy-loaded when the route is visited.当路线被访问时，它被延迟加载。
vuex：
vuex的需求：
- 多个视图依赖于同一状态（eg：菜单导航）=》点击某个菜单的时候，其他是未激活状态
- 来自不同视图的行为需要变更同一状态（eg：评论弹幕）=》
vuex功能：
为vuejs开发的状态管理模式
组件状态集中管理
组件状态改变遵循统一的规则
store.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
注：
state：是状态集中管理的地方！
mutations：是唯一改变状态state的方法集！
@符号：代表src目录！
store.js:
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0,
},
mutations: {
increase(){
this.state.count++;
}
},
actions: {
}
})
info.vue:触发事件页面：
import store from '@/store';
export default {
name: "Info",
store,
methods: {
add() {
console.log("add事件执行了");
store.commit('increase');
}
}
}
about.vue：接受页面：
import store from '@/store';
export default {
name:'About',
store,
data(){
return{
msg:store.state.count,
}
}
}
demo1当前行高亮，单击可以添加的例子（逻辑严谨性的问题）
- {
{item}}
sources里面：压缩的css可以格式化的！！！ Line1,Column 1前面的 { }
demo2:
vue ui // 按步骤创建项目
创建组件：login，list，user，add，home（每个组件有自己简单的html）(home里面有路由list和user)
删除home，about和hello world组件
每个.vue页面中，只能有一个根div！否则报错的！
Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if to chain them instead.
路由：
或者：
新闻列表 个人中心
js中：
this.$router.push('/home/list')
add页面添加数据，那么在list展示，用到了vuex：