[Vue之動態元件、插槽、transition過渡、過濾器、Vue-CLI 搭建vue專案、vue專案目錄介紹、前端代理（解決跨域問題）、elementui的使用]
阿新 • • 發佈：2021-07-18
[Vue之動態元件、插槽、transition過渡、過濾器、Vue-CLI 搭建vue專案、vue專案目錄介紹、前端代理（解決跨域問題）、elementui的使用]
動態元件
1、<component> 元素，動態地繫結多個元件到它的 is 屬性
2、<keep-alive> 保留狀態，避免重新渲染
示例
<div id="test"> <button @click="show='One'">第 1 個元件</button> <button @click="show='Two'">第 2 個元件</button> <button @click="show='Three'">第 3 個元件</button> <component :is="show"></component> </div> <script> Vue.component('One',{ template:` <div>元件one</div> `, }) Vue.component('Two',{ template:` <div> 元件two <input type="text" v-model="msg"> </div> `, data(){ return { msg:'' } } }) Vue.component('Three',{ template:` <div>元件three</div> `, }) var vm = new Vue({ el:'#test', data:{show:'one'} }) </script>
動態元件重新渲染問題
從上圖可以看出，第二個元件的input框，每次選擇了其他元件，他的輸入內容都會消失 可以使用 keep-alive 來解決問題 <div id="test"> <button @click="show='One'">第 1 個元件</button> <button @click="show='Two'">第 2 個元件</button> <button @click="show='Three'">第 3 個元件</button> <keep-alive> <component :is="show"></component> </keep-alive> </div>
插槽
1、單個slot 2、具名slot <div id="test"> <Inner> <p><slot>這是一個插槽</slot></p> <p><slot name="abc">這個是名字abc的插槽</slot></p> <p slot="xyz">這個是名字xyz的插槽</p> </Inner> </div> <script> Vue.component('Inner', { template: ` <div> <p>第一行</p> <slot></slot> <slot name="abc"></slot> <slot name="xyz"></slot> <p>第二行</p> </div> ` }) var vm = new Vue({ el: '#test' }) </script>
transition過渡
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。
1、單元素/元件過渡 * css過渡 * css動畫 * 結合animate.css動畫庫
2、多個元素過渡(設定key)
*當有相同標籤名的元素切換時，需要通過 key 特性設定唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標籤內部的內容。
mode:in-out ; out-in
3、多個元件過渡
4、列表過渡(設定key)
*<transition-group>不同於 transition， 它會以一個真實元素呈現：預設為一個 <span>。你也可以通過tag 特性更換為其他元素。
* 提供唯一的 key 屬性值
過濾器
https://cn.vuejs.org/v2/guide/filters.html
<div id="box">
<!--貓眼資料：https://m.maoyan.com/#movie-->
<ul>
<li v-for="data in datalist">
<h2>{{data.nm}}</h2>
<br>
<!-- <img :src="data.img" alt="">-->
<!-- <img :src="changePath(data.img)" alt="">-->
<!-- 過濾器-->
<img :src="data.img | myChange" alt="">
</li>
</ul>
</div>
</body>
<script>
//定義過濾器
Vue.filter('myChange',function (url) {
return url.replace('w.h','128.180')
})
var vm = new Vue({
el: '#box',
data: {
datalist: [],
},
methods:{
changePath(url){
return url.replace('w.h','128.180')
}
},
mounted() {
//http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
//http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
axios.get("./json/test.json").then(res => {
console.log(res.data.coming) // axios 自動包裝data屬性 res.data
this.datalist = res.data.coming
}).catch(err => {
console.log(err);
})
},
})
</script>
Vue-CLI 搭建vue專案
1、下載nodejs
下載地址
https://nodejs.org/zh-cn/
2、安裝nodejs
雙擊開啟安裝包一直下一步
補充
-jdk：java開發工具包，做java開發，需要安裝它 1.5 1.8大更新 java 15
-jre：java執行環境，
-jvm：java虛擬機器，最少要佔200m記憶體空間
3、檢視版本
4、更換阿里源
先退出nodejs
npm install -g cnpm --registry=https://registry.npm.taobao.org
補充
node：就是python命令
npm：就是python的pip命令，npm下載模組慢，我們使用cmpm下載
cnpm:阿里提供的
5、安裝vue腳手架
換源之後，不用npm，換成cnpm
cnpm install -g @vue/cli
6、建立Vue專案
多出vue命令
vue create my-project： 創建出一個vue專案，等同於djagno-admin createproject 專案名字
或者使用 vue ui
使用 vue create 專案名稱
1、切換目錄，建立專案
2、選擇自定義安裝
3、自定義要安裝的選項
4、安裝成功
使用vue ui 建立專案
和命令列建立差不多
7、開發
使用pycharm開發vue專案
裝vue外掛
8、執行起專案
terminal中：npm run serve
也可以使用pycharm的啟動
vue專案目錄介紹
myfirstvue # 專案名
-node_modules # 該專案所有的依賴，如果要把專案給別人，這個資料夾要刪掉（很大）
-public # 資料夾
-favicon.ico # 網頁標題欄處左側的小圖示
-index.html # 整個vue專案的index.html,單頁面開發
-src # 核心
-store # 如果裝了vuex，就會有這個資料夾
-router # 如果裝了vue router ，就會有這個資料夾
-assets # 存放資原始檔（js，css，img）
-components # 小元件（在這寫小元件）
-views # 頁面元件（在這寫頁面元件）
main.js # 整個專案的入口，核心配置
App.vue # 根元件
-package.json # 專案的依賴，不能刪
-README.md # 介紹
vue元件介紹
每個元件有三部分組成
template： 寫html
script ： 寫js
style ： 寫css
<template>
<div class="about">
<h1>寫html</h1>
</div>
</template>
<script>
js程式碼
</script>
<style>
css程式碼
</style>
vue-router的使用
1 以後，新建一個頁面元件，寫三部分
2 在router下的index.js內配置一下
const routes = [
{ // / 路徑，顯示Home這個頁面元件
path: '/',
name: 'Home',
component: Home
},
{
path: '/order',
name: 'Order',
component: Order
},
{
path: '/about',
name: 'About',
// component: () => import('../views/About.vue') # 懶載入，用到的時候匯入
component: About, # 兩種匯入形式都可以
}
]
3 在根vue中寫
<div id="app">
<router-link to="路徑">頁面名稱</router-link>
<router-view/>
</div>
4 以後要跳轉到某個頁面
<router-link to="/路徑">
<button>點我跳轉到order</button>
</router-link>
scoped 區域性使用css樣式
<style scoped>
</style>
在專案中新建元件和使用
1 在components資料夾建立一個 xx.vue
2 在其他元件中使用
-在scripts中
import HelloWorld from '../components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
3 在html中直接使用
<HelloWorld/>
js匯入匯出語法（瞭解）
1 有一些變數，函式，想在其他地方都用，可以寫成一個包
新建一個資料夾，在資料夾中寫index.js
在內部寫函式，寫變數，最後一定要匯出
var name='llll'
function add(a,b) {
return a+b
}
export default {
name,
add
}
2 在想用的位置，匯入使用即可
import xx from '../lqz'
console.log(xx.add(1,2))
安裝、使用axios
1 安裝 cnpm install axios -S
2 匯入使用
import axios from 'axios'
axios.get('api/index/').then(res => {})
前端代理（解決跨域）
1、專案根目錄下建立 vue.config.js，在 vue.config.js 中寫入
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8000/', # 最後帶不帶斜槓都可以
changeOrigin: true
}
}
},
}
2、使用axios傳送請求
mounted() {
axios.get('api/index/').then(res => { # api前面帶不帶斜槓都可以
console.log(res.data)
this.data_list = res.data.data.films
})
}
bootstrap和jq的使用
1 安裝
cnpm install jquery
cnpm install bootstrap@3
2 配置 vue.config.js 中
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
3 main.js中
jquery 使用直接使用即可，使用 bootstrap 需要配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
elementui的使用
1 安裝
cnpm install element-ui -S
2 main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);