慕课网vue2.x学习笔记

课程来源&＃xff1a;https://www.imooc.com/learn/1091
源码地址&＃xff1a;https://github.com/kanlidy/vue-lessons-demo

vue是在实例化对象里写代码

1.课程介绍

学习过程&＃xff1a;
1.看&＃xff08;目录&＃xff0c;重点&＃xff0c;倍数看&＃xff09;
2.记&＃xff08;笔记&＃xff0c;重点&＃xff0c;讨论学习&＃xff09;
3.练习&＃xff08;随堂练&＃xff0c;作业练&＃xff0c;实战练&＃xff09;

课程知识点&＃xff1a;
1.vue2 框架常用知识点&＃xff08;模板语法 条件渲染 列表渲染等&＃xff09;
2.vue 核心技术(vue-router vuex)
3.集成vue2.x

常用知识点&＃xff1a;认识vue &＃xff0c;模块语法&＃xff0c;v-bind属性绑定&＃xff0c;事件绑定&＃xff0c;条件渲染&＃xff0c;列表渲染&＃xff0c;Class与Style绑定
核心技术&＃xff1a;认识vue-cli工具&＃xff0c;vue代码规范&＃xff0c;Vue组件的调试方法&＃xff0c;vue-router,vuex
集成:介绍workflow工作流&＃xff0c;单页面Demo(动态表单&＃xff0c;列表动态展示)&＃xff0c;使用Cli工具&＃xff0c;开发常见的应用组件

开发环境&＃xff1a;
IDE&＃xff1a;Webstorm、VsCode、
Node.js&＃xff1a;Node、NPM
调试环境&＃xff1a;Google浏览器的Vue devtools插件
工程环境&＃xff1a;Vue Cli

2.Vue框架常用知识点

2.1知识点解释

环境介绍&＃xff1a;
IDE&＃xff1a;webstorm、vscode
NPM&＃xff1a;Vue-cli、webpack、cnpm、nvm
Chrome&＃xff1a;Vue调试插件

认识Vue&＃xff1a;
第一个demo&＃xff1a;声明式渲染、条件渲染、列表、事件
热部署&＃xff1a;gulp、webpack、
认识样式&＃xff1a;Sass、postcss
前置知识&＃xff1a;代码规范&＃xff08;eslint)、学习资料&＃xff08;官网、社区&＃xff09;

基本概念&＃xff1a;
模板语法、计算属性、指令&＃xff08;class&＃xff0c;style绑定、条件渲染、列表渲染、事件处理、表单输入绑定&＃xff09;、组件基础&＃xff08;生命周期、模块化的思想&＃xff09;

部署&＃xff1a;
服务器渲染、打包编译

常用API&＃xff1a;
vue.use、props、DOM&＃xff08;el、template、render&＃xff09;

组件&＃xff1a;
组件通信方式&＃xff08;props、$parent、emlt event、Vuex&＃xff09;、动画、Vue-router、Vue-resource

官方不推荐使用vue-resource,推荐使用Axios

2.2模板语法

Vue文件结构&＃xff08;template模板&＃xff0c;script脚本&＃xff0c;style样式&＃xff09;

模板语法包含插值、指令&＃xff08;指令缩写&＃xff09;

v-text &＃61; “变量”: 文本会原样输出
v-html &＃61; “变量”: 文本会被当作html解析输出&＃xff08;也可以当作模板使用&＃xff09;

{{变量}} 插值表达式

绑定事件&＃xff1a; v-on:click&＃61;“函数名” 或者 &＃64;click&＃61;“函数名”(可以简写&＃64;click&＃61;“handlerClick”)
绑定属性&＃xff1a;v-bind:href&＃61;"url"或者v-bind:id&＃61;“bg1”,然后再data:{}中指定url和bg1就可以了&＃xff08;可以简写&＃xff1a;href&＃61;“url”&＃xff09;

//模板语法
//绑定属性
//绑定事件






牢记哈&＃xff1a;v-text无法渲染数据中html元素&＃xff0c;而v-html能够将数据中的html元素渲染出来。面试常问题目&＃xff0c;拿小本本记下.

2.3计算属性与侦听器

计算属性&＃xff1a;compued
侦听器&＃xff1a;watch

watch 通常监听一个变量 或一个常量 单一变量 或是数组
computed 可以监听多个变量 并且变量是在vue实例中&＃xff0c;如果有一个全局&＃xff0c;非vue实例里面的变量发生了变化&＃xff0c;是不会触发computed计算属性的&＃xff0c;比如new Vue外的var定义变量发生了变化。

使用场景介绍&＃xff1a;watch&＃xff08;异步场景&＃xff09;&＃xff0c;computed&＃xff08;数据联动&＃xff09;

软回车&＃xff1a;shift &＃43; enter&＃xff0c;这样就不会因为回车而执行。

2.4条件渲染、列表渲染、Class与Style绑定

条件渲染&＃xff1a;根据时间 或者一些什么需求 进行渲染&＃xff08;v-if v-else ,v-else-if v-show&＃xff09;
列表渲染&＃xff1a; for 循环&＃xff0c;v-for&＃xff0c;v-for和v-if结合使用&＃xff0c;v-for高阶用法
绑定class就等于给它上标签&＃xff1b;这个标签还超级神奇&＃xff0c;可以设置前提条件给他决定绑还是不绑

3.Vue核心技术

如何工程化、如何写出优雅的vue代码、如何调试vue

vue init webpack 与vue create 创建项目有什么区别
一个 2.0 的 cli 命令&＃xff0c;一个是 3.0 的 cli 命令

npm init 用来初始化生成一个新的 package.json 文件。

vue的开发本身是不依赖node的&＃xff0c;不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。因此只能说webpack是依赖node的。&＃xff08;也就是vuecli集成webpack&＃xff0c;webpack基于node开发&＃xff09;

grunt,gulp,webpack这些只是工具&＃xff0c;帮助我们前端完成复杂的开发&＃xff0c;提高效率。你完全可以不用&＃xff0c;如果不会的话还强行用只会加慢你的开发效率&＃xff0c;而违背了初衷。

npm又是随node安装的工具&＃xff0c;还要学node&＃xff1f;node不是服务器端的吗&＃xff1f;关前端什么事&＃xff1f;
node是js的服务执行环境&＃xff0c;前端常常借助 node帮助前端实现工程化。很多工具是基于node的&＃xff0c;比如说你说的webpack,grunt。

传统项目只需要起后台服务即可&＃xff08;可顺利调用后台API&＃xff09;&＃xff0c;现在的前端项目大多通过webpack管理&＃xff0c;webpack又是基于node&＃xff0c;node是一个运行在服务器端的js环境&＃xff0c;浏览器本身不支持的scss、es6/es7语法、typescript等都可在node这通过工具包npm去解决.因此前端项目起的node服务一般是为了解决这些问题。

更多参考&＃xff1a;https://www.cnblogs.com/HenryWEI/p/10045877.html

3.1认识vue-cli

快速创建工程的两种方法&＃xff1a;
1.vue create 文件名
2.vue ui

Router&＃xff1a;路由组件
Vuex&＃xff1a;状态控制组件

工程化项目的目录

3.2组件化的思想

什么是组件化&＃xff1f;
独立的&＃xff0c;可复用的&＃xff0c;整体化的

为什么要组件化&＃xff1f;
实现功能模块的复用&＃xff1b;
高执行效率&＃xff1b;
开发单页面复杂应用&＃xff1b;

如何进行拆分&＃xff1f;
300行原则&＃xff1b;复用原则&＃xff1b;业务复杂性原则&＃xff1b;

组件带来的问题&＃xff1a;
组件状态管理vuex;
多组件的混合使用&＃xff0c;多页面&＃xff0c;复杂业务&＃xff08;vue-router&＃xff09;;
组件间的传参&＃xff0c;消息&＃xff0c;事件管理&＃xff08;props, emit/on, bus&＃xff09;

3.3vue代码规范

风格指南地址&＃xff1a;
https://cn.vuejs.org/v2/style-guide/

3.4vue-router介绍

Vue中组件&＃xff1a;
注册组件就是利用Vue.component()方法&＃xff0c;先传入一个自定义组件的名字&＃xff0c;然后传入这个组件的配置。

// 定义一个名为 button-counter 的新组件
Vue.component(&＃39;button-counter&＃39;, {data: function () {return {count: 0}},template: &＃39;You clicked me {{ count }} times.&＃39;
})

还可以在某个Vue实例中注册只有自己能使用的组件。

var app &＃61; new Vue({el: &＃39;#app&＃39;,data: {},components: {&＃39;my-component&＃39;: {template: &＃96;

更多可以参考&＃xff1a;https://segmentfault.com/a/1190000010527064

3.5vuex介绍

vuex&＃xff1a;
1.为Vue.js开发的状态管理模式。
2.组件状态集中管理
3.组件状态改变遵循统一的规则

由于状态零散地分布在许多组件和组件之间的交互中&＃xff0c;大型应用复杂度也经常逐渐增长。为了解决这个问题&＃xff0c;Vue 提供 vuex&＃xff1a;我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools&＃xff0c;无需配置即可进行时光旅行调试。

Vuex相当于中央管理器&＃xff0c;其他组件可以对Vuex中组件状态进行修改&＃xff0c;也可以进行调用&＃xff0c;保证一个组件状态是一致的。

//views/info.vue
//store.js
import Vue from &＃39;vue&＃39;
import Vuex from &＃39;vuex&＃39;Vue.use(Vuex)export default new Vuex.Store({state:{ //组件状态管理count:0},mutations:{ //改变状态方法集increase(){this.state.count &＃43;&＃43;}},action:{ //}})//引入组件状态管理&＃xff08;About.vue&＃xff09;



3.6如何进行调试

第一种&＃xff1a;vue的chrome扩展插件&＃xff1b;(Vue插件中第一个图标是指组件、第二个是状态)
第二种 &＃xff1a;在methods中用console.log&＃xff0c;alert()&＃xff0c;debugger&＃xff1b;
第三种&＃xff1a;在mounted中绑定window.vue&＃61;this&＃xff0c;然后就可以在console中使用window.vue.xxx调用方法&＃xff0c;直接调试;
第四种&＃xff1a;在cdn方式引入vue时&＃xff0c;将vue实例化&＃xff0c;即vm实例:var app&＃61;new Vue();

Network中XHR是指请求

代码中插入debugger语句即可使用实时调试功能

补充&＃xff1a;alert是一个阻塞模式的&＃xff0c;就是在点击确定前后面的代码不会执行。

4.集成Vue

4.1如何集成Vue

集成场景&＃xff1a;
1.单页面、多页面引入Vue.js
2.复杂单页面应用Vue cli工具

git简介&＃xff1a;
1.创建项目git clone&＃xff0c;git init
2.创建分支&＃xff0c;推送分支&＃xff0c;合并分支
3.删除分支、回退版本

Git可以参考资料&＃xff1a;http://www.runoob.com/git/git-tutorial.html

git add 命令可将该文件添加到缓存
使用 git add 命令将想要快照的内容写入缓存区&＃xff0c; 而执行 git commit 将缓存区内容添加到仓库中。
git push&＃xff1a;是将本地库中的最新信息发送给远程库&＃xff1b;

git pull&＃xff1a;是从远程获取最新版本到本地&＃xff0c;并自动merge&＃xff1b;
git fetch&＃xff1a;是从远程获取最新版本到本地&＃xff0c;不会自动merge&＃xff1b;
git merge&＃xff1a;是用于从指定的commit(s)合并到当前分支&＃xff0c;用来合并两个分支&＃xff1b;
git pull 相当于 git fetch &＃43; git merge。

第一步需要配置用户名和邮箱地址。

$ git config --global user.name &＃39;runoob&＃39;
$ git config --global user.email test&＃64;runoob.com


回退制定版本指令&＃xff1a;
git reset --hard HEAD{number} 或者是&＃xff1a;git reset --hard 76c4d4f
git log
git reflog


4.2单页面应用Demo1

4.3如何高仿别人的APP

如何研究别人的产品技术&＃xff1a;
1、Chrome查看Dom结构
2、Header/body&＃xff0c;查看js/css引用&＃xff0c;搜索对应的js库
3、查看sources、network中的js&＃xff0c;使用反编与断点进行调试

4.4单页面应用Demo2

4.5单页面应用Demo3

5.课程总结

5.1重点知识点回顾

模板语法&＃xff1b;
计算属性与侦听器&＃xff1b;
常用指令&＃xff08;列表、条件、class与样式绑定&＃xff09;&＃xff1b;
风格指南&＃xff1b;
vue-router&＃xff0c;vuex以及调试方法
vuecli 工具的使用
Vue集成
开发工作流
Git简介

工程打包&＃xff1a;

npm run build把工程打包后&＃xff0c;会把整个项目文件打包生成一个dist文件夹&＃xff0c;把dist文件夹放在服务器就可以进行部署了。可以把dist目录中的文件&＃xff0c;放在tomcat/nginx这样的web容器中&＃xff0c;使用localhost:8080这种方式来打开&＃xff0c;或者&＃xff0c;上传到网站的www目录&＃xff0c;同样的道理&＃xff0c;使用nginx或者apache2来跑一个http服务。

5.2课程总结

、