Initialize scaffolding
- Install globally:
npm install -g @vue/cli
- Create project
vue create xxx
- Startup project
npm run serve
1. refs attribute
-
Used to register references (substitutes for id) to elements or components.
-
The application on the html tag obtains the real DOM element, and the application on the component tag is the component instance object (vc).
-
How to use:
打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx">...</School> 获取：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.vue'
export default {
name: 'App',
data(){
return{
msg: '努力学习Vue！'
}
},
components: {
School },
methods:{
showDOM(){
console.log(this.$refs.title)
console.log(this.$refs.btn)
console.log(this.$refs.sch)
}
}
}
</script>
<style>
</style>
2. Configuration item props
Function: Let the component receive data from the outside
- Pass data:
<Demo name="xxx"/>
- Receive data:
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props:{
name: String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props:{
name:{
type: String, //类型
required: true,//必要性
default:'老王' //默认值
}
}
Remarks:
propsIt is read-only. The bottom layer of Vue will monitorpropsyour modifications to . If modifications are made, a warning will be issued. If the business requirements really need to be modified, copypropsthe content of .datainto a copy of , and then modifydatathe data in .
There are several ways to receive name, age and gender:
//简单接收
props:['name','sex','age']
//接收的同时对数据进行类型限制
props:{
name: String,
age: Number,
sex: String
}
//接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制\
props:{
name:{
type: String, //name的类型是字符串
required: true //名字是必要的
},
age:{
type: Number, //age的类型是数值
default: 99 //不传的默认值
},
sex:{
type: String,
require: true
}
}
3. Mixing in the mixin
- Function: The configuration common to multiple components can be extracted into a mixed object.
- How to use:
第一步定义混合：
{
data(){...},
methods:{...},
....
}
第二步混入：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:['xxx']
Local mixin:
School.vue
<template>
<div>
<h2 @click="showName">学校名称:{
{
name}}</h2>
<h2>学校地址:{
{
address}}</h2>
</div>
</template>
<script>
//引入一个混合
import {
mixin} from '../mixin'
export default {
name: 'SchoolName',
data(){
return{
name:'哔哩哔哩',
address:'中国'
}
},
mixins:[mixin]
}
</script>
Student.vue
<template>
<div>
<h2 @click="showName">学生姓名:{
{
name}}</h2>
<h2>学生性别:{
{
sex}}</h2>
</div>
</template>
<script>
//引入一个混合
import {
mixin} from '../mixin'
export default {
name: 'StudentName',
data(){
return{
name:'张三',
sex:'男'
}
},
mixins:[mixin]
}
</script>
App.vue
<template>
<div>
<School/>
<student/>
</div>
</template>
<script>
// 引入 School 组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name: 'App',
components: {
School,Student},
}
</script>
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
// 关闭 vue 的生产提示
Vue.config.production = false
// 创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
mixin.js
//分别暴露
export const mixin = {
methods:{
showName(){
alert(this.name)
}
}
}
Global mixin:
Remove
School.vueandStudent.vueofimport {mixin} from '../mixin'as wellmixins:[mixin], and modify main.js
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
import {
mixin} from './mixin'
// 关闭 vue 的生产提示
Vue.config.production = false
Vue.mixin(mixin)
// 创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
Fourth, plug-in plugins
-
Function: used to enhance
Vue, -
Essence: An object containing the
installmethod ,installthe first parameter isVue, and the second and subsequent parameters are the data passed by the plugin user. -
Define the plugin:
对象.install = function (Vue, options) { //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxx }
Define plugins.js, configure the plugin:
plugins.js
export default {
install(Vue){
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义混入
Vue.mixin({
data(){
return {
x:100,
y:200
}
}
})
//给Vue原型上添加一个方法（vm 和 vc就都能用了）
Vue.prototype.hello = ()=>{
alert('你好')}
}
}
School.vue
<template>
<div>
<h2>学校名称:{
{
name | mySlice}}</h2>
<h2>学校地址:{
{
address}}</h2>
<button @click="test">点我测试一下hello方法</button>
</div>
</template>
<script>
export default {
name: 'SchoolName',
data(){
return{
name:'哔哩~~~~哔哩',
address:'中国'
}
},
methods:{
test(){
this.hello()
}
}
}
</script>
main.js
// 引入 Vue
import Vue from 'vue'
// 引入 App
import App from './App.vue'
//引入插件
import plugins from './plugins'
// 关闭 vue 的生产提示
Vue.config.production = false
//应用插件
Vue.use(plugins)
//创建 vm
new Vue({
el:'#app',
render: h => h(App)
})
5. Style scoped
- Function: Let the style take effect locally to prevent conflicts.
- Writing:
<style scoped>
School.vue
<style scoped>
.demo{
background-color: orange;
}
</style>
Student.vue
<style scoped>
.demo{
background-color: skyblue;
}
</style>
Adding scoped can prevent the naming conflict of styles. If not, only the styles introduced later can be used when the styles are renamed.
不积跬步无以至千里 不积小流无以成江海