寧波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