Vue 学习总结笔记
Posted IT_Holmes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 学习总结笔记相关的知识，希望对你有一定的参考价值。
文章目录
- 1. render 函数
- 2. 修改Vue Cli脚手架的默认配置
- 3. ref属性(被用来给元素或子组件注册引用信息(id的替代者))
- 4. props 配置项(父传子)
- 5.mixin混入(混合) mixins配置项
- 6. Vue的 插件
- 7. scoped样式
- 8. style标签的lang属性
- 9. 组件化编码流程(通用)
- 10. 初级案例演示
1. render 函数
1.1 为什么正常情况下的写法不能生效？
首先，先说正常情况下，应该是这样操作：
//创建Vue的实例对象
new Vue(
//指定容器app
el:"#app",
template:`<App></App>`,
components:
App
)
但是在Vue脚手架中，它会报错：
换句话说，导入的Vue文件有问题！其实Vue的js文件有很多版本，只不过我们导入的Vuejs文件是一个精简版(缺少部分功能的Vue)。
而上面的vue.runtime.esm.js文件，就残缺了模板解析器，没有了模板解析器就没法解析template中的内容了。
1.2 使用完整版的vue.js来解决没有模板解析器的问题
完整版的vue.js，在第三方库的dist下面。
这样我们就直接导入完整版的vue.js就可以直接运行项目了，也并不会报错。
这样确实可以解决，但是不会被推荐的！因为我们要用render函数配合vue默认的js文件操作。
1.3 使用render函数来解决没有模板解析器的问题
render函数很关键！它会得到一个参数叫做createElement参数，这个参数是一个专门用来创建元素的函数。
import Vue from 'vue'
// import App from './App.vue'
Vue.config.productionTip = false
new Vue(
el:"#app",
//render函数有一个参数：createElement也是一个函数,作用就是专门用来创建元素的。
render(createElement)
console.log(typeof createElement);
//例如：我们返回一个createElement创建的h1标签
console.log(createElement('h1','你好啊'));
return createElement('h1','你好啊');
)
换句话说，vue默认导入的vuejs文件是没有模板解析器的，而render中的createElement参数帮他做了这件事情。
然后，将render函数进行简化一下，得到的就是vue开始的那种样式：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue(
el:"#app",
//render函数有一个参数：createElement也是一个函数,作用就是专门用来创建元素的。
//render(createElement)
// console.log(typeof createElement);
// //例如：我们返回一个createElement创建的h1标签
// console.log(createElement('h1','你好啊'));
// return createElement('h1','你好啊');
//
//函数式写成箭头函数，一个参数，一个返回值都可以省略括号或中括号。然后将createElement换成h字符就完成最简化版了。
render:h=>h(App)
//有人疑惑这里为什么不是'App'，因为dom中没有App标签。但是我们上面引入了App变量，这样就可以读取了。
)
Vue的分为两部分一个是核心文件 (什么生命周期等等的)， 一个是模板解析器。
模板解析占很大一部分体积(大约三分之一)，如果将模板解析器移除，仅仅用render函数操作就非常方便操作。省空间省代码。
Vue当中默认使用的是vue_runtime.esm.js文件，runtime就是运行时Vue；esm是ES module，就是如果使用ES6语法我们可以用这个包操作。
我们的组件中有template标签，既然我们设置的vuejs文件没有解析器，那么怎么解析这种标签类型的template呢？Vue也给它指定了template标签解析器，这个解析器专门用来解析.vue文件中的template标签。
总结：
2. 修改Vue Cli脚手架的默认配置
Vue脚手架的配置文件是有的，只不过隐藏到了别的地方而已。
Vue脚手架隐藏了所有的webpack相关的配置，若想看具体的webpack配置，可以执行：vue inspect > output.js命令。
- 该命令会将vue脚手架的所有配置文件整合到output.js文件中。
以下五个部分文件名是不能随便改的，这是这是vue脚手架的硬性要求。
官方也给出了能够修改vue脚手架配置的相关信息：
对于这种配置的相关内容，都是先用现查就可以。这么多配置不可能记住的咱们只需要改的时候去官方看看操作和配置就可以了。
关闭语法检查，这个语法检车确实烦人，想关闭也可以配置vue脚手架环境。
脚手架文件结构：(感觉不错，就放到这里了)
3. ref属性(被用来给元素或子组件注册引用信息(id的替代者))
正常我们原生的js获取dom元素使用的getelementbyid方法。
<template>
<div>
<h1 v-text="msg" id="title"></h1>
<button @click="showDOM">点我输出上方的DOM元素</button>
<School/>
<School/>
</div>
</template>
<script>
import School from "./components/School.vue"
export default
name:'App',
components:School,
data()
return
msg:"欢迎学习Vue！"
,
methods:
showDOM()
//正常我们打印dom元素使用原生的document.getElementById("title")
console.log(document.getElementById("title"));
</script>
<style>
</style>
ref属性：
- 被用来给元素或子组件注册引用信息(id的替代者)。
- 应用在html标签上获取的是真实dom的元素，应用在组件标签上是组件实例对象。
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM">点我输出上方的DOM元素</button>
<!-- 如果一个组件上面添加了ref，再js中拿到的信息是该组件的VueComponent实例对象 -->
<School ref="sch"/>
</div>
</template>
<script>
import School from "./components/School.vue"
export default
name:'App',
components:School,
data()
return
msg:"欢迎学习Vue！"
,
methods:
showDOM()
//这里的this指向的是当前组件的Vuecomponent函数实例对象。
console.log(this)
//Vuecomponent实例对象中有一个$refs属性，里面就包含着ref的信息。
console.log(this.$refs)
console.log(this.$refs.title)
console.log(this.$refs.sch)
</script>
<style>
</style>
4. props 配置项(父传子)
4.1 props 第一种方式：(只接受)
props配置项使用的演示：
<template>
<div class="school">
<h1>msg</h1>
<h2>学生姓名: name</h2>
<h2>学生性别: sex</h2>
<h2>学生年龄: age</h2>
<button @click="show">按钮</button>
</div>
</template>
<script>
export default
name:"Student",
data()
return
msg:"清华大学的学习",
,
props:['name','sex','age'],
methods:
show()
console.log(this)
</script>
<style>
.school
background-color: gray;
</style>
这样可以直接在父组件中定义，相关属性的配置：
<template>
<div>
<Student name="李四" sex="女" age="18"/>
<Student name="王五" sex="男" age="20"/>
</div>
</template>
<script>
import Student from "./components/Student.vue"
export default
name:'App',
components:Student,
</script>
<style>
</style>
如果我们想要在子组件加工一下，会出现下面情况：
可以做乘法，但是不推荐：
正常在vue的操作方式，使用v-bind来解决，简写为 '： ’ 号 。
正常情况下，属性里面的值，就是一种字符串形式。
但是，如果给属性加上了v-bind指令，那么这个属性里面的值，就会被作为js表达式来处理。这样也就完美解决了相关操作。
对比一下：
4.2 props 第二种方式：(限制类型)
我们还可以限制接受类型：
4.3 props 第三种方式：(限制类型，限制必要性，指定默认值)
更加完整的写法如下：
<template>
<div class="school">
<h1>msg</h1>
<h2>学生姓名: name</h2>
<h2>学生性别: sex</h2>
<h2>学生年龄: age+1</h2>
<button @click="show">按钮</button>
</div>
</template>
<script>
export default
name:"Student",
data()
return
msg:"清华大学的学习",
,
methods:
show()
console.log(this)
,
//props:['name','age','sex'] // 简单声明接受
//接受的同时对属性进行类型限制
/* props:
//使用这种方式来限制类型
name:String,
age:Number,
sex:String
*/
//接受的同时对数据：进行类型限制+默认值的指定+必要性的限制
props:
name:
type:String, //name的类型是字符串
required:true, // 名字是必须要传入的
,
age:
type:Number,
default:99, //设置默认值99
,
sex:
type:String,
required:true,
</script>
<style>
.school
background-color: gray;
</style>
vue的指定是不要修改props配置项中的属性：
但是如果想要修改props配置项的内容，有需求要求这么做！我们可以通过一个data配置项中的属性来间接操作就好了。
<template>
<div class="school">
<h1>msg</h1>
<h2>学生姓名: name</h2>
<h2>学生性别: sex</h2>
<h2>学生年龄: myAge</h2>
<button @click="updateAge">修改学生年龄</button>
</div>
</template>
<script>
export default
name:"Student",
data()
return
msg:"清华大学的学习",
//通过加一个myAge来达到修改页面属性的效果。
myAge:this.age
,
methods:
updateAge()
this.myAge = 99
,
//props:['name','age','sex'] // 简单声明接受
//接受的同时对属性进行类型限制
/* props:
//使用这种方式来限制类型
name:String,
age:Number,
sex:String
*/
//接受的同时对数据：进行类型限制+默认值的指定+必要性的限制
props:
name:
type:String, //name的类型是字符串
required:true, // 名字是必须要传入的
,
age:
type:Number,
default:99, //设置默认值99
,
sex:
type:String,
required:true,
,
</script>
<style>
.school
background-color: gray;
</style>
注意事项：
5.mixin混入(混合) mixins配置项
5.1 组件中的mixins配置项(局部混入)
mixin混入的作用：可以把多个组件共用的配置提取成一个混入对象处理。
mixin的效果就是如下图：
在外部创建一个js文件：
//分别暴露一下
export const mixin =
methods:
showName()
alert(this.name)
,
mounted()
console.log("我是外部js的mounted")
export const mixin2 =
data()
return
x:100,
y:200
之后，由mixins配置项引入：
<template>
<div class="school">
<h2 @click="showName">学生姓名: name</h2>
<h2>学生性别: sex</h2>
</div>
</template>
<script>
//引入一个minin.js文件的minin(分别暴露)
import mixin,mixin2 from '../mixin.js'
export default
name:"Student",
data()
return
name:"张三",
sex:"男"
,
mixins:[mixin,mixin2],
mounted()
console.log("我是组件的mounted")
</script>
<style>
.school
background-color: gray;
</style>
</script>
<style>
.school
background-color: gray;
</style>
注意：
- 如果设定data中的内容，是以组件中的data数据为主，没有就以mixin文件的内容引入。
- 如果是像mounted这样的钩子函数，会将组件中和外部js文件中的狗子函数整合到一起使用！(顺序是外部js先执行，之后是组件。)
5.2 在main.js全局配置(全局混入)
全局混合是直接在main.js中进行配置：直接通过Vue.mixin(xxx)来全局配置了。
import Vue from "vue"
import App from "./App.vue"
import mixin,mixin2 from "./mixin.js"
Vue.config.productionTip = false;
Vue.mixin(mixin)
Vue.mixin(mixin2)
new Vue(
el:'#app',
render:h=>h(App)
Vue3 学习总结笔记 (十四)