vue基础教学（10）

最新推荐文章于 2022-09-18 16:58:04 发布

I`ivresse

最新推荐文章于 2022-09-18 16:58:04 发布

阅读量213

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/Taojia9958/article/details/125209499

版权

一、生命周期

	<body>
		<div id="app">
			<h2>{{msg}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						msg: '我是web2208班级',
						mg: 'web前端'
					}
				},
				/* template: ` <h2>我是中国人</h2>`,
				 render: function(createElement) {
					return createElement('div', {
						style: {
							width:'300px',
							height: '200px',
							background: '#f00'
						}
					}, [this.mg])
				}, */
				/* 	render:h=>h('div', {
							style: {
								width:'300px',
								height: '200px',
								background: '#f00'
							}
						}, [this.mg]), */
				beforeCreate() {
					console.log('beforeCreate');
					console.log(this.$el);
				},
				created() {
					console.log('created');
					console.log(this.$el);
				},
				beforeMount() {
					console.log('beforeMount');
					console.log(this.$el);
				},
				mounted() {
					console.log('mounted');
					console.log(this.$el);
				},
				beforeUpdate() {
					console.log('beforeUpdate');
				},
				updated() {
					console.log('updated');
				},
				beforeDestroy() {
					console.log('beforeDestroy');
				},
				destroyed() {
					console.log('beforeDestroy');
				}
			})
			/* vm.$mount('#app') */
		</script>
	</body>

二、模块化

1. 为什么要模块化

随着前端项目越来越大，团队人数越来越多，多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目，小明定义一个aaa.js，小张定义了一个bbb.js。

aaa.js

//小明开发
var name = '小明'
var age = 22

function sum(num1, num2) {
  return num1 + num2
}
var flag = true
if (flag) {
  console.log(sum(10, 20));
}

此时小明的sum是没有问题的。

bbb.js

//小红
var name = "小红"
var flag = false

此时小明和小红各自用各自的flag你变量没问题。

但是此时小明又创建了一个mmm.js

//小明
if(flag){
  console.log("flag是true")
}

在index.html页面导入这些js文件

  <script src="aaa.js" ></script>
  <script src="bbb.js" ></script>
  <script src="ccc.js" ></script>

此时小明知道自己在aaa.js中定义的flag是true，认为打印没有问题，但是不知道小红的bbb.js中也定义了flag为true，所以mmm.js文件并没有打印出“flag是true”。

这就是全局变量同名问题。

2. 使用导出全局变量模块解决全局变量同名问题

aaa.js

//模块对象
var moduleA = (function (param) {
  //导出对象
  var obj = {}
  var name = '小明'
  var age = 22

  function sum(num1, num2) {
    return num1 + num2
  }
  var flag = true
  if (flag) {
    console.log(sum(10, 20))
  }
  obj.flag=false
  return obj
})()

mmm.js

//小明
//使用全局变量moduleA
if(moduleA.flag){
  console.log("flag是true")
}

这样直接使用aaa.js导出的moduleA变量获取小明自己定义的flag。

3. CommonJS的模块化实现

CommonJS需要nodeJS的依支持。

aaa.js

var name = '小明'
var age = 22

function sum(num1, num2) {
  return num1 + num2
}
var flag = true
if (flag) {
  console.log(sum(10, 20))
}

// module.exports = {
//   flag : flag,
//   sum : sum
// }
//导出对象
module.exports = {
  flag,
  sum
}

使用module.exports = {}导出需要的对象。

mmm.js

//导入对象,nodejs语法,需要node支持,从aaa.js取出对象
var {flag,sum} = require("./aaa")

console.log(sum(10,20));

if(flag){
  console.log("flag is true");
}

使用 var {flag,sum} = require("./aaa")获取已经导出的对象中自己所需要的对象。

4. ES6的模块化实现

如何实现模块化，在html中需要使用type='module'属性。

  <script src="aaa.js" type="module"></script>
  <script src="bbb.js" type="module"></script>
  <script src="mmm.js" type="module"></script>

此时表示aaa.js是一个单独的模块，此模块是有作用域的。如果要使用aaa.js内的变量，需要在aaa.js中先导出变量，再在需要使用的地方导出变量。

4.1 直接导出

export let name = '小明'
import {name} from './aaa.js'
console.log(name)

./aaa.js表示aaa.js和mmm.js在同级目录。

如图打印结果。

4.2 统一导出

var age = 22
function sum(num1, num2) {
  return num1 + num2
}
var flag = true
if (flag) {
  console.log(sum(10, 20))
}
//2.最后统一导出
export {
  flag,sum,age
}
使用import {name,flag,sum} from './aaa.js'导入多个变量

import {name,flag,sum} from './aaa.js'

console.log(name)

if(flag){
  console.log("小明是天才");
}

console.log(sum(20,30));
使用{}将需要的变量放置进去

4.3 导出函数/类

在aaa.js中添加

//3.导出函数/类
export function say(value) {
  console.log(value);
}
export class Person{
  run(){
    console.log("奔跑");
  }
}
在mmm.js中添加

import {name,flag,sum,say,Person} from './aaa.js'

console.log(name)

if(flag){
  console.log("小明是天才");
}

console.log(sum(20,30));

say('hello')
const p = new Person();
p.run();
export default {
  flag,sum,age
}

4.4 默认导入 export default导出

//4.默认导入 export default
import aaa from './aaa.js'
console.log(aaa.sum(10,110));
注意：使用默认导出会将所有需要导出的变量打包成一个对象，此时导出一个对象，此时我在mmm.js中导入变量时候命名为aaa，如果要调用变量需要使用aaa.变量。
 使用import * as aaa from './aaa.js'统一全部导入

4.5 统一全部导入

// 5.统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.flag);
console.log(aaa.name);

三、单页面和多页面

单页面与多页面的区别
单页面：
第一次进入页面会请求一个HTML文件，刷新清除切换到其他页面，是JS销毁并重新渲染的过程，内容发生改变，但不会返回新的HTML文件，这种网站叫单页面网站（单页面应用）
原理：JS感知url的变化，可以动态地清除当前页面，然后挂载下一个页面的内容，由前端的路由控制切换，每次跳转都不需要请求新的html文件。
优点：页面切换较快。
缺点：首屏渲染较慢，SEO差。

多页面：
每次页面跳转的时候，后台服务器都会返回一个新的HTML 文件，这种类型叫多页面网站（多页面应用）
优点：首屏时间快，SEO效果好。
缺点：页面切换较慢。