【VUE】vue.js、vue.min.js、vue.runtime.esm.js

p63 render函数

（1）vue.runtime.common.js

• webpack负责把.vue文件 转换成 .js 文件，让浏览器能够识别
  
• vue项目汇总文件夹下【\node_modules\vue\dist】
• 带有runtime的都是运行时vue使用的，运行时vue有个最重要的特点就是：都把模板解析器（.vue文件 转换为 .js文件等）给拿掉了，少了1/3的内容。
  
• esm：如果你用了 ES6 模块化去引入的话，就用了这个版本（vue.runtime.esm.js）的vue
  
• 如果使用的是普通ES模板，就使用的是vue.runtime.common.js文件

---

（2）解析器

• package.json 中的 vue-template-compiler 解析器 负责解析 .vue 文中的 template 模板的
• 要是在vm（在main.js文件）中写 template 都没人给你解析！ 所以你要用render
  

p64 修改默认配置

（1）启动vue工程的入口：main.js

终端中输入：vue inspect > output.js ，暴露 output.js 文件
output.js 文件提示报错，那是因为这里面只写了个{ }包含内容，可以写成 const a = { } 来防止报错

• 搜索查看工程入口：
  这只是配置好了，输出一下给你看的，不能随便改。
  

（2）public里 不能修改的配置

• 这五个框里面的内容不能修改，配置文件直接寻找这些路径：
  

（3）vue.config.js 中修改默认配置文件

官网配置说明

• 复制pages的代码到其中，module.exports 是common js的暴露，不是ES6的暴露
  vue最终会把这个vue.config.js 文件输送给 webpack 解析，但是webpack是基于Node.js 的，Node.js采用的模块化是 common js.
  

更改了默认配置，就使用更新的配置。不改就使用默认配置

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 
      title: 'Index Page',
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

（4）关闭语法检查：lintOnSave: false

p65 ref属性（点击一个div 弹出另一div信息）

（1）被用来给元素或子组件注册引用信息
（2）vue中的 ref 相当于 原生的 id 属性
（3）应用在html标签上获取的是真实的DOM元素，应用在组件标签上获取的是VueComponent（vc）
（4）使用方式
打标签：
获取：this.$refs.xxx

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this);
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

p66 props配置

（1）过属性绑定，绑定到子组件身上
（2）接收来自父组件的变量

在标签里面写标签属性

// App.vue
<template>
	<div>
		<!-- 加一冒号 "18"中的就是表达式 -->
		<Student name="李四" sex="女" :age="18"/>
		<Student name="李四" sex="女" age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'
	export default {
		name:'App',
		components:{Student}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Student
<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2> 
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)  //VueComponent 构造函数，存在age name sex 属性
			return {
				msg: '我是一个尚硅谷的学生',
				myAge: this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53