Inicializar andamios
- Instalar globalmente:
npm install -g @vue/cli
- Crear proyecto
vue create xxx
- Proyecto de inicio
npm run serve
1. atributo de referencia
-
Se utiliza para registrar referencias (sustitutos de id) a elementos o componentes.
-
La aplicación en la etiqueta html obtiene el elemento DOM real, y la aplicación en la etiqueta del componente es el objeto de instancia del componente (vc).
-
Cómo utilizar:
打标识：<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. Accesorios de elementos de configuración
Función: Permitir que el componente reciba datos desde el exterior
- Pasar datos:
<Demo name="xxx"/>
- Recibir datos:
第一种方式（只接收）：
props:['name']
第二种方式（限制类型）：
props:{
name: String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props:{
name:{
type: String, //类型
required: true,//必要性
default:'老王' //默认值
}
}
Observaciones:
propses de solo lectura. La capa inferior de Vue controlarápropssus modificaciones a . Si se realizan modificaciones, se emitirá una advertencia. Si los requisitos comerciales realmente necesitan modificarse, copiepropsel contenido de .dataen una copia de , y luego modificardatalos datos en .
Hay varias formas de recibir el nombre, la edad y el sexo:
//简单接收
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. Mezclando en el mixin
- Función: la configuración común a varios componentes se puede extraer en un objeto mixto.
- Cómo utilizar:
第一步定义混合：
{
data(){...},
methods:{...},
....
}
第二步混入：
（1）全局混入：Vue.mixin(xxx)
（2）局部混入：mixins:['xxx']
Mezcla local:
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)
}
}
}
Mezcla global:
Eliminar
School.vueyStudent.vuedeimport {mixin} from '../mixin'tambiénmixins:[mixin], y modificar 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)
})
Cuarto, complementos de complemento
-
Función: utilizado para mejorar
Vue, -
Esencia: un objeto que contiene el
installmétodo ,installel primer parámetro esVuey el segundo y los siguientes parámetros son los datos pasados por el usuario del complemento. -
Defina el complemento:
对象.install = function (Vue, options) { //1.添加全局过滤器 Vue.filter(...) //2.添加全局指令 Vue.directive(...) //3.配置全局混入 Vue.mixin(...) //4.添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxx }
Defina plugins.js, configure el complemento:
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. Ámbito de estilo
- Función: Deje que el estilo surta efecto localmente para evitar conflictos.
- Escribiendo:
<style scoped>
School.vue
<style scoped>
.demo{
background-color: orange;
}
</style>
Student.vue
<style scoped>
.demo{
background-color: skyblue;
}
</style>
Agregar scoped puede evitar el conflicto de nombres de estilos. De lo contrario, solo los estilos introducidos más adelante se pueden usar cuando se cambia el nombre de los estilos.
不积跬步无以至千里 不积小流无以成江海