一村视、普通網(wǎng)頁中使用Vue（Vue基礎(chǔ)學習）
- 使用
<script></script>標簽引入vue的包 - 頁面中創(chuàng)建一個容器（id為app的div）
- 通過
new Vue創(chuàng)建Vue的vm實例
二屋灌、webpack工程中使用Vue——組件
-
npm i vue -S安裝Vue的包辑奈，入口JS導入vue的包import Vue from 'vue'。
1、使用普通網(wǎng)頁使用Vue的方式
- 頁面創(chuàng)建容器寞忿，定義組件模板對象，
new Vue創(chuàng)建Vue實例顶岸，components注冊組件腔彰。
此時運行會報錯，因為導入的是runtime-only的Vue包辖佣，不是最全的（普通網(wǎng)頁導入的是全的）霹抛。
import Vue from 'vue'和var Vue = require('vue')查找規(guī)則一樣：找項目根目錄node_moudules文件夾，根據(jù)引用時的包名查找文件夾vue凌简，在vue文件夾中找到一個 package.json 的包的配置文件，此配置文件中找到main屬性（制定了此包在被加載import/require時的入口文件）恃逻。
其中雏搂，同目錄下的 vue.js 才是網(wǎng)頁直接導入時的最全的包。 - 可以修改Vue的配置文件 package.json 的 main 屬性指向 vue.js 最全文件
"main": "dist/vue.js"寇损；或import導入時直接指定vue.js最全文件import Vue from '../node_modules/vue/dist/vue.js'凸郑；或者在 webpack.config.js 配置文件對象中加resolve屬性（優(yōu)雅一些）。
module.exports = {
resolve : {
alias:{ //修改Vue被導入時包的路徑
'vue$':'vue/dist/vue.js' //導入的包是以vue結(jié)尾矛市，則取找此js文件
}
}
}
2芙沥、直接runtime-only
- 創(chuàng)建 .vue 文件（在src目錄創(chuàng)建，和main.js同級浊吏，測試用）而昨，這是一個純粹的vue組件。webpack中推薦使用.vue這個模板文件定義組件找田。分三部分歌憨，
<template></template>組件的html代碼；<script></script>邏輯墩衙；<style></style>樣式务嫡。 -
npm i vue-loader vue-template-compiler -D。webpack 無法打包 .vue 文件漆改，則需要安裝相關(guān)的第三方loader幫助把vue文件解析成JS文件心铃。 - webpack.config.js 配置文件增加匹配規(guī)則，vue-loader 15+都是需要伴生 VueLoaderPlugin挫剑。
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
plugins:[
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module:{
rules:[
{
test:/\.vue$/, //匹配.vue文件
use:'vue-loader'
}
]
}
}
- main.js 使用 import 引入此vue組件去扣。
import login from './login.vue'
則就得到一個組件的模板對象 login（和直接定義一個模板對象差不多）。
- 如果還是使用components注冊組件樊破，然后頁面標簽引入（傳統(tǒng)厅篓、vue基礎(chǔ)學習形式）秀存，還是會報runtime-only的錯誤。Vue結(jié)合webpack使用羽氮，想通過vue實例渲染一個組件到頁面或链，只能用render函數(shù)實現(xiàn)。
import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '測試'
},
render: c => c(login)
})
三档押、導入模塊和向外暴露成員
- Node.js澳盐，向外暴露成員：
module.exports = {}
exports
- Node.js，導入模塊（成員）：
const 名稱= require('模塊標識符');
- ES6令宿，向外暴露成員：
export default //在一個模塊中叼耙，只允許向外暴露一次，可以用任意變量接收
export //可以向外暴露多個成員粒没，只能使用 {} 接收（按需接收筛婉，嚴格按暴露變量名稱接收，也可別名）
//這兩種可以同時使用
測試：新建一個test.js癞松，向外暴露成員
var info = {
name: 'qiurx',
age: '24'
}
export default info
export var title = '標題'
export var content = '呵呵'
- ES6爽撒，通過規(guī)范形式，導入/導出模塊：
import 模塊名 from '模塊標識符'
import '表示路徑'
測試：在main.js用import導入test.js响蓉，拿到暴露的對象（導入名稱自定）
import test,{ title,content as happy} from './test.js'
console.log(test); //{name: "qiurx", age: "24"}
console.log(title); //標題
console.log(happy); //呵呵
四硕勿、.vue文件定義data/methods
<template>
<div>
<h1>登陸組件——{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
//組件中的data指向函數(shù)
return { msg: "123" };
},
methods: {
show() {
console.log("調(diào)用了login.vue的方法");
}
}
};
</script>
<style>
</style>
五、使用vue-router
-
npm i vue-router -S枫甲，安裝路由的包源武。 - 在模塊化工程中（webpack等），必須通過
Vue.use()明確安裝路由功能（script標簽不需要）想幻。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
- 創(chuàng)建一個App.vue組件粱栖，import導入，render渲染組件脏毯。
- 創(chuàng)建兩個組件（.vue）查排，import導入并創(chuàng)建路由對象，掛載到vue實例抄沮。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//導入App組件
import app from './App.vue'
//導入登陸注冊組件
import login from './main/login.vue'
import register from './main/register.vue'
//創(chuàng)建路由對象
var router = new VueRouter({
routes:[
{
path:'/login',
component:login
},{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: '#app',
data: {
},
render: c => c(app), //注意：render會把el指定容器全覆蓋跋核，el容器內(nèi)部東西沒作用（不寫router-view等）
router //路由對象掛在到vue實例
})
- 展示組件。通過render渲染的組件會直接清空覆蓋此容器叛买，最后展示的就是此組件App.vue砂代，所以要把
<router-view></router-view>等寫到此組件中。
<template>
<div>
<h1>App</h1>
<router-link to="/login">登陸</router-link>
<router-link to="/register">注冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
六率挣、路由嵌套
入口JS（main.js）引入注冊組件的子組件刻伊，然后增加子路由匹配規(guī)則。
//導入注冊的子組件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'
//創(chuàng)建路由對象
var router = new VueRouter({ {
path: '/register',
component: register,
children: [{ //路由嵌套
path: 'idCardReg',
component: idCardReg
},
{
path: 'phoneReg',
component: phoneReg
}
]
}]
});
注冊組件需要嵌套其他組件，則需要在注冊組件中創(chuàng)建鏈接捶箱。
<template>
<div>
<h1>注冊組件</h1>
<router-link to='/register/idCardReg'>身份證</router-link>
<router-link to='/register/phoneReg'>手機號</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
七狮暑、.vue組件樣式
- 普通的 style 標簽只支持普通的樣式收恢，想要使用sass或less，需要增加
lang屬性為scss/less - 組件 style 中的樣式默認是全局樣式，適用于頁面所有
- style 標簽中增加
scoped屬性 （作用域）按脚，即為此組件的私有樣式（包括自己的子組件软族、內(nèi)部元素）返十，一般都會加彭谁。是vue給元素自定義了屬性，設(shè)置樣式的時候通過屬性選擇器設(shè)置樣式共虑。
<template>
<div>
<h1>id注冊</h1>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
div {
color: red;
}
</style>
八愧怜、抽離路由模塊
現(xiàn)在，會發(fā)現(xiàn)main.js的入口JS文件代碼量會多了妈拌，主要路由的量比較大拥坛。把導入路由組件和創(chuàng)建路由對象抽離出去。
創(chuàng)建一個 router.js 尘分，導入vue-router包猜惋，把導入路由組件、創(chuàng)建路由對象抽離放到這里音诫；然后把路由對象暴露出去惨奕。
import VueRouter from 'vue-router'
//導入登陸注冊組件
import login from './main/login.vue'
import register from './main/register.vue'
//導入注冊的子組件
import idCardReg from './mainChild/idCardReg.vue'
import phoneReg from './mainChild/phoneReg.vue'
//創(chuàng)建路由對象
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/register',
component: register,
children: [{
path: 'idCardReg',
component: idCardReg
},
{
path: 'phoneReg',
component: phoneReg
}
]
}]
});
export default router //把路由對象暴露出去
mian.js中再導入此自定義路由模塊雪位。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//導入App組件
import app from './App.vue'
//導入 自定義路由模塊
import router from './router.js'
var vm = new Vue({
el: '#app',
data: {
},
render: c => c(app), //注意：render會把el指定容器全覆蓋竭钝，el容器內(nèi)部東西沒作用（不寫router-view等）
router //路由對象掛在到vue實例
});
