腳手架結構

目錄結構

這里的package.json，存放著我們去執行npm run serve 或是npm run build的腳本文件

package-lock.json中存放著我們使用的外部包的版本類型，相當于maven

src下的main.js是整個項目的入口文件

src下的components用于存放組件，這里的assets用于存放靜態圖片資源

在public中.ico就是頁簽圖標，這里的index.html就是頁面的html

其中的代碼為

使用命令行使用vue inspect > output.js，就會生成一個含全部配置文件中的js文件

在vue.config.js中，我們可以配置一些相關的配置項

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

module.exports = defineConfig({

? transpileDependencies: true

})

module.exports = {

?

? page:{

? ? index:{

? ? ? ?//配置入口

? ? ? ?entry:'src/main.js'

? ? },

? },

? //關閉語法檢查

? lintOnSave:false

}

?

?

red屬性

<template>

? <div>

? ? <h1 v-text="msg" ref="title"></h1>

? ? <button @click="showDom" ref="btn">點我輸出上面的Dom</button>

? ? <School ref="sch"></School>

? ? <school id="sch1"></school>

? </div>

</template>

<script>

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

export default {

? ? name:'App',

? ? components:{School},

? ? data(){

? ? ? ? return{

? ? ? ? ? ? ?msg:'歡迎'

? ? ? ? }

? ? ? ?

? ? },

? ? methods:{

? ? ? ? showDom(){

? ? ? ? ? ? console.log(this.$refs) ? ? ? ? ? ? ? ? ? ? ? ? //App所有的帶有ref的標簽

? ? ? ? ? ? console.log(this.$refs.title) ? ? ? ? ? ? ? ? ? //獲得title的標簽

? ? ? ? ? ? console.log(this.$refs.sch) ? ? ? ? ? ? ? ? ? ? //獲得School這個組件的Dom

? ? ? ? ? ? console.log(document.getElementById('sch1')) ? ?//獲得School組件的里面的<div>元素

? ? ? ? }

? ? }

}

</script>

<style>

</style>

輸出為

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Props使用

如果我們需要對組件內的值進行手動傳輸而不是使用{{}},就需要使用props進行接收

App.vue進行數據傳入

<template>

? <div>

<student name="李四" sex="女" :age="18"></student>

<hr>

? </div>

</template>

<script>

import Student from './components/Student.vue'

export default {

? ? name:'App',

? ? components:{Student},

? ?

}

</script>

使用Student.vue進行數據接收

<template>

? <div >

? ? <h1>{{msg}}</h1>

? ? <h2>學生姓名:{{name}}</h2>

? ? <h2>學生性別:{{sex}}</h2>

? ? <h2>學生年齡:{{age+1}}</h2>

? </div>

</template>

<script>

export default {

? ? name:'School',

? ? data(){

? ? ? ? return{

? ? ? ? ? msg:'hello',

? ? ? ? }

? ? },

? // ?// props:["name","sex","age"] ?簡單接收

? // ?props:{ ? ? ? ? ? ? ? ? ? ? ?//接受的同時對類型限制

? // ? name:String,

? // ? age:Number,

? // ? sex:String

? // ?}

?

? props:{ ? ? ? ? ? ? //接收的同時對數據進行類型的限制+默認值的指定+必要性的指定

? ? name:{

? ? ? type:String, ? ?//name的類型是字符串

? ? ? required:true ? //數據是必須的

? ? },

? ? age:{

? ? ? type:Number, ? ?//age的類型是數字

? ? ? default:99 ? ? ?//如果不傳，默認就是99

? ? },

? ? ?sex:{

? ? ? type:String, ? ?//sex的類型是字符串

? ? ? required:true ? //數據是必須的

? ? },

? }

}

</script>

<style>

</style>

最終的效果為

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

mixin混合

如果組件中有一部分代碼說是結構是通用的，我們就可以使用混合，將一致的配置或數據添加到一個mimix.js中來作為使用

混合分為局部混合與全局混合，局部混合在組件內引入即可，全局混合在main.js中配置即可

如mixin.js混合文件中

export const hunhe={

? ? methods:{

? ? ? showName(){

? ? ? ? alert(this.name)

? ? ? }

? ? },

? ? mounted () {

? ? ? ? console.log('混合中的mounted')

? ? }

}

export const hunhe2={

? ?data(){

? ? return {

? ? ? ? x:100,

? ? ? ? y:200

? ? }

? ?}

}

在兩個有相同配置類的組件中

Student.vue

<template>

? <div >

? ? <h2 @click="showName">學生姓名:{{name}}</h2>

? ? <h2>學生性別:{{sex}}</h2>

? </div>

</template>

<script>

//引入一個局部混合

// import {hunhe,hunhe2} from '../mixin'

export default {

? ? name:'Student',

? ? data(){

? ? ? ? return{

? ? ? ? ? name:'李四',

? ? ? ? ?sex:"男"

? ? ? ? }

? ? },

? ? mounted(){

? ? ? console.log('Student組件中的mouted')

? ? },

? ? // mixins:[hunhe,hunhe2] //將其加入到組件中

}

</script>

<style>

</style>

在School.vue中

<template>

? <div >

? ? <h2 @click="showName">學校名稱:{{name}}</h2>

? ? <h2>學校地址:{{addr}}</h2>

? </div>

</template>

<script>

//引入一個局部混合

// import {hunhe,hunhe2} from '../mixin'

export default {

? ? name:'School',

? ? data(){

? ? ? ? return{

? ? ? ? ? name:'尚硅谷',

? ? ? ? ? addr:'北京'

? ? ? ? }

? ? },

? ? // mixins:[hunhe,hunhe2] ?將其加入到組件中

}

</script>

<style>

</style>

在能配置統一的混合main.js配置類中

import Vue from 'vue'

import App from './App.vue'

import { hunhe,hunhe2 } from './mixin' //引入全局混合

Vue.config.productionTip=false

Vue.mixin(hunhe) ?//配置全局混合

Vue.mixin(hunhe2) //配置全局混合

new Vue({

? ? el:'#app',

? ? render:h=>h(App)

})

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

自定義插件

我們可以自己定義一個插件，來起到一個插件就能實現Vue功能的增強，通過引入插件之后，整個項目就都會具備插件中定義的功能或使用其中的方法

pligins.js插件代碼

export default{

? ? install(Vue){

? ? ? ? //全局過濾器

? ? ? ? Vue.filter('mySlice',function(value){

? ? ? ? ? ? return value.slice(0,4)

? ? ? ? })

? ? ? ? //自定義指令

? ? ? ? Vue.directive('fbind',{

? ? ? ? ? ? //指令與元素成功綁定時

? ? ? ? ? ? ? ? bind(element,binding){

? ? ? ? ? ? ? ? ? ? ? ? console.log('bind')

? ? ? ? ? ? ? ? ? ? ? ? element.value=binding.value

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? //指令所在元素被插入頁面時

? ? ? ? ? ? ? ? ? ? inserted(element,binding){

? ? ? ? ? ? ? ? ? ? ? ? console.log('inserted')

? ? ? ? ? ? ? ? ? ? ? ? element.focus();

? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? //指令所在的模板被重新解析時

? ? ? ? ? ? ? ? ? ? update (element,binding) {

? ? ? ? ? ? ? ? ? ? ? ? console.log('updated')

? ? ? ? ? ? ? ? ? ? ? ? element.value=binding.value

? ? ? ? ? ? ? ? ? ? }

? ? ? ? })

? ? ? ? //自定義混入

? ? ? ? Vue.mixin({

? ? ? ? ? ? data(){

? ? ? ? ? ? ? ? return {

? ? ? ? ? ? ? ? ? ? x:100,

? ? ? ? ? ? ? ? ? ? y:200

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ?}

? ? ? ? })

? ? ? ? //給vue原型上添加一個方法(vm和vc就能使用了)

? ? ? ? Vue.prototype.hello = ()=>{alert('你好')}

? ? }

}

在main.js中引入插件

import Vue from 'vue'

import App from './App.vue'

Vue.config.productionTip=false

//引入插件

import pligins from './pligins'

//應用插件

?Vue.use(pligins)

new Vue({

? ? el:'#app',

? ? render:h=>h(App)

})

在Student.vue中使用插件

<template>

? <div >

? ? <h2 >學生姓名:{{name}}</h2>

? ? <h2>學生性別:{{sex}}</h2>

? ? <input type="text" v-fbind:value="name">

? ? <button @click="test">點我出發一個hello方法</button>

? </div>

</template>

<script>

export default {

? ? name:'Student',

? ? data(){

? ? ? ? return{

? ? ? ? ? name:'李四',

? ? ? ? ?sex:"男"

? ? ? ? }

? ? },

? ? methods:{

? ? ? test(){

? ? ? ? this.hello()

? ? ? }

? ? }

}

</script>

<style>

</style>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Scoped樣式

我們在多個組件中配置樣式的時候，如果出現樣式同名的情況下，就會出現樣式相串的情況

就需要在不同的樣式下使用scoped來進行修飾

Student.vue中的代碼

<template>

? <div class="demo">

? ? <h2 ?class="title">學生姓名:{{name}}</h2>

? ? <h2>學生性別:{{sex}}</h2>

? </div>

</template>

<script>

export default {

? ? name:'Student',

? ? data(){

? ? ? ? return{

? ? ? ? ? name:'李四',

? ? ? ? ?sex:"男"

? ? ? ? }

? ? }

}

</script>

<style scoped>

.demo{

? background-color: orange;

}

</style>

School.vue代碼

<template>

? <div class="demo">

? ? <h2 class="title">學校名稱:{{name }}</h2>

? ? <h2>學校地址:{{addr}}</h2>

? </div>

</template>

<script>

export default {

? ? name:'School',

? ? data(){

? ? ? ? return{

? ? ? ? ? name:'尚硅谷atguigu',

? ? ? ? ? addr:'北京'

? ? ? ? }

? ? }

}

</script>

<style scoped>

.demo{

? background: skyblue;

}

</style>

如果我們有整個項目都要使用的樣式，將其配置到App.vue中即可

<template>

? <div>

<student ></student>

<hr>

<school></school>

<hr>

? </div>

</template>

<script>

import Student from './components/Student.vue'

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

export default {

? ? name:'App',

? ? components:{Student, School},

? ?

}

</script>

<style > ? ?

/* 配置全局樣式 */

? .title{

? ? color:red

? }

</style>

效果為
?