vue2脚手架

最新推荐文章于 2024-08-03 10:41:18 发布

bucketNiuNiu

最新推荐文章于 2024-08-03 10:41:18 发布

阅读量546

点赞数

分类专栏： vue 前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_36596869/article/details/125413274

版权

本文详细介绍了Vue2的脚手架搭建过程，包括文件夹结构、组件通信的各种方式，如props、事件总线、Vuex等。同时，讲解了Vue2中的插槽、mixin混入、过渡效果、路由、缓存管理和状态管理等内容，是学习Vue2开发的重要参考资料。

摘要由CSDN通过智能技术生成

父-》子传值（父组件给子组件传值，值优先级高，传的值不要直接修改）

流程

main.js-->app.vue->component文件夹的组件

文件夹结构

src文件夹

main.js:入口文件

import Vue from 'vue'

import App from './App.vue'

// 关闭生产提示

Vue.config.productionTip = false

// 创建vue实例对象

new Vue({

//残缺版无解析引擎 vue.js为完整版 vue.runtime··.js 为运行的核心

// 调用render渲染必须有返回值参数是创建元素的函数

// render（createElement）{return createElement("标签名",'填充值')}

render: h => h(App),

}).$mount('#app')

app.vue 组件的丞相

public文件夹

index.php

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">



<meta http-equiv="X-UA-Compatible" content="IE=edge">



<meta name="viewport" content="width=device-width,initial-scale=1.0">



<link rel="icon" href="<%= BASE_URL %>favicon.ico">



<title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>



<noscript>

<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

</noscript>



<div id="app"></div>



</body>

</html>

配置

//查看配置文件

  vue inspect>output.js

  //自定义配置文件，在src文件夹同级下建vue.config.js 写配置

  const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

// 关闭代码检查

lintOnSave:false

})

ref 属性

<template>

<div>





<h1 ref="gets">{ {ha}}</h1>

<button @click="show">点我</button>

<School ref="school" />

</div>

</template>

<script>

import School from './components/School.vue'

export default {

data() {

return {

ha: '欢迎',

};

},

components:{

School

},

methods: {

show(){

console.log(this.$refs.gets)

console.log(this.$refs.school)

}

},

}

</script>

传值

父-》子传值（父组件给子组件传值，值优先级高，传的值不要直接修改）

App.vue

<School :name = "11" ref="school" />

School.vue 组件

export default {

data(){

return {msg:"哈哈",name1:this.name+100}

},

name:"School",

// 接受传进来的参数赋到vc中，不可修改

/* props:['name'] */

// 接受数据对数据类型限制

/* props:{

  name:Number

} */

// 接到的值不要直接修改，可以间接修改（中间变量）

// 接到的值优先data中的值使用

props:{

  name:{

    try:Number,

    required:true,

    default:23,

  }

}

}

子组件给父组件传值

间接方法

array.reduce()，遍历数组，让元素执行指定方法）

父组件

tan(){

alert('我被点了')

}

子组件

<template>

<div class="school">

{ {msg}}

<button @click="demo1">发送学校</button>

<button @click="del">解绑事件</button>

</div>

</template>

<script>

export default {

name:"School",

data() {

return {

msg:"盂县一中"

}

},

methods: {

demo1(){

//触发该vc的自定义事件，由父组件进行绑定

this.$emit('school',this.msg,1,2,3)

},

del(){

// 解绑组件自定义事件

this.$off(['school'])

},

},

}

</script>

<style scoped>

.school{

background-color:bisque;

}

</style>>

任意组件传值（全局事件总线）

main.js

// 引入核心

import Vue from 'vue'

// 引入组件

import App from './App.vue'

// 关闭生产提示

Vue.config.productionTip = false

new Vue({

el:"#app",

//残缺版无解析引擎 vue.js为完整版 vue.runtime··.js 为运行的核心

// 调用render渲染必须有返回值参数是创建元素的函数

// render（createElement）{return createElement("标签名",'填充值')}

render:h=>h(App),

beforeCreate(){

// 将VM作为VC放到VUE的原型上解析标签时才会自动实例化VC

Vue.prototype.$bus = this

}

})

school.vue

<template>

<div class="school">

{ {msg}}

<button @click="demo1">发送学校</button>

<button @click="del">解绑事件</button>

</div>

</template>

<script>

export default {

name:"School",

data() {

return {

msg:"盂县一中"

}

},

mounted(){

//在bus上绑定并监听事件的触发需要自动绑定

this.$bus.$on('brother',(val)=>{

console.log(val,123)

})

},

methods: {

demo1(){

//触发该vc的自定义事件，由父组件进行绑定

this.$emit('school',this.msg,1,2,3)

},

del(){

// 解绑组件自定义事件

this.$off(['school'])

},

},

beforeDestroy() {

// 解绑VC上的事件

this.$bus.$off("brother")

},

}

</script>

<style scoped>

.school{

background-color:bisque;

}

</style>>