寧波seo網(wǎng)站服務(wù)如何推銷自己的產(chǎn)品
🥔:總有一段付出了沒有回報的日子 是在扎根
更多Vue知識請點擊——Vue.js
VUE2-Day6
- 配置腳手架
- 腳手架結(jié)構(gòu)
- render函數(shù)
- vue.js與vue.runtime.xxx.js的區(qū)別
- 引入render函數(shù)
- 為什么要引入殘缺的vue呢？
- 腳手架默認配置
- ref屬性
- props配置項
- 傳遞數(shù)據(jù)
- 接收數(shù)據(jù)
- 注意點
- mixin配置項
- 1、定義混合
- 2、使用混合
- 插件
- 定義插件
- 使用插件`Vue.use()`
- scoped樣式
配置腳手架
Vue CLI（Vue Command Line Interface）Vue腳手架，Vue官方提供的標準化開發(fā)工具（開發(fā)平臺）
安裝node.js——可以查看此教程
第一步：輸入命令npm config set registry=http://registry.npm.taobao.org 配置鏡像站，全局安裝@vue/cil ，命令行輸入npm install -g @vue/cli。命令行輸入vue，不報錯及安裝成功
第二步：切到要創(chuàng)建項目的目錄，然后使用vue create name命令創(chuàng)建項目
第三步：進入新建的name項目文件目錄中，輸入命令：npm run serve
得到的第一個url即是你的內(nèi)置服務(wù)器，第二個是同局域網(wǎng)的其他人可以使用
腳手架配置完畢
如果要停止工程:連按兩次Ctrl+C即可。
腳手架結(jié)構(gòu)
├── node_modules
├── public
│ ├── favicon.ico: 頁簽圖標
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態(tài)資源
│ │ └── logo.png
│ │── component: 存放組件
│ │ └── HelloWorld.vue
│ │── App.vue: 匯總所有組件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 應(yīng)用包配置文件
├── README.md: 應(yīng)用描述文件
├── package-lock.json：包版本控制文件
其中
- main.js
// 該文件是整個項目的入口文件//引入Vue
import Vue from "vue";
//引入App組件,它是所有組件的父組件
import App from "./App.vue";// 關(guān)閉vue的生產(chǎn)提示
Vue.config.productionTip = false;//創(chuàng)建Vue實例對象:vm
new Vue({//render的中文意思是渲染render: (h) => h(App),
}).$mount("#app"); //此處相當于el:"#app"，在上節(jié)講過- index.html:
<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8" /><!-- 針對IE瀏覽器的一個特殊配置，含義時讓IE瀏覽器以最高的渲染幾倍渲染頁面 --><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" /><!-- 配置網(wǎng)頁標題 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 當瀏覽器不支持js時noscript中的元素就會被渲染 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't workproperly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>
render函數(shù)
如果使用ES6的模塊化引入Vue，那么默認引入的vue.runtime.esm.js，其中esm是ES6 module簡寫
如果我們使用之前的方法：
// 該文件是整個項目的入口文件//引入Vue（精簡版）
import Vue from 'vue'
//引入App組件,它是所有組件的父組件
import App from './App.vue'// 關(guān)閉vue的生產(chǎn)提示
Vue.config.productionTip = false//創(chuàng)建Vue實例對象:vm
new Vue({el: "#root",template: `<App></App>`,components: { App },
});
此時控制臺會報錯，錯誤信息顯示殘缺了模板解析器，建議我們使用render函數(shù)或者使用完整版Vue：
同時也意味著我們在這一行代碼import Vue from 'vue'引入的vue是殘缺版（精簡版）的，它殘缺了模板解析器，因此不能解析template。
vue.js與vue.runtime.xxx.js的區(qū)別
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是運行版(殘缺版)的Vue，只包含：核心功能，沒有模板解析器。
因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template這個配置項，需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容。為什么其他的.vue文件里寫template標簽就行呢？那是因為template寫的是標簽，而且在組件里，魷魚西專門兒又搞了個庫去專門解析組件里的模板。
引入render函數(shù)
//引入Vue
import Vue from 'vue'
//引入App組件,它是所有組件的父組件
import App from './App.vue'//創(chuàng)建Vue實例對象:vm
new Vue({el: '#app',//render的中文意思是渲染render: h => h(App),
})
render中文意思是渲染，render函數(shù)其實就扮演了vue中解析template模板的那塊兒代碼，把組件的內(nèi)容解析一下，渲染到頁面上。
（1）正常的render函數(shù)：
render: function (createElement) {// console.log(typeof createElement); //createElement是一個函數(shù)return createElement(App);//return createElement('h1','你好啊');}
（2）render函數(shù)寫成箭頭函數(shù)：
render: h => h(app)
為什么要引入殘缺的vue呢？
vue.js是完整版的Vue，由核心和模板解析器組成。但是模板解析器占用的內(nèi)存太大（占三分之一vue），開發(fā)完成后并不需要模板解析器。（模板解析器就像雇的貼瓷磚的工人，工人干完活兒就可以離開了，瓷磚就是那個Vue核心，就一直在那待著了）
腳手架默認配置
vue.config.js配置文件
1、使用vue inspect > output.js可以查看到Vue腳手架的默認配置。
2、使用vue.config.js可以對腳手架進行個性化定制，詳情見：https://cli.vuejs.org/zh
ref屬性
被用來給元素或子組件注冊引用信息（id的替代者）
應(yīng)用在html標簽上獲取的是真實DOM元素，應(yīng)用在組件標簽上是組件實例對象（vc）
使用方式：
1、打標識：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2、獲取：this.$refs.xxx
<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM" ref="btn">點我輸出上方DOM元素</button><School ref="sch" id="school" /></div>
</template><script>
import School from './components/School.vue'
export default {name: 'App',data() {return {msg: '歡迎學(xué)習(xí)Vue',}},components: { School },methods: {showDOM() {//輸出真實DOM元素console.log(this.$refs.title)console.log(this.$refs.btn)//輸出組件實例對象vcconsole.log(this.$refs.sch)//如果這么寫，拿到的是School組件里template中的內(nèi)容，相當于給根的div加了個id="school"console.log(document.getElementById('school'))},},
}
</script>
props配置項
功能：讓組件接收外部傳過來的數(shù)據(jù)。
傳遞數(shù)據(jù)
App.vue:
<template><div><!-- 傳遞數(shù)據(jù) --><!-- 加個單項數(shù)據(jù)綁定":"，引號里面就不是字符串了，而是表達式了 --><Student name="potato" sex="女" :age="18" /><Student name="tomato" sex="女" /></div>
</template><script>
import Student from './components/Student.vue'
export default {name: 'App',data() {return {}},components: { Student },
}
</script>
注意點：age="18"和:age="18"是不一樣的，加了個“:”相當于加了個單向數(shù)據(jù)綁定。沒加數(shù)據(jù)綁定時，無論雙引號里面寫什么，都被認為是字符串；加了數(shù)據(jù)綁定后，雙引號里面的就是js表達式。
接收數(shù)據(jù)
接收數(shù)據(jù)有多種方式，如：
- 簡單接收，用的比較多
- 接收的同時對數(shù)據(jù)類型進行限制
- 接收的同時對數(shù)據(jù)：進行類型限制+默認值指定+必要性限制
例：
Student.vue:
<template><div class="student"><h1>{{ msg }}</h1><h2>學(xué)生姓名：{{ name }}</h2><h2>學(xué)生性別：{{ sex }}</h2><h2>學(xué)生年齡：{{ age }}</h2></div>
</template><script>
export default {name: 'Student',data() {return {msg: '我是一個學(xué)生',}},//1、簡單接收// props: ['name', 'sex', 'age'],//2、接收的同時對數(shù)據(jù)類型進行限制// props:{// name:String,// age:Number,// sex:String// }//3、接收的同時對數(shù)據(jù)：進行類型限制+默認值指定+必要性限制props: {name: {type: String, //name的類型是字符串required: true, //name是必要的},age: {type: Number,default: 99, //默認值為99},sex: {type: String,required: true,},},
}
</script><style>
.student {background-color: skyblue;
}
</style>
注意點
1、在傳遞數(shù)據(jù)的時候如果想實現(xiàn)正確收取數(shù)值數(shù)據(jù)，并且不想把props寫那么復(fù)雜，可以加個v-bind:age=“18”，這樣的話引號里邊就不會是字符串了，而是當成js表達式執(zhí)行，返回的結(jié)果就是數(shù)值
2、props中的內(nèi)容優(yōu)先級最高，先接這里邊的數(shù)據(jù)放vc里，再去讀data里的數(shù)據(jù)，若data中數(shù)據(jù)有重復(fù)則優(yōu)先使用props中的數(shù)據(jù)，不會覆蓋
3、props是只讀的，Vue底層會監(jiān)測你對props的修改，如果進行了修改，就會發(fā)出警告（能修改成功但是不建議改）。
若業(yè)務(wù)需求確實需要修改，那么請復(fù)制props的內(nèi)容到data中一份（data中新建個名字），然后去修改data中的數(shù)據(jù)，同時把data中的東西呈現(xiàn)到頁面上去，具體看下邊的代碼
<template><div><h1>{{ msg }}</h1><h2>學(xué)生名稱：{{ name }}</h2><h2>學(xué)生性別：{{ sex }}</h2><!-- 實現(xiàn)年齡+1 要加v-bind把引號里的東西變成js表達式，否則是字符串+1--><!-- <h2>學(xué)生年齡：{{ age*1+1 }}</h2> 強制類型轉(zhuǎn)換一下--><h2>學(xué)生年齡age：{{ age + 1 }}</h2><h2>學(xué)生年齡myAge：{{ myAge + 1 }}</h2><button @click="updateAge">嘗試修改收到的年齡</button></div>
</template><script>
export default {name: 'Student',data() {return {msg: '我是一個學(xué)生',//想要修改age，就要用一個新的變量myAge來接收傳進來的值//然后頁面顯示myAge就能實現(xiàn)修改，props里的東西是只讀的myAge: this.age// name: 'potato',// age: 18,// sex: '女'}},methods: {updateAge() {// this.age++; //會報錯但是能改但是不建議改this.myAge++;}},//props這個配置項就類似微信轉(zhuǎn)賬，App那邊的標簽里傳過來，這邊得接一下子//props中的內(nèi)容優(yōu)先級最高，先接這邊的數(shù)據(jù)放vc里，再去讀data，若有重復(fù)不會覆蓋props: ['name', 'age', 'sex']
}
</script>
mixin配置項
功能：可以把多個組件共用的配置提取成一個混入對象
1、定義混合
定義在另一個js文件中，這里定義在mixin.js中
export const hunhe = {methods: {showName() {alert(this.name)},},mounted() {console.log('混合里的mounted優(yōu)先調(diào)用')},
}
2、使用混合
全局混入：在main.js里寫Vue.mixin(xxx)，全局混合不用引入，自動就搞到所有東西上了
局部混入：先在相應(yīng)的組件引入，然后mixins:['xxx']
<template><div class="student"><h1>{{ msg }}</h1><h2>學(xué)生姓名：{{ name }}</h2><h2>學(xué)生性別：{{ sex }}</h2><h2>學(xué)生年齡：{{ age }}</h2><button @click="showName">點我顯示學(xué)生姓名</button></div>
</template><script>
// 引入一個mixin（混合）
import { hunhe } from '../mixin'
export default {name: 'Student',data() {return {name: 'potato',sex: '女',age: 18,msg: '我是一個學(xué)生',}},// 使用mixinmixins: [hunhe],mounted() {console.log('組件里單獨寫mounted比mixin中的mounted后調(diào)用')},
}
</script><style>
.student {background-color: pink;
}
</style>
注意：
1、混合里的mounted優(yōu)先調(diào)用，組件里單獨寫mounted比mixin中的mounted后調(diào)用
2、組件里原來有的數(shù)據(jù)，在混合中寫不會覆蓋原數(shù)據(jù)；組件里原來沒有的數(shù)據(jù)，混合中寫會添加過去和原數(shù)據(jù)合并
插件
功能：用于增強Vue
本質(zhì)：包含install方法的一個對象，install的第一個參數(shù)是Vue，第二個以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
定義插件
可以在另一個js中（這里在plugins.js）配置插件，然后通過import引入到main.js中
// 只有一個，直接默認
export default {install(Vue, x, y, z) {console.log(Vue) //第一個參數(shù)是Vue構(gòu)造函數(shù)console.log(x, y, z) //后面的參數(shù)是使用者傳進來的東西123//1.定義一個全局過濾器Vue.filter('mySlice', function (val) {return val.slice(0, 4) //返回值別忘了})//2.定義一個全局自定義指令,元素默認獲取焦點Vue.directive('fbind', {bind(el, binding) {el.value = binding.value},inserted(el) {el.focus()},update(el, binding) {el.value = binding.value},})//3.定義一個全局混合,不用引入就能給所有的vm和vcVue.mixin({data() {return {x: 1,y: 2,}},})//4.給Vue的原型對象添加實例方法，vm和vc都能用Vue.prototype.hello = () => {alert('hello!')}},
}
- 注：關(guān)于這里的過濾器、自定義指令、原型等知識可以倒回之前的文章復(fù)習(xí)——vue.js
使用插件Vue.use()
use的作用就是幫忙調(diào)用插件對象中的install方法，而且還可以傳一些參數(shù)給install函數(shù)。
//在main.js中引入插件并起個名兒
import plugins from './plugins';
//使用插件,要在new Vue之前使用
Vue.use(plugins, 1, 2, 3);
scoped樣式
作用：讓樣式在局部生效，防止沖突。
寫法：<style scoped>
注意：App.vue的樣式一般不寫scoped，因為App.vue里面樣式一般是所有組件都可以使用的。
指定使用 less寫法：<style lang="less">，不寫默認css
備注：
查看webpack所有版本 當前項目文件目錄>npm view webpack versions