慕课网-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(属性绑定)

<div v-html="msg"></div> <a v-bind:href="url">baidu</a> :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”

<div v-bind:style="{'color':'red','font-size':'30px'}">woshi div的内容</div>

注：跟angular一样的，是对象格式！！！！

<div v-bind:style="classStyle">第二个div</div> // data的数据： classStyle:{ color:'yellow', fontSize:'30px', }

class也是与angular相同的！

<div :class="{'active':isTrue}">我是第三个div</div> <div :class="['first-line','margin-top-0',{'active':isTrue}]">disige div</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：

<template> </template> <script> export default { name: "info" } </script> <style scoped> </style>

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当前行高亮，单击可以添加的例子（逻辑严谨性的问题）

<ul> <li v-for="(item,index) in lists" :class="{'active':current==index}" @click="choose(index);" :key="index">{{item}}</li> </ul>

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.

路由：

<div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/>

或者：

<div> <router-view/> <ul> <li><router-link :to="{name:'list'}">新闻列表</router-link></li> <li><router-link :to="{name:'user'}">个人中心</router-link></li> </ul> </div>

js中：

this.$router.push('/home/list')

add页面添加数据，那么在list展示，用到了vuex：