系列文章目录
提示:阅读本章之前,请先阅读目录
文章目录
前言
Vue组件
<div id="root">
<school-view></school-view>
<Student></Student>
<Student />
<student />
</div>
const school = Vue.extend({
template: `
<h1>{{name}}</h1>
`,
// 这里写成函数式,是为了让组件被引用时,都是独立的数据
data() {
return {
name: "xiaoxueschool"
}
}
})
const student = Vue.extend({
template: `
<h2>{{name}} - {{age}}</h2>
`,
data() {
return {
name: "xiaoming",
age: 18
}
}
})
const vm = new Vue({
el: "#root",
components: {
'school-view': school,
student
}
})
// 注册全局组件
const global = Vue.extend({
name: "myNameIsGlobal",
template: `
<div>hello</div>
`
})
Vue.component('hello', hello)
// 其实可以不写Vue.extend,因为在注册组件的时候,vue会自动判断,如果不是一个extend对象,就会自动帮你调用一次extend
const global = {
name: "myNameIsGlobal",
template: `
<div>hello</div>
`
}
App 嵌套
<div id="root"></div>
const a = Vue.extend({
template: `
<div>Hello i am is a</div>
`
})
const b = Vue.extend({
template: `
<div>Hello i am is b</div>
// 我这里嵌套着a
`,
components: { a }
})
const c = Vue.extend({
template: `
<div>Hello i am is c</div>
`
})
const app = Vue.extend({
template: `
<b></b>
<c></c>
`,
components: { b, c }
})
const vm = new Vue({
template: `
<app></app>
`,
components: { app }
})
VueComponent
组件本质上是一个VueComponent构造函数,他会出现在vm的children
每一个组件,VueComponent都是全新的
因为从源码上,是通过 var = function VueComponent(){},然后return var返回回来的
Vue内置关系,原型对象
Vue.prototype.x = 99
const school = Vue.component({
template: `
<div>hello</div>
<button @click="inputValue">输出x</button>
`,
methods: {
inputValue() {
// 经过Vue原型链,自动找到Vue的prototype的x值
console.log(this.x)
}
}
})
const vm = new Vue({
template: `
<school></school>
`,
components: {
school
}
})
Vue单文件项目结构
index.html 网站根文件
<html>
<header>
<title>xmf的Vue学习</title>
</header>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
main.js Vue的js主函数,引入App.vue
import App from './App.vue'
const vm = new Vue({
el: "#root",
template: `
<App></App>
`,
components: {
App
}
})
App.vue 这个是Vue项目的启动vue文件,入口
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from './School.vue'
import Student from './Student.vue'
export default {
components: {
School,
Student
}
}
</script>
School.vue 组件
<template>
<div>
<div>大家好,我是{{schoolName}}</div>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
schoolName: "Smobee Scholl"
}
},
}
</script>
<style>
</style>
Student.vue 组件
<template>
<div>
<div>大家好,我是{{studentName}}</div>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
studentName: "smobee"
}
},
}
</script>
<style>
</style>
Vue-cli 脚手架
第一步,安装好npm
第二步,配置镜像
npm config set registry https://registry.npm.taobao.org
第三步,安装vue-cli
npm install -g @vue/cli
第四步,创建项目
vue create xxxxx
第五步,启动项目
npm run serve
关于脚手架vue-cli,默认用的vue版本
module": “dist/vue.runtime.esm.js”
用的是阉割版的vue,没有模板解析的功能
所以,会报错
解决方法:
- 使用完整版的vue
- 使用render函数
当然,可以简写
- 配置vue.config.js
输出Vue的配置项
vue inspect > output.js
ref 属性
props 属性
组件外,如果要传递数字
<School name="hello" :age="18+1"></School>
并且,里面的组件,是不可以修改传递进来的prop的
可以通过data赋值,比如name
data() {
return {
// 因为props是优先加载的,所以这里可以直接拿到props的数据
myName: this.name
}
}
mixin 混入
自定义插件
style的scoped
npm view webpack versions
查看某个插件的全部版本
安装less-loader指定版本
使用
统计函数,reduce
const list = [1,2,3,4,5,6]
// pre是上一次的返回值,num是每条数据,list中有几条数据,这里就会执行几次,,后面那个0参数,是作为初始值
const count = list.reduce((pre, num)= > {
return pre + (num% 2 === 0 ? 1 : 0)
}, 0)
上面的简写
const count = list.reduce((pre, num)= > return pre + (num% 2 === 0 ? 1 : 0), 0)
自定义事件
<School @hello="handleHello">
</School>
methods: {
handleHello(name) {
console.log("我收到了name")
},
handleHello(name,age,sex) {
console.log("我收到了name")
},
// 利用解包,多参数
handleHello(name, ...params) {
console.log("我收到了params,并且是一个数组", params)
}
}
// 里面的子组件是通过this.$emit("自定义事件名",传参)来触发
// 灵活写法,通过ref,来绑定事件
<Student ref="student"></Student>
mouted() {
this.$refs.student.$on("hello", this.handleHello)
// 只触发一次
this.$refs.student.$once("hello", this.handleHello)
},
methods: {
handleHello() {
console.log("我被触发了")
}
}
解绑自定义事件
// 解绑单个
this.$off("hello")
// 解绑多个
this.$off(["hello", "demo"])
// 全部解绑
this.$off()
自定义事件注意
<Student @click="onClick"></Student>
//这样是无法触发click,因为也是会把click当做自定义事件
// 解决方法1
this.$emit("click")
// 解决方法2
<Student @click.native="onClick"></Student>
全局事件总线
消息订阅与发布
$nextTick Dom更新完后调用
动画效果 transition
appear:第一次就加载动画
动画组 transition-group
Animate 动画库
Vue配置代理
默认插槽
css样式,写在外面一层也可以,写在里面一层也可以,最终都是解析完,插到插槽里面
具名插槽