慕课网vue2.x学习笔记

小鱼儿 2022-03-20 12:10 286阅读 0赞

课程来源：[https://www.imooc.com/learn/1091][https_www.imooc.com_learn_1091]  
源码地址：[https://github.com/kanlidy/vue-lessons-demo][https_github.com_kanlidy_vue-lessons-demo]

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

**1.课程介绍**

学习过程：  
1.看（目录，重点，倍数看）  
2.记（笔记，重点，讨论学习）  
3.练习（随堂练，作业练，实战练）

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

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

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

**2.Vue框架常用知识点**

2.1知识点解释

**环境介绍：**  
IDE：webstorm、vscode  
NPM：Vue-cli、webpack、cnpm、nvm  
Chrome：Vue调试插件

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

**基本概念：**  
模板语法、计算属性、指令（class，style绑定、条件渲染、列表渲染、事件处理、表单输入绑定）、组件基础（生命周期、模块化的思想）

**部署：**  
服务器渲染、打包编译

**常用API：**  
vue.use、props、DOM（el、template、render）

**组件：**  
组件通信方式（props、$parent、emlt event、Vuex）、动画、Vue-router、Vue-resource

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

2.2模板语法

Vue文件结构（template模板，script脚本，style样式）

模板语法包含插值、指令（指令缩写）

v-text = “变量”: 文本会原样输出  
v-html = “变量”: 文本会被当作html解析输出（也可以当作模板使用）

\{ \{变量\}\} 插值表达式

绑定事件： v-on:click=“函数名” 或者 @click=“函数名”(可以简写@click=“handlerClick”)  
绑定属性：v-bind:href="url"或者v-bind:id=“bg1”,然后再data:\{\}中指定url和bg1就可以了（可以简写：href=“url”）

//模板语法
    //绑定属性
    //绑定事件
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.bg{
    			color: red;
    		}
    		#ido1{
    			color: black;
    		}
    
    	</style>
    	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
    </head>
    <body>
    	<div id="app">
    		<div>
    			{
       {msg}}
    		</div>
        	<div v-html="message"></div>
        	<a v-bind:href="url">百度</a>
        	<div v-bind:id="bg1">背景为黑色</div>
        	<button v-on:click="handleClick">按钮</button>
    	</div>
    	<script>
    		new Vue({
    		  el: '#app',
    		  data: {
    		  	msg:'hello world',
    		    message: '<h1>菜鸟教程</h1>',
    		    url:'www.baidu.com',
    		    bg1:'id01'
    		  },
    		  methods:{
    		  	handleClick:function(){
    		  		this.msg = "Vue.js"
    		  	}
    		  }
    		})
    	</script>
    </body>
    </html>

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

2.3计算属性与侦听器

计算属性：compued  
侦听器：watch

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

使用场景介绍：watch（异步场景），computed（数据联动）

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.bg{
    			color: red;
    		}
    		#ido1{
    			color: black;
    		}
    
    	</style>
    	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
    </head>
    <body>
    	<div id="app">
    		<div>
    			{
       {msg}}
    		</div>
        	<div v-html="message"></div>
        	<a v-bind:href="url">百度</a>
        	<div v-bind:id="bg1">背景为黑色</div>
        	<button v-on:click="handleClick">按钮</button>
        	<p>
        		{
       {msg1}}
        	</p>
    	</div>
    	<script>
    		var test1 = 'abc';
    		new Vue({
    		  el: '#app',
    		  data: {
    		  	msg:'hello world',
    		    message: '<h1>菜鸟教程</h1>',
    		    url:'www.baidu.com',
    		    bg1:'id01'
    		  },
    		  methods:{
    		  	handleClick:function(){
    		  		this.msg = "Vue.js"
    		  	}
    		  },
    		  watch:{
    		  	msg:function(newval,oldval){
    		  		console.log(newval)
    		  		console.log(oldval)
    		  	}
    		  },
    		  computed:{
    		  	msg1:function () {
    		  		return '1:'+ this.msg + ',' + this.url
    		  	}
    		  }
    		})
    	</script>
    </body>
    </html>

软回车：shift + enter，这样就不会因为回车而执行。

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      {
       {msg}}
      <div v-for="item in list">
        <div v-show="item.age > 29"
             :class="['active','add','more',{'another': item.age < 30}]"
             :style="styleMsg">
          {
       {item.name}}
        </div>
      </div>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue!',
          styleMsg: {
            color: 'red',
            textShadow: '0 0 5px green'
          },
          list: [{
            name: 'liwei',
            age: 29
          },{
            name: '小张',
            age: 30
          }]
        }
      })
    </script>
    </body>
    </html>

**3.Vue核心技术**

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

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

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

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

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

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

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

更多参考：[https://www.cnblogs.com/HenryWEI/p/10045877.html][https_www.cnblogs.com_HenryWEI_p_10045877.html]

3.1认识vue-cli

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

Router：路由组件  
Vuex：状态控制组件

工程化项目的目录

3.2组件化的思想

什么是组件化？  
独立的，可复用的，整体化的

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

如何进行拆分？  
300行原则；复用原则；业务复杂性原则；

组件带来的问题：  
组件状态管理vuex;  
多组件的混合使用，多页面，复杂业务（vue-router）;  
组件间的传参，消息，事件管理（props, emit/on, bus）

3.3vue代码规范

风格指南地址：  
[https://cn.vuejs.org/v2/style-guide/][https_cn.vuejs.org_v2_style-guide]

3.4vue-router介绍

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

// 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {
       { count }} times.</button>'
    })
    
    <div id="components-demo">
      <button-counter></button-counter>
    </div>
    
    new Vue({ el: '#components-demo' })

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

var app = new Vue({
        el: '#app',
        data: {
        },
        components: {
          'my-component': {
            template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
          }
        }
      })

更多可以参考：[https://segmentfault.com/a/1190000010527064][https_segmentfault.com_a_1190000010527064]

3.5vuex介绍

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

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

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

//views/info.vue
    <template>
    	
    	<div>
    		hello info component
    		<button type="button" @click="add()">
    			添加
    		</button>
    	</div>
    	
    </template>
    
    <script>
    import store from '@/store'
    export default {
    	name : "Info",
    	store,
    	methods:{
    		add(){
    			console.log("add Event from info!")
    			store.commit('increase')
    		}
    	}
    }
    </script>
    
    <style scoped>
    
    </style>
    
    //store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    	state:{ //组件状态管理
    		count:0
    	},
    	mutations:{ //改变状态方法集
    		increase(){
    			this.state.count ++
    		}
    	},
    	action:{ //
    
    	}
    
    })
    
    //引入组件状态管理（About.vue）
    <template>
      <div class="about">
        <h1>This is an about page</h1>
        <p>{
       {msg}}</p>
      </div>
    </template>
    
    <script>
    import store from '@/store'
    export default{
    	name:'about',
    	store,
    	data(){
    		return{
    			msg: store.state.count
    		}
    	}
    }
    </script>

3.6如何进行调试

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

Network中XHR是指请求

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

补充：alert是一个阻塞模式的，就是在点击确定前后面的代码不会执行。

**4.集成Vue**

4.1如何集成Vue

集成场景：  
1.单页面、多页面引入Vue.js  
2.复杂单页面应用Vue cli工具  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

git简介：  
1.创建项目git clone，git init  
2.创建分支，推送分支，合并分支  
3.删除分支、回退版本

Git可以参考资料：[http://www.runoob.com/git/git-tutorial.html][http_www.runoob.com_git_git-tutorial.html]

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

git pull：是从远程获取最新版本到本地，并自动merge；  
git fetch：是从远程获取最新版本到本地，不会自动merge；  
git merge：是用于从指定的commit(s)合并到当前分支，用来合并两个分支；  
git pull 相当于 git fetch + git merge。

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

$ git config --global user.name 'runoob'
    $ git config --global user.email test@runoob.com

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

4.2单页面应用Demo1

4.3如何高仿别人的APP

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

4.4单页面应用Demo2

4.5单页面应用Demo3

**5.课程总结**

5.1重点知识点回顾

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

**工程打包：**

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

5.2课程总结

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

、

[https_www.imooc.com_learn_1091]: https://www.imooc.com/learn/1091
[https_github.com_kanlidy_vue-lessons-demo]: https://github.com/kanlidy/vue-lessons-demo
[https_www.cnblogs.com_HenryWEI_p_10045877.html]: https://www.cnblogs.com/HenryWEI/p/10045877.html
[https_cn.vuejs.org_v2_style-guide]: https://cn.vuejs.org/v2/style-guide/
[https_segmentfault.com_a_1190000010527064]: https://segmentfault.com/a/1190000010527064
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220320/2c5b6ff43a1048379203389e8402a431.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220320/dd8a5967be87427ebc007481bfa5a677.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220320/cbd9480bad8b4c90aad7f0f74912677f.png
[http_www.runoob.com_git_git-tutorial.html]: http://www.runoob.com/git/git-tutorial.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220320/8e44d6f4ffab41e88c58ab0a9299500d.png