尚硅谷vue学习笔记
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><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
}
}
(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>
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>
// 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>