Vue入门学习看这篇就可以

王鲜森_

已于 2022-04-01 17:54:29 修改

阅读量198

点赞数 1

文章标签： vue

于 2022-04-01 17:45:09 首次发布

本文链接：https://blog.csdn.net/MN_wsf/article/details/123900740

版权

Vue -渐进式JavaScript框架

介绍

vue 中文网
 vue github
Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架

库和框架的区别

	我们所说的前端框架与库的区别？	https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

	代表：jQuery
	jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

Framework

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

	框架规定了自己的编程方式，是一套完整的解决方案
	使用框架的时候，由框架控制一切，我们只需要按照规则写代码

主要区别

	You call Library, Framework calls you
    核心点：谁起到主导作用（控制反转）
    框架中控制整个流程的是框架
    使用库，由开发人员决定如何调用库中提供的方法（辅助）

MVVM的介绍

	MVVM，一种更好的UI模式解决方案
  	从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普	https://www.cnblogs.com/indream/p/3602348.html

MVC

	M: Model 数据模型（专门用来操作数据，数据的CRUD）
	V：View 视图（对于前端来说，就是页面）
	C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM组成

	MVVM ===> M / V / VM
	M：model数据模型
	V：view视图
	VM：ViewModel 视图模型

优势对比

	MVC模式，将应用程序划分为三大部分，实现了职责分离
	在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM
    MVVM通过数据双向绑定让数据自动地双向同步
    V（修改数据） -> M
    M（修改数据） -> V
    数据是核心
Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称)
这个变量名表示 Vue 实例

学习Vue要转化思想
	不要在想着怎么操作DOM，而是想着如何操作数据！！！

起步 - Hello Vue

安装:npm i -S vue

指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
	var vm = new Vue({
	// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
	el: '#app',
	// Vue 实例的数据对象，用于给 View 提供数据
	data: {
  		msg: 'Hello Vue'
	}
})
</script>

Vue实例

注意 1：先在data中声明数据，再使用数据
注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg
var vm = new Vue({
data: {
msg: ‘大家好，…’
}
})

数据绑定

最常用的方式：Mustache(插值语法)，也就是 {{}} 语法
解释：{{}}从数据对象data中获取数据
说明：数据对象的属性值发生了改变，插值处的内容都会更新
说明：**{{}}**中只能出现JavaScript表达式而不能解析js语句
注意：Mustache 语法不能作用在 HTML 元素的属性上

	<h1>Hello, {{ msg }}.</h1>
	<p>{{ 1 + 2 }}</p>
	<p>{{ isOk ? 'yes': 'no' }}</p>
	
	<!-- ！！！错误示范！！！ -->
	<h1 title="{{ err }}"></h1>

双向数据绑定 Vue two way data binding

	双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
		
		数据的改变会引起DOM的改变
		DOM的改变也会引起数据的变化
		
	原理：Object.defineProperty中的get和set方法
	
		getter和setter：访问器
		作用：指定读取或设置对象属性值的时候，执行的操作

Vue-深入响应式原理
 MDN - Object.defineProperty()

	/*  defineProperty语法 介绍 */
	var obj = {}
	Object.defineProperty(obj, 'msg', {
  		// 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
		set: function (newVal, oldVal) {  },
		// 读取 obj.msg 时get方法会被系统调用
		get: function ( newVal, oldVal ) {}
	})

Vue双向绑定的实现

Vue原理&双向绑定MVVM

	<!-- 示例 -->
	<input type="text" id="txt" />
	<span id="sp"></span>

	<script>
	var txt = document.getElementById('txt'),
		sp = document.getElementById('sp'),
		 obj = {}

	// 给对象obj添加msg属性，并设置setter访问器
	Object.defineProperty(obj, 'msg', {
		// 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
	 	set: function (newVal) {
			// 当obj.msg被赋值时 同时设置给 input/span
		txt.value = newVal
		sp.innerText = newVal
		}
	})

	// 监听文本框的改变 当文本框输入内容时 改变obj.msg
	txt.addEventListener('keyup', function (event) {
		obj.msg = event.target.value
	})
	</script>

动态添加数据

注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式
可以通过以下方式实现动态添加数据的响应式

1 Vue.set(object, key, value) - 适用于添加单个属性
2 Object.assign() - 适用于添加多个属性

	var vm = new Vue({
		data: {
		stu: {
  			name: 'jack',
  			age: 19
			}
		}
	})

	/* Vue.set */
	Vue.set(vm.stu, 'gender', 'male')

	/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
	vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

异步DOM更新

说明：Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM
优势：可以去除重复数据，对于避免不必要的计算和避免重复 DOM 操作上，非常重要

如果需要那到更新后dom中的数据则需要通过 Vue.nextTick(callback)：在DOM更新后，执行某个操作（属于DOM操作）

实例调用vm.$nextTick(function () {})

	methods: {
	 fn() {
	    this.msg = 'change'
		this.$nextTick(function () {
  			console.log('$nextTick中打印：', this.$el.children[0].innerText);
		})
		console.log('直接打印：', this.$el.children[0].innerText);
	 }
	}

指令

解释：指令 (Directives) 是带有 v- 前缀的特殊属性
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

解释：更新DOM对象的 textContent

	<h1 v-text="msg"></h1>

v-html

解释：更新DOM对象的 innerHTML

	<h1 v-html="msg"></h1>

v-bind

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
语法：v-bind:title=“msg”
简写：:title=“msg”

	<!-- 完整语法 -->
	<a v-bind:href="url"></a>
	<!-- 缩写 -->
	<a :href="url"></a>

v-on

作用：绑定事件
语法：v-on:click=“say” or v-on:click=“say(‘参数’, $event)”
简写：@click=“say”
说明：绑定的事件定义在methods

	<!-- 完整语法 -->
	<a v-on:click="doSomething"></a>
	<!-- 缩写 -->
	<a @click="doSomething"></a>

事件修饰符

stop 阻止冒泡，调用 event.stopPropagation()
prevent 阻止默认行为，调用 event.preventDefault()
capture 添加事件侦听器时使用事件捕获模式
self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
once 事件只触发一次

v-model

作用：在表单元素上创建双向数据绑定
说明：监听用户的输入事件以更新数据
案例：计算器

	<input type="text" v-model="message" placeholder="edit me">
	<p>Message is: {{ message }}</p>

v-for

作用：基于源数据多次渲染元素或模板块

		<!-- 1 基础用法 -->
		<div v-for="item in items">
			{{ item.text }}
		</div>

		<!-- item 为当前项，index 为索引 -->
		<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
		<!-- item 为值，key 为键，index 为索引 -->
		<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
		<p v-for="item in 10">{{item}}</p>

key属性

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
Vue key
Vue key属性的说明

样式处理 class 和 style

使用方式：v-bind:class=“expression” or :class=“expression”
表达式的类型：字符串、数组、对象（重点）
语法:

	<!-- 1 -->
	<div v-bind:class="{ active: true }"></div> ===> 解析后
	<div class="active"></div>

	<!-- 2 -->
	<div :class="['active', 'text-danger']"></div> ===>解析后
	<div class="active text-danger"></div>

	<!-- 3 -->
	<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
	<div class="active text-danger"></div>


	--- style ---
	<!-- 1 -->
	<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
	<!-- 2 将多个 样式对象 应用到一个元素上-->
	<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
	<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

	<p v-show="isShow">这个元素展示出来了吗？？？</p>
	<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

提升性能：v-pre

说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

	<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

说明：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

	<span v-once>This will never change: {{msg}}</span>

过滤器 filter

作用：文本数据格式化
过滤器可以用在两个地方：{{}}和 v-bind 表达式
两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
显示的内容由过滤器的返回值决定

	Vue.filter('filterName', function (value) {
	 // value 表示要过滤的内容
	})

示例：

	<div>{{ dateStr | date }}</div>
	<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

	<script>
		Vue.filter('date', function(value, format) {
			// value 要过滤的字符串内容，比如：dateStr
			// format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
		})
	</script>

局部过滤器

说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

	{
	 data: {},
	// 通过 filters 属性创建局部过滤器
	// 注意：此处为 filters
	filters: {
		filterName: function(value, format) {}
	  }
	}

按键值修饰符

说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
键盘事件 - 键值修饰符
其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）

	// 只有在 keyCode 是 13 时调用 vm.submit()
	@keyup.13="submit"
	// 使用全局按键别名
	@keyup.enter="add"

	---

	// 通过全局 config.keyCodes 对象自定义键值修饰符别名
	Vue.config.keyCodes.f2 = 113
	// 使用自定义键值修饰符
	@keyup.enter.f2="add"

监视数据变化 - watch

概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数
作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
Vue $watch

	new Vue({
		data: { a: 1, b: { age: 10 } },
		watch: {
			a: function(val, oldVal) {
  			// val 表示当前值
  			// oldVal 表示旧值
  			console.log('当前值为：' + val, '旧值为：' + oldVal)
		},

		// 监听对象属性的变化
			b: {
  			handler: function (val, oldVal) { /* ... */ },
  			// deep : true表示是否监听对象内部属性值的变化 
  			deep: true
			},

		// 只监视user对象中age属性的变化
			'user.age': function (val, oldVal) {
			},
		}
	})

计算属性

说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
注意：computed**中的属性不能与***data*中的属性同名，否则会报错
Vue computed原理

实例生命周期

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
实例生命周期也叫做：组件生命周期

生命周期介绍

Vue生命周期钩子函数
简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是Vue中规定好的！

钩子函数 - beforeCreate()

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
vue实例生命周期参考1
vue实例生命周期参考2
使用场景：发送请求获取数据

钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的

钩子函数 - updated()

说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

说明：实例销毁之前调用。在这一步，实例仍然完全可用。
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

axios

Promise based HTTP client for the browser and node.js
以Promise为基础的HTTP客户端，适用于：浏览器和node.js
封装ajax，用来发送请求，异步获取数据

安装：npm i -S axios
axios

	// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
	// 1 引入 axios.js
	// 2 直接调用axios提供的API发送请求
	created: function () {
		axios.get(url)
	.then(function(resp) {})
	}

	---
	// 配合 webpack 使用方式如下：
	import Vue from 'vue'
	import axios from 'axios'
	// 将 axios 添加到 Vue.prototype 中
	Vue.prototype.$axios = axios

	---
	// 在组件中使用：
	methods: {
	getData() {
		this.$axios.get('url')
  		.then(res => {})
  		.catch(err => {})
	  }
	}

	---
	// API使用方式：

	axios.get(url[, config])
	axios.post(url[, data[, config]])
	axios(url[, config])
	axios(config)

Get 请求

	const url = 'http://vue.studyit.io/api/getnewslist'

	// url中带有query参数
	axios.get('/user?id=89')
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});

	// url和参数分离，使用对象
	axios.get('/user', {
	 params: {
		id: 12345
	   }
	})

post 请求

不同环境中处理 POST请求
默认情况下，axios 会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，我们可以这样：

	// 使用 qs 包，处理将对象序列化为字符串
	// npm i -S qs
	// var qs = require('qs')
	import qs from 'qs'
	qs.stringify({ 'bar': 123 }) ===> "bar=123"
	axios.post('/foo', qs.stringify({ 'bar': 123 }))

	// 或者：
	axios.post('/foo', 'bar=123&age=19')

	const url = 'http://vue.studyit.io/api/postcomment/17'
	axios.post(url, 'content=点个赞不过份')

	axios.post('/user', qs.stringify({
		firstName: 'Fred',
		lastName: 'Flintstone'
	}))
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	});

全局配置

	// 设置请求公共路径：
	axios.defaults.baseURL = 'http://vue.studyit.io'

拦截器

拦截器会拦截发送的每一个请求，请求发送之前执行request中的函数，请求发送完成之后执行response中的函数

	// 请求拦截器
	axios.interceptors.request.use(function (config) {
	 // 所有请求之前都要执行的操作

		return config;
	}, function (error) {
		// 错误处理

		return Promise.reject(error);
	});

	// 响应拦截器
	axios.interceptors.response.use(function (response) {
		// 所有请求完成后都要执行的操作

		return response;
	}, function (error) {
		// 错误处理
		return Promise.reject(error);
	});

自定义指令

作用：进行DOM操作
使用场景：对纯 DOM 元素进行底层操作，比如：文本框获得焦点
vue 自定义指令用法实例
两种指令：1 全局指令 2 局部指令

全局自定义指令

	// 第一个参数：指令名称
	// 第二个参数：配置对象，指定指令的钩子函数
	Vue.directive('directiveName', {
	// bind中只能对元素自身进行DOM操作，而无法对父级元素操作
	// 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
	bind( el，binding, vnode ) {
		// 参数详解
		// el：指令所绑定的元素，可以用来直接操作 DOM 。
		// binding：一个对象，包含以下属性：
  		// name：指令名，不包括 v- 前缀。
  		// value：指令的绑定值，等号后面的值 。
  		// oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  		// expression：字符串形式的指令表达式 等号后面的字符串 形式
  		// arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  		// modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。
		// vnode：Vue 编译生成的虚拟节点。。
		// oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
	},
	// inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说可以获取到父级节点了
	inserted (  el，binding, vnode ) {},
	//  DOM重新渲染前
	update(el，binding, vnode,oldVnode) {},
	// DOM重新渲染后
	componentUpdated ( el，binding, vnode,oldVnode ) {},
	// 只调用一次，指令与元素解绑时调用
	unbind ( el ) {
		// 指令所在的元素在页面中消失，触发
	}
	})
	// 简写 如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子:
	Vue.directive('自定义指令名', function( el, binding ) {})
	// 例：
	Vue.directive('color', function(el, binding) {
	el.style.color = binging.value
	})
	// 使用 注意直接些会被i成data中的数据“red” 需要字符串则嵌套引号"'red'"
	<p v-color="'red'"></p>

局部自定义指令

		var vm = new Vue({
		el : "#app",
		directives: {
			directiveName: { }
		   }
		})

剖析Vue原理&实现双向绑定MVVM

组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

创建组件的两种方式：1 全局组件 2 局部组件

全局组件

说明：全局组件在所有的vue实例中都可以使用
注意：先注册组件，再初始化根实例

	// 1 注册全局组件  
	Vue.component('my-component', {
	// template 只能有一个根元素
	template: '<p>A custom component!</p>',
	// 组件中的 `data` 必须是函数 并且函数的返回值必须是对象
	data() {
		return {
  		msg: '注意：组件的data必须是一个函数！！！'
		}
	}
	})

	// 2 使用：以自定义元素的方式
	<div id="example">
	<my-component></my-component>
	</div>

	// =====> 渲染结果
	<div id="example">
	<p>A custom component!</p>
	</div>


	// 3 template属性的值可以是：
	- 1 模板字符串
	- 2 模板id  template: '#tpl'
	<script type="text/x-template" id="tpl">
	<p>A custom component!</p>
	</script>

extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

	// 注册组件，传入一个扩展过的构造器
	Vue.component('my-component', Vue.extend({ /* ... */ }))

	// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
	Vue.component('my-component', { /* ... */ })

	var Home = Vue.extend({
	template: '',
	data() {}
	})
	Vue.component('home', Home)

局部组件

说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用

	var Child = {
	template: '<div>A custom component!</div>'
	}

	new Vue({
	// 注意：此处为 components
	components: {
		// <my-component> 将只在当前vue实例中使用
		// my-component 为组件名 值为配置对象 
		'my-component': {
  		template: ``,
  		data () { return { } },
  		props : []
		}
	}
	})

组件通讯

父组件到子组件

方式：通过子组件props属性来传递数据 props是一个数组
注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效
说明：传递过来的props属性的用法与data属性的用法相同

	<div id="app">
	<!-- 如果需要往子组件总传递父组件data中的数据 需要加v-bind="数据名称" -->
	<hello v-bind:msg="info"></hello>
	<!-- 如果传递的是字面量 那么直接写-->
	<hello my-msg="abc"></hello>
	</div>

	<!-- js -->
	<script>
	new Vue({
		el: "#app",
		data : {
  		info : 15
		},
		components: {
  		hello: {
    		// 创建props及其传递过来的属性
    		props: ['msg', 'myMsg'],
    		template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
  		}
		}
	 })
	</script>

子组件到父组件

方式：父组件给子组件传递一个函数，由子组件调用这个函数

说明：借助vue中的自定义事件（v-on:cunstomFn="fn"）

步骤:

1、在父组件中定义方法 parentFn
2、在子组件 组件引入标签 中绑定自定义事件 v-on:自定义事件名="父组件中的方法" ==> @pfn="parentFn"
3、子组件中通过$emit()触发自定义事件事件 this.$emit(pfn,参数列表。。。)

路由

路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则
vue中的路由是：hash 和 component的对应关系
在 Web app 中，通过一个页面来展示和管理整个应用的功能。SPA往往是功能复杂的应用，为了有效管理所有视图内容，前端路由应运而生！简单来说，路由就是一套映射规则（一对一的对应规则），由开发人员制定规则。当URL中的哈希值（# hash）发生改变后，路由会根据制定好的规则，展示对应的视图内容

前端模块化

为什么需要模块化

1 最开始的js就是为了实现客户端验证以及一些简单的效果
2 后来，js得到重视，应用越来越广泛，前端开发的复杂度越来越高
3 旧版本的js中没有提供与模块（module）相关的内容

模块的概念

在js中，一个模块就是实现特定功能的文件（js文件）
遵循模块的机制，想要什么功能就加载什么模块
模块化开发需要遵循规范

模块化解决的问题

1 命名冲突
2 文件依赖（加载文件）
3 模块的复用
4 统一规范和开发方式

王鲜森_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门学习看这篇就可以

这里写自定义目录标题Vue -渐进式JavaScript框架介绍库和框架的区别LibraryFramework主要区别MVVM的介绍MVCMVVM组成优势对比Vue中的MVVM起步 - Hello VueVue实例数据绑定双向数据绑定 Vue two way data bindingVue双向绑定的实现动态添加数据异步DOM更新指令v-textv-htmlv-bindv-on事件修饰符.stop 阻止冒泡，调用 event.stopPropagation()v-modelv-forkey属性样式处理 cla
复制链接

扫一扫