一、動態(tài)組件
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態(tài)組件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<button @click="who='child1'">首頁</button>
</li>
<li>
<button @click="who='child2'">訂單</button>
</li>
<li>
<button @click="who='child3'">商品</button>
</li>
</ul>
<component :is="who"></component>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child1: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首頁</span>
</div>
`,
},
child2: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是訂單</span>
</div>
`,
},
child3: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
</div>
`,
}
}
})
</script>
</html>2.keep-alive的使用
keep-alive可以讓輸入框內(nèi)有的內(nèi)容一致保持，不會因為切換而重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li>
<button @click="who='child1'">首頁</button>
</li>
<li>
<button @click="who='child2'">訂單</button>
</li>
<li>
<button @click="who='child3'">商品</button>
</li>
</ul>
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child1: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首頁</span>
<input type="text">
</div>
`,
},
child2: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是訂單</span>
<input type="text">
</div>
`,
},
child3: {
template: `
<div>
<span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
<input type="text">
</div>
`,
}
}
})
</script>
</html>
二、slot插槽
- 一般情況下，編寫完1個組件之后，組件的內(nèi)容都是寫死的，需要加數(shù)據(jù) 只能去組件中修改，擴展性很差
- 然后就出現(xiàn)了插槽這個概念，只需在組件中添加
<slot></slot>，就可以在body的組件標簽中添加內(nèi)容
1.基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot 插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<child>
<h6>Hello World</h6>
</child>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
who: 'child1'
},
components: {
child: {
template: `
<div>
<slot></slot>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是組件的原內(nèi)容</span>
<slot></slot>
</div>
`,
},
}
})
</script>
</html>
2.小案例（通過插槽實現(xiàn)在1個組件中控制另1個組件的顯示隱藏）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot 插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!--通過插槽實現(xiàn)在一個組件中控制另一個組件的顯示隱藏-->
<child1>
<button @click="isShow=!isShow">顯示/隱藏組件2</button>
</child1>
<child2 v-if="isShow"></child2>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
組件1
<slot></slot>
</div>`,
})
Vue.component('child2', {
template: `<div>
<h3>組件2</h3>
</div>`,
})
var vm = new Vue({
el: '#box',
data: {
isShow: true
}
})
</script>
</html>
3.具名插槽
可以指定標簽放在某個插槽的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名插槽</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<!-- 具名插槽，把p標簽給a插槽，div標簽給b插槽-->
<child>
<p slot="a">我是具名插槽a插入的內(nèi)容</p>
<div slot="b">我是具名插槽b插入的內(nèi)容</div>
</child>
</div>
</body>
<script>
Vue.component('child', {
template: `<div>
<slot name="a"></slot>
<hr>
<span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是組件的原內(nèi)容</span>
<hr>
<slot name="b"></slot>
</div>`,
})
var vm = new Vue({
el: '#box',
data: {}
})
</script>
</html>
三、Vue-CLI 項目搭建
1.環(huán)境搭建
- 安裝node
官網(wǎng)下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
- 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安裝腳手架
cnpm install -g @vue/cli
- 清空緩存處理
npm cache clean --force
2. 項目的創(chuàng)建
創(chuàng)建項目
# 1 vue create 項目名
vue create myfirstvue
# 2 選擇入下圖
# 3 選擇Babel，Router，vuex
# Babel：語法轉換
# Router：頁面跳轉 路由效果
# vuex：狀態(tài)管理器，存儲數(shù)據(jù)的
# 3 選vue版本
# 4 選package.json
# 5 之前的設置，保存與不保存都可以
等待即可
使用vue-cli-ui創(chuàng)建
# vue ui 啟動出一個服務，直接在瀏覽器中點點擊就可以創(chuàng)建啟動/停止項目
npm run serve / ctrl+c
// 要提前進入項目根目錄
打包項目
npm run build
// 要在項目根目錄下進行打包操作
package.json中
"scripts": {
"serve": "vue-cli-service serve", # 運行項目
"build": "vue-cli-service build", # 編譯項目成html，css，js
"lint": "vue-cli-service lint" # 代碼格式化
},
3 .認識項目
dist: 打包的項目目錄(打包后會生成)
node_modules: 項目依賴(刪掉，不上傳git，使用npm install重新安裝)
public: 共用資源
--favicon.ico
--index.html:項目入口頁面，單頁面
src: 項目目標,書寫代碼的地方
-- assets:資源
-- components:組件
-- views:視圖組件
-- App.vue:根組件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 狀態(tài)庫文件
vue.config.js: 項目配置文件(沒有可以自己新建)
package.json：項目配置依賴（等同于python項目的reqirement.txt）
配置文件：vue.config.js
//https://cli.vuejs.org/zh/config/ 配置參考
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,選做
main.js 整個項目入口文件
//es6 模塊導入規(guī)范，等同于python導包
//commonJs的導入規(guī)范：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue' //根組件
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
/*
new Vue({
el:'#app' //原來是用el:'#app'，現(xiàn)在是new出Vue對象，掛載到#app上---》.$mount('#app')
render: h => h(App) //原來是在頁面上div中寫樣式，現(xiàn)在組件化開發(fā) 把根組件（import App from './App.vue'），通過render渲染上，渲染組件的方式
}).$mount('#app')
*/
vue文件
<template>
<!-- 模板區(qū)域 -->
</template>
<script>
// 邏輯代碼區(qū)域
// 該語法和script綁定出現(xiàn)
//export default-->es6的默認導出（導出一個對象），模擬commonJS的導出方式制定的
export default {
}
</script>
<style scoped>
/* 樣式區(qū)域 */
/* scoped表示這里的樣式只適用于組件內(nèi)部, scoped與style綁定出現(xiàn) */
</style>
定義組件
#1 新建xx.vue
components-->HelloWorld.vue
#2 引入使用
<script>
# es6的引入import from
import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'
Vue.component('HelloWorld',HelloWorld) # 全局組件
export default {
components: { # 局部組件
HelloWorld:HelloWorld
},
}
</script>
ESLint
ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創(chuàng)建。代碼檢查是一種靜態(tài)的分析，常用于尋找有問題的模式或者代碼，并且不依賴于具體的編碼風格。對大多數(shù)編程語言來說都會有代碼檢查，一般來說編譯程序會內(nèi)置檢查工具。
JavaScript 是一個動態(tài)的弱類型語言，在開發(fā)中比較容易出錯。因為沒有編譯程序，為了尋找 JavaScript 代碼錯誤通常需要在執(zhí)行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。
ESLint 的初衷是為了讓程序員可以創(chuàng)建自己的檢測規(guī)則。ESLint 的所有規(guī)則都被設計成可插入的。ESLint 的默認規(guī)則與其他的插件并沒有什么區(qū)別，規(guī)則本身和測試可以依賴于同樣的模式。為了便于人們使用，ESLint 內(nèi)置了一些規(guī)則，當然，你可以在使用過程中自定義規(guī)則。
ESLint 使用 Node.js 編寫，這樣既可以有一個快速的運行環(huán)境的同時也便于安裝
js語法規(guī)范性檢查，類似于PEP8規(guī)范
官網(wǎng)
https://eslint.bootcss.com/docs/about/
修改項目
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>HomeView.vue
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
四、導入導出語法
導出語法 ??
?? ?1 項目中：創(chuàng)建包，創(chuàng)建要給文件夾 ?lqz
? ? 2 在包下創(chuàng)建 package.js
? ? 3 在文件中寫js代碼文章來源：http://www.zghlxwxcb.cn/news/detail-475495.html
var name = 'lqz'
function add(a, b) {
return a + b
}
4 默認導出 對象
export default {
add:add,
name:name
}
5 命名導出 導出了兩個變量
export const name = '彭于晏'
export const add = (a, b) => {
return a * b
}導入語法
?? ?# 默認導出的導入
?? ?1 在任意的js中
? ? import 起個名字 ?from './lqz/package'
? ? 2 使用導入的包
? ? ?? ?起個名字.導出的字段
? ? ? ??
命名導出的導入
? ? 1 在任意的js中
? ? import {name,add} ?from './lqz/package'
? ? 2 直接用即可文章來源地址http://www.zghlxwxcb.cn/news/detail-475495.html
默認導入語法
import ch from './ch/package.js'
let res = ch.add(3, 4)
console.log(res)
console.log(ch.name)
命名導入語法
import {name, add} from './ch/package'
console.log(name)
let res = add(6, 5)
console.log(res)到了這里，關于Vue基礎第五篇的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
