慕课网vue2.x学习笔记

最新推荐文章于 2022-05-12 22:57:37 发布

Cacra

最新推荐文章于 2022-05-12 22:57:37 发布

阅读量367

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/u014465934/article/details/87112925

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文详细记录了Vue2.x的学习过程，包括框架常用知识点、核心技术（如vue-router和vuex）、集成Vue2.x的方法及工程化实践。介绍了Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染等，还涵盖了Vue CLI、vue-router、vuex的使用以及调试技巧。此外，探讨了Vue项目集成、Git操作和单页面应用的开发流程。

摘要由CSDN通过智能技术生成

课程来源：https://www.imooc.com/learn/1091
源码地址：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服务一般是为了解决这些问题。

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/

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

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();

在这里插入图片描述

Network中XHR是指请求

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

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

4.集成Vue

4.1如何集成Vue

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

在这里插入图片描述

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

Git可以参考资料：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课程总结

在这里插入图片描述