Vue学习笔记
提示：上一节点击一下链接
目录
第一章 模块与组件、模块化与组件化
原生存在的问题：
- 依赖关系混乱，不好维护。
- 代码复用率不高。
模块：一个js文件。
组件：局部功能代码和资源的集合。
模块化：当应用以模块编写，那么这个应用就是模块化的应用。
组件化：当应用以组件方式编写，那么这个应用就是组件化的应用。
非单文件组件：
一个文件中包含多个组件。
单文件组件：
一个文件中只包含一个组件。
第二章 非单文件组件-创建student组件
<body>
<div id="root">
<!-- 组件标签，可以使用单标签自闭和，但是单标签需要脚手架支持 -->
<student></student>
<x></x>
</div>
<script>
const student = Vue.extend({ //组件不能写el:
name:'Student', //指定开发者工具下的组件名，不影响其他编写
template:`<div><h2>{{name}}</h2></div>`,//组件结构
data(){ //data必须使用函数式
return{
name:'张三456'
}
}
})
const x = Vue.extend({
template:`<div><h2>全局组件</h2></div>`
})
//注册全局组件
Vue.component('x',x) //参数1是使用名，参数2是组件名，不能简写
new Vue({
el:'#root',
components:{ //注册局部组件
student //完整写法:局部使用名：组件名，当使用名和组件名相同时，只写一个是等价效果
}
})
</script>
</body>
1.1、组件名的命名规则
| 一个单词组成 | |
|---|---|
| student | 全小写 |
| Student | 首字母大写（推荐） |
| 多个单词组成 | |
|---|---|
| my-student | -横杠分隔 |
| MyStudent | 首字母大写,但必须有脚手架支持（推荐） |
- 不能与HTML标签冲突，(h1，H1，p，P…都不成立)
1.2、简写
//完整写法
const student = Vue.extend({
template:`...`,
data(){...}
})
//简写
const student = {
template:`...`,
data(){...}
}
1.3、组件的嵌套
<body>
<div id="root">
</div>
<script>
//三级组件
const Student = Vue.extend({
name:'Student',
template:`
<div>
<h3>{{name}}</h3>
</div>
`,
data(){
return{
name:'张三',
}
}
})
//二级组件
const Sclool = Vue.extend({
name:'Sclool',
template:`
<div>
<h3>{{name}}</h3>
<h3>{{address}}</h3>
<Student></Student>
</div>
`,
components:{
Student
},
data(){
return{
name:'家里蹲大学',
address:'上海'
}
}
})
// 一级组件
const App = Vue.extend({
template:`
<div>
<Sclool></Sclool>
</div>
`,
components:{
Sclool
}
})
//实例对象
new Vue({
el:'#root',
template:`<App></App>`,
components:{App}
})
</script>
</body>
注意事项：
- 子组件必须在父组件前定义
1.4、VueComponent()
- 每一个组件实际上是一个VueComponent()构造函数，是由Vue.extend()生成的
- 每次执行组件标签，会自动调用VueComponent()构造函数，且每次都是一个全新的构造函数
老师教课特殊点：VueComponent都简写为vc，方便教学，但其他地方不认
1.5、一个重要的内置关系
- 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
- 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法
第三章 单文件组件(重点)
| vs-code | |
|---|---|
| 高亮插件： | vetur |
| 模板快捷键： | <v+Enter |
| HBuilder X | |
|---|---|
| 高亮： | （自带） |
| 模板快捷键： | vb+Enter |
3.1、安装脚手架
- 第一步安装node.js：
https://nodejs.org/zh-cn/ - 第二步dom内输入配置淘宝镜像：
npm config set registry http://registry.npm.taobao.org - 第三步dom内输入：
npm install -g @vue/cli - 第四步切换到指定文件夹dom下：
vue create xxx - 选择vue版本
- 当前路径下启动项目：
npm run serve
3.2、render()函数
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:'#root',
//简写
render: h => h(App)
//完整写法
// render(h) {
// return h(App)
// }
})
vue.js 与 vue.runtime.xxx.js的区别：
- vue.js 是完整版的 Vue，包含：核心功能+模板解析器
- vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render函数接收到的createElement 函数去指定具体内容
3.3、脚手架默认配置的修改
- 不要改的文件名都可以改，在脚手架根目录下的vue.config.js里面修改配置。要么修改，要么别写，空的pages属性会报错。
- 详见配置参考 | 配置参考 | CLI
module.exports = {
pages: {
index: {
//入口
entry: 'src/index/main.js',
// 模板来源
template: 'public/index.html',
}
},
// 关闭语法检查
lineOnSave:false
}
3.4、ref属性
<template>
<div>
<h3 ref="x1">这是一个h3标签</h3>
<button @click="dome">点我获取上方DOM元素</button>
<MyStudent ref="y1"></MyStudent>
</div>
</template>
<script>
import MyStudent from './components/MyStudent'
export default {
name:'App',
components:{
MyStudent
},
methods:{
dome(){
console.dir(this.$refs.x1) //真实DOM
console.dir(this.$refs.y1) //MyStudent 组件实例对象
console.dir(this.$refs) //所以ref属性标识的标签...
}
}
}
</script>
总结
- 用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象
3.5、props
props 中的数据不能修改，如果要改变，可以使用data中的数据接收props的数据，改变data数据实现
props 的数据比 data 中的数据优先级更高；
props 中的数据名不能与属性名冲突
//IsStudent子组件
<template>
<div>
<h3>{{name}}</h3>
<h3>{{myAge}}</h3>
<button @click="myAge++">点我年龄加1</button>
</div>
</template>
<script>
export default {
name:'IsStudent',
data() {
return {
myAge:this.age
}
},
//简单声明
// props:['name','age'],
//声明时对数据类型进行验证
// props:{
// name:String,
// age:Number
// }
//声明时对数据类型进行验证+必填限制+默认值
// props:{
// name:{
// type:String,
// required:true //说明name必填，不填会控制台报错，无输出
// },
// age:{
// type:Number,
// default:99 //当没有从父组件输入age时，默认为99
// }
// }
//事件处理 回顾
// methods:{
// dome(){
// this.myAge++
// }
// }
}
</script>
//App父组件
<template>
<div>
<IsStudent name="张三" :age="18"/><hr/>
<IsStudent name="李四" :age="19"/><hr/>
<IsStudent name="王老五"/><hr/>
</div>
</template>
<script>
import IsStudent from './components/IsStudent.vue'
export default {
name:'App',
components:{
IsStudent
}
}
</script>
3.5、mixin 混入（混合）
作用：把多个组件共用的配置提取成一个混入对象
使用方式：
第一步：定义混入：
export const xxx = {//分别暴露
data(){...},
methods:{...}
}
第二部：引入混合：
import {xxx} from './...'
第三步：配置混合
Vue.mixin(xxx) //全局混入，直接在mian.js下引用+配置
mixins:[xxx，xxx2,...] //局部混入
注意：
- 混入相同属性时，以原有的为主，混入的那一个属性不奏效。
- 生命周期函数，先输出混入中的，都会输出。
3.6、插件
作用：
使用方式：
第一步：定义插件：
export default= {//默认暴露
install(Vue){
//过滤器
//全局自定义指令
//全局混入
//添加实例方法
}
}
第二部：引入：
import xxx from './...'
第三步：应用插件：
Vue.use(xxx)
注意：
- 引入和应用都要在Vue前进行
3.7、scoped样式
作用：让样式在局部生效，防止取名冲突
<style scoped>
...
<style>
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
