學(xué)習(xí)鏈接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門(mén)到精通，本文對(duì)應(yīng)p61-p69，博客參考尚硅谷公開(kāi)筆記，補(bǔ)充記錄實(shí)操。
??初始化腳手架
??創(chuàng)建初體驗(yàn)
- Vue 腳手架是 Vue 官方提供的標(biāo)準(zhǔn)化開(kāi)發(fā)工具（開(kāi)發(fā)平臺(tái)）。
-
CLI：command line interface（目前已經(jīng)維護(hù)了，但也試一試）
-
全局安裝：
npm config set registry https://registry.npm.taobao.org-
npm install -g @vue/cli
-
創(chuàng)建過(guò)程
- 切換到要?jiǎng)?chuàng)建項(xiàng)目的目錄，然后使用
vue create xxxx命令創(chuàng)建項(xiàng)目。 - 啟動(dòng)項(xiàng)目：
npm run serve - 停止項(xiàng)目：
ctrl+C
- 切換到要?jiǎng)?chuàng)建項(xiàng)目的目錄，然后使用
??分析腳手架結(jié)構(gòu)
-
詳見(jiàn)講解，實(shí)操見(jiàn)真知
-
填坑，把上一節(jié)沒(méi)跑出來(lái)的代碼跑一下
- ??把對(duì)應(yīng)的地址鏈接調(diào)整后，運(yùn)行后出現(xiàn)如下報(bào)錯(cuò)：
- ①將School和Student對(duì)應(yīng)命名改為復(fù)合命名。
- ②package.json文件中的
eslintConfig，找到rules處，添加以下代碼即可解決"rules":{ "no-mixed-spaces-and-tabs":0 }
-
運(yùn)行結(jié)果
??關(guān)于render
- 與上一節(jié)最后一個(gè)小案例不同的是，Vue默認(rèn)創(chuàng)建的
main.js如下，且我在上述案例應(yīng)用時(shí)直接應(yīng)用了默認(rèn)生成的main.jsimport Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') -
render函數(shù)的本質(zhì)就是創(chuàng)建元素，也就是說(shuō)本質(zhì)是類(lèi)似于以下的函數(shù)：render(createElement){ return createElement('h1','你好啊') } //精簡(jiǎn)后就是: render: h => h('h1','你好啊') //也就是上邊的render: h => h(App) - 按原來(lái)的版本運(yùn)行了一下，會(huì)報(bào)錯(cuò)。解決辦法是，修改
import Vue from 'vue'為import Vue from 'vue/dist/vue'。原來(lái)引入的vue其實(shí)是殘缺版的vue（缺少了模板解析器），它無(wú)法解析template，標(biāo)簽類(lèi)型的template不受影響，也即.vue文件里的<template></template>不受影響。// 原來(lái)的寫(xiě)法 new Vue({ el:'#app', template:`<App></App>`, components:{App}, })
-
為什么要用殘缺版vue——更精簡(jiǎn)。
-
關(guān)于不同版本的Vue：
-
vue.js與vue.runtime.xxx.js的區(qū)別：-
vue.js是完整版的Vue，包含核心功能 + 模板解析器。 -
vue.runtime.xxx.js是運(yùn)行版的Vue，只包含核心功能，沒(méi)有模板解析器。
-
- 因?yàn)?code>vue.runtime.xxx.js沒(méi)有模板解析器，所以不能使用template配置項(xiàng)。需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容。
-
??查看默認(rèn)配置
- Vue腳手架隱藏了所有webpack相關(guān)的配置。
- 若想查看具體的webpack配置，要執(zhí)行
vue inspect > output.js，會(huì)生成output.js和vue.config.js（這里和教程不一樣，現(xiàn)在后者也會(huì)直接生成）。 - 使用
vue.config.js可以對(duì)腳手架進(jìn)行個(gè)性化定制，詳情見(jiàn)官網(wǎng)配置參考（不過(guò)一般誰(shuí)改哇[?_??]）。
??ref與props
后續(xù)代碼都在上述框架里修改，文內(nèi)不一定展示完整代碼。
??ref屬性
-
被用來(lái)給元素或子組件注冊(cè)引用信息（id的替代者）
-
應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
-
使用方式：
- 打標(biāo)識(shí)：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 獲?。?code>this.$refs.xxx
<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">點(diǎn)我輸出上方的DOM元素</button> <School ref="sch"/> </div> </template> <script> //引入School組件 import School from './components/School-Test' export default { name:'App', components:{School}, data() { return { msg:'歡迎學(xué)習(xí)Vue！' } }, methods: { showDOM(){ console.log(this.$refs.title) //真實(shí)DOM元素 console.log(this.$refs.btn) //真實(shí)DOM元素 console.log(this.$refs.sch) //School組件的實(shí)例對(duì)象（vc） } }, } </script>
- 打標(biāo)識(shí)：
??props配置項(xiàng)
-
功能：讓組件接收外部傳過(guò)來(lái)的數(shù)據(jù)
-
傳遞數(shù)據(jù)：
<Demo name="xxx"/> -
接收數(shù)據(jù)：
-
第一種方式（只接收）：
props:['name'] -
第二種方式（限制類(lèi)型）：
props:{name:String} -
第三種方式（限制類(lèi)型、限制必要性、指定默認(rèn)值）：
props:{ name:{ type:String, //類(lèi)型 required:true, //必要性 default:'老王' //默認(rèn)值 } }
備注：props是只讀的，Vue底層會(huì)監(jiān)測(cè)你對(duì)props的修改，如果進(jìn)行了修改，就會(huì)發(fā)出警告，若業(yè)務(wù)需求確實(shí)需要修改，那么請(qǐng)復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。
-
-
傳的時(shí)候：
<Student name="youyi" sex="女" :age="20"/>（App.vue）<template> <div> <Student name="youyi" sex="女" :age="20"/> </div> </template> <script> import Student from './components/Student-Test' export default { name:'App', components:{Student} } </script> -
接收的時(shí)候：
props，必須要寫(xiě)類(lèi)似于微信轉(zhuǎn)賬確認(rèn)（Student-Test.vue）<template> <div> <h1>{{msg}}</h1> <h2>學(xué)生姓名：{{name}}</h2> <h2>學(xué)生性別：{{sex}}</h2> <h2>學(xué)生年齡：{{myAge+1}}</h2> <button @click="updateAge">嘗試修改收到的年齡</button> </div> </template> <script> export default { name:'Student-Test', data() { console.log(this) return { msg:'我是一個(gè)尚硅谷的學(xué)生', //props優(yōu)先級(jí)更高，先接收 //和后續(xù)update以及上述+1對(duì)應(yīng)，可以規(guī)避vue報(bào)錯(cuò)和錯(cuò)亂 myAge:this.age } }, methods: { updateAge(){ this.myAge++ } }, //簡(jiǎn)單聲明接收(傳過(guò)來(lái)了你要確認(rèn)接收) // props:['name','age','sex'] //接收的同時(shí)對(duì)數(shù)據(jù)進(jìn)行類(lèi)型限制（不該收的不收） /* props:{ name:String, age:Number, sex:String } */ //接收的同時(shí)對(duì)數(shù)據(jù)：進(jìn)行類(lèi)型限制+默認(rèn)值的指定+必要性的限制 props:{ name:{ type:String, //name的類(lèi)型是字符串 required:true, //name是必要的 }, age:{ type:Number, default:99 //默認(rèn)值 }, sex:{ type:String, required:true } } } </script>
??混入
-
功能：可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象（提取公因數(shù)）。
-
使用方式：
-
第一步定義混合：
{ data(){....}, methods:{....} .... } -
第二步使用混入：
- 全局混入：
Vue.mixin(xxx) - 局部混入：
mixins:['xxx']
- 全局混入：
-
-
Student-Test.vue<template> <div> <h2 @click="showName">學(xué)生姓名：{{name}}</h2> <h2>學(xué)生性別：{{sex}}</h2> </div> </template> <script> // 局部 // import {hunhe,hunhe2} from '../mixin' export default { name:'Student-Test', data() { return { name:'右一', sex:'女' } }, mounted() { // 混合的mounted優(yōu)先，原有的mounted在后 console.log('你好?。。tudent(ver)') }, // mixins:[hunhe,hunhe2] } </script> -
School-Test.vue<template> <div> <h2 @click="showName">學(xué)校名稱(chēng)：{{name}}</h2> <h2>學(xué)校地址：{{address}}</h2> </div> </template> <script> //引入一個(gè)hunhe // import {hunhe,hunhe2} from '../mixin' export default { name:'School-Test', data() { return { name:'尚硅谷', address:'北京', x:666 } }, mounted() { console.log('你好?。。chool(ver)') }, // mixins:[hunhe,hunhe2], } </script> -
App.vue<template> <div> <School/> <hr> <Student/> </div> </template> <script> import School from './components/School-Test' import Student from './components/Student-Test' export default { name:'App', components:{School,Student} } </script> -
mixin.jsexport const hunhe = { methods: { showName(){ alert(this.name) } }, mounted() { // 混合的mounted是全局性的，什么都要摻和一下 // 混合的mounted優(yōu)先，原有的mounted在后 console.log('你好??！') }, } export const hunhe2 = { data() { return { //數(shù)據(jù)混合作為一個(gè)補(bǔ)充，不干擾原有數(shù)據(jù) x:100, y:200 } }, } -
main.js//引入Vue import Vue from 'vue' //引入App import App from './App.vue' import {hunhe,hunhe2} from './mixin' //關(guān)閉Vue的生產(chǎn)提示 Vue.config.productionTip = false Vue.mixin(hunhe) Vue.mixin(hunhe2) //創(chuàng)建vm new Vue({ el:'#app', render: h => h(App) })
??插件
-
功能：用于增強(qiáng)Vue。
-
本質(zhì)：包含install方法的一個(gè)對(duì)象，install的第一個(gè)參數(shù)是Vue，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
-
定義插件：
對(duì)象.install = function (Vue, options) { // 1. 添加全局過(guò)濾器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加實(shí)例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx } -
使用插件：
Vue.use()
-
plugins.jsexport default { install(Vue,x,y,z){ console.log(x,y,z) //全局過(guò)濾器 Vue.filter('mySlice',function(value){ return value.slice(0,4) }) //定義全局指令 Vue.directive('fbind',{ //指令與元素成功綁定時(shí)（一上來(lái)） bind(element,binding){ element.value = binding.value }, //指令所在元素被插入頁(yè)面時(shí) inserted(element,binding){// eslint-disable-line no-unused-vars element.focus() }, //指令所在的模板被重新解析時(shí) update(element,binding){ element.value = binding.value } }) //定義混入 Vue.mixin({ data() { return { x:100, y:200 } }, }) //給Vue原型上添加一個(gè)方法（vm和vc就都能用了） Vue.prototype.hello = ()=>{alert('你好啊')} } } -
Student.Test.vue<template> <div> <h2>學(xué)生姓名：{{name}}</h2> <h2>學(xué)生性別：{{sex}}</h2> <input type="text" v-fbind:value="name"> </div> </template> <script> export default { name:'Student-Test', data() { return { name:'lala', sex:'女' } }, } </script> -
School-Test.vue<template> <div> <h2>學(xué)校名稱(chēng)：{{name | mySlice}}</h2> <h2>學(xué)校地址：{{address}}</h2> <button @click="test">點(diǎn)我測(cè)試一個(gè)hello方法</button> </div> </template> <script> export default { name:'School-Test', data() { return { name:'尚硅谷12345', address:'北京', } }, methods: { test(){ this.hello() } }, } </script> -
App.vue同上。 -
main.js//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入插件 import plugins from './plugins' //關(guān)閉Vue的生產(chǎn)提示 Vue.config.productionTip = false //應(yīng)用（使用）插件 Vue.use(plugins,1,2,3) //創(chuàng)建vm new Vue({ el:'#app', render: h => h(App) })
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-829299.html
??scoped樣式
- 作用：讓樣式在局部生效，防止沖突。
-
寫(xiě)法：
<style scoped>
-
School.Test.vue<template> <div class="demo"> <h2 class="title">學(xué)校名稱(chēng)：{{name}}</h2> <h2>學(xué)校地址：{{address}}</h2> </div> </template> <script> export default { name:'School-Test', data() { return { name:'尚硅谷atguigu', address:'北京', } } } </script> <style scoped> .demo{ background-color: skyblue; } </style> -
Student.Test.vue<template> <div class="demo"> <h2 class="title">學(xué)生姓名：{{name}}</h2> <h2 class="sex">學(xué)生性別：{{sex}}</h2> </div> </template> <script> export default { name:'Student-Test', data() { return { name:'lala', sex:'女' } } } </script> <style lang="less" scoped> .demo{ background-color: pink; .sex{ font-size: 40px; } } </style> -
App.vue<template> <div> <h1 class="title">你好啊</h1> <School/> <Student/> </div> </template> <script> import Student from './components/Student-Test' import School from './components/School-Test' export default { name:'App', components:{School,Student} } </script> <style scoped> .title{ color: red; } </style>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-829299.html
- ps：腳手架不支持less，需要額外安裝
npm install less-loader，安裝好之后run即可（和視頻不同，現(xiàn)在已經(jīng)兼容了）
到了這里，關(guān)于Vue | （三）使用Vue腳手架（上） | 尚硅谷Vue2.0+Vue3.0全套教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
