Vue 學(xué)習(xí)筆記

前言
官網(wǎng)：https://cn.vuejs.org/
官方文檔：https://cn.vuejs.org/v2/guide/
熱門組件庫(kù)地址：https://github.com/vuejs/awesome-vue
第三方UI框架：Element、Iview、MintUI
安裝
直接引入方式：下載 vue.js ，直接在項(xiàng)目中引入（和引用 JQuery 一樣）

CDN引入方式：

開發(fā)環(huán)境

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生產(chǎn)環(huán)境

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

NPM，使用 vue-cli 構(gòu)建 vue 項(xiàng)目

初入門
<script>
<html>
<head>
<meta charset="utf-8">
<title>Vue-Learn</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box1">
{{name}}
</div>
</body>
<script type="text/javascript">
// 初始化 vue,在瀏覽器控制臺(tái)可以通過 vm 控制
var vm = new Vue({
el: "#box1",
data:{
name: "Hello World!"
},
// 方法
methods: {

        },
        // 計(jì)算屬性
        computed: {
            
        }
    })
</script>

</html>
</script>
Vue 基礎(chǔ)
模板語(yǔ)法

直接取值

{{ 屬性 }}

需要解析標(biāo)簽，防止XSS、CSRF攻擊

<div v-html=""></div>

表達(dá)式

<img v-bind:src="imgSrc"></img>
或者簡(jiǎn)寫
<img :src="imgSrc"></img>

條件

v-if : 從 dom 中刪除
v-else-if :
v-else
v-show ：只是不在頁(yè)面顯示

列表

v-for="todo in todos"
v-for="(todo,index) in todos" : index 為索引值
或者
v-for="todo of todos"
v-for="(todo,index) of todos"

事件

v-on:click 或者 @click
v-model : 實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。可以代替輸入框value

class 與 style

綁定HTML Class

|----對(duì)象語(yǔ)法
|----數(shù)組語(yǔ)法

綁定內(nèi)聯(lián)樣式

|----對(duì)象語(yǔ)法
|----數(shù)組語(yǔ)法

數(shù)組更新檢測(cè)

使用以下方法操作數(shù)組，可以檢測(cè)變動(dòng)

push()、pop()、shift()、unshift()、splice()、sort()、reverse()
1
filter() concat() 和 slice() map()，不會(huì)檢測(cè)變動(dòng)，可以使用新數(shù)組替舊數(shù)組

輸入框事件

事件對(duì)象

@input="handleInput"

handleInput(ev){
// ev 表示事件對(duì)象
console.log(ev)
// 輸入框的值
console.log(ev.target.value)
}

事件對(duì)象和傳參

@input="handleInput($event, param)"

handleInput(ev, param){
// ev 表示事件對(duì)象
console.log(ev)
console.log(ev.data)
}

多選框

v-model 使用數(shù)組，value 表示對(duì)應(yīng)的標(biāo)識(shí)

獲取 v-model 綁定的值即可獲取多選的值

<input type="checkbox" v-model="checkedGroup" value="vue"> vue
<input type="checkbox" v-model="checkedGroup" value="react"> react
<input type="checkbox" v-model="checkedGroup" value="jquery"> jquery

new Vue({
el: "#box",
data: {
checkedGroup: []
}
})

單選框

v-model 使用字符串，value 表示對(duì)應(yīng)的標(biāo)識(shí)，name 標(biāo)識(shí)一組單選

獲取 v-model 綁定的值即可獲取單選的值

<input type="radio" v-model="picked" name="favor" value="vue">vue
<input type="radio" v-model="picked" name="favor" value="react">react
<input type="radio" v-model="picked" name="favor" value="query">query

Axios 請(qǐng)求
參考鏈接：https://github.com/axios/axios

計(jì)算屬性
調(diào)用不能使用小括號(hào)，必須有返回值。寫起來(lái)像方法，用起來(lái)是屬性；

計(jì)算屬性當(dāng)屬性值發(fā)生改變的時(shí)候，會(huì)自動(dòng)重新計(jì)算屬性值，并渲染到頁(yè)面上；

watch 監(jiān)聽
監(jiān)聽某一個(gè)值發(fā)生變化，和改變之后需要如何處理

mixins 混入

引入js，同名方法優(yōu)先級(jí)低于 methods

new Vue({
mixins: [funUtils]
})

生命周期
組件注冊(cè)方式
組件作用域隔離；組件只能有另一個(gè)根節(jié)點(diǎn)；

全局組件
data 必須是函數(shù)式寫法，必須有返回值

Vue.component("", {})

局部組件
Vue.component("common", {
components:{
"localComponents":{
// 局部組件，該組件只供common組件使用
}
}
})

通信
父?jìng)髯油ㄐ?br> 通過 Prop 向子組件傳遞數(shù)據(jù)：不限制類型

父組件在調(diào)用子組件的時(shí)候賦值

<div id="commucation">
<p>父組件</p>
// 父?jìng)髯油ㄐ?，如果?dòng)態(tài)傳值可以對(duì) param 使用 v-bind 綁定
<child param="君不見黃河之水天上來(lái)"></child>
</div>

子組件通過 props 屬性獲取父組件的傳參

Vue.component("child", {
template:
<nav> <span style="background: yellow">子組件</span> <br> {{ param }} </nav>,
// props:["param"]
// 屬性驗(yàn)證
props:{
param:String
}
})

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<child param="君不見黃河之水天上來(lái)"></child>
</div>
</body>

<script type="text/javascript"> 
    // 組件之間互不影響,沒有任何關(guān)聯(lián),但是可以通信
    // 子組件
    Vue.component("child", {
        template:
        `
        <nav>   
            <span style="background: yellow">子組件</span>
            <br>
            {{ param }}
         </nav>
        `,
        // props:["param"]
        // 屬性驗(yàn)證
        props:{
            param:String
        }
    })

    // 父組件
    let vm = new Vue({
        el: "#commucation"
    })
</script>

</html>

子傳父通信
通過事件通知父組件

子組件通過事件通知父組件調(diào)用子組件時(shí)綁定的事件

childClick(){
console.log("子組件點(diǎn)擊調(diào)用")
// 使用 this.emit 通知父組件的中調(diào)用子組件標(biāo)簽中的事件,1000 為參數(shù) this.emit("noticeevent", 1000);
}

父組件在調(diào)用子組件的時(shí)候綁定事件，并指定父組件中接收參數(shù)的函數(shù)

調(diào)用子組件

<div id="commucation">
<p>父組件</p>
<child @noticeevent="getChildParam"></child>
</div>

接收參數(shù)的函數(shù)

// 父組件
let vm = new Vue({
el: "#commucation",
methods:{
// data 為子組件傳的參數(shù)
getChildParam(data){
console.log("data", data)
}
}
})

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<child @noticeevent="getChildParam"></child>
</div>
</body>

<script type="text/javascript"> 
    // 組件之間互不影響,沒有任何關(guān)聯(lián),但是可以通信
    // 子組件
    Vue.component("child", {
        template:
        `
        <nav>   
            <span style="background: yellow">子組件</span>
            <br>
            <button @click="childClick()">子組件click</button>
            <br>
        </nav>
        `,
        methods:{
            childClick(){
                console.log("子組件點(diǎn)擊調(diào)用")
                // 通知父組件的中調(diào)用子組件標(biāo)簽中的事件
                this.$emit("noticeevent", 1000);
            }
        }
    })

    // 父組件
    let vm = new Vue({
        el: "#commucation",
        methods:{
            getChildParam(data){
                console.log("data", data)
            }
        }
    })
</script>

</html>

refs 通信
ref 綁定在標(biāo)簽上， this.refs 獲取原生標(biāo)簽； ref 綁定在組件上， this.refs 獲取時(shí)組件對(duì)象；
ref 綁定在標(biāo)簽上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<input type="text" ref="name"/>
<button type="button" @click="getDom">GET</button>
</div>
</body>

<script type="text/javascript">         
    // 父組件
    let vm = new Vue({
        el: "#commucation",
        methods:{
            getDom(){
                // this.$refs 獲取所有ref
                // this.$refs.name 獲取ref值為name的節(jié)點(diǎn)
                // this.$refs.name.value 獲取ref值為name節(jié)點(diǎn)的值
                console.log("獲取的值為：", this.$refs.name.value)
            }
        }
    })
</script>

</html>

ref 綁定在組件上
父?jìng)髯?br> 父組件通過 ref 綁定調(diào)用子組件的調(diào)用標(biāo)簽，通過 this.r e f s . c h i l d C o m p o n e n t （ c h i l d C o m p o n e n t 指 定 的 是 父 組 件 調(diào) 用 子 組 件 綁 定 的 r e f 值 ） 獲 取 子 組 件 ， 通 過 t h i s . refs.childComponent （childComponent指定的是父組件調(diào)用子組件綁定的ref值）獲取子組件，通過 this.refs.childComponent（childComponent指定的是父組件調(diào)用子組件綁定的ref值）獲取子組件，通過this.refs.childComponent.getParent(params) 調(diào)用子組件的函數(shù)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<input type="text" ref="inputVal"/>
<button type="button" @click="transferVal">通過refs傳值給子組件</button>
<child ref="childComponent"></child>
</div>
</body>

<script type="text/javascript"> 
    // 組件之間互不影響,沒有任何關(guān)聯(lián),但是可以通信
    // 子組件
    Vue.component("child", {
        template:
        `
        <nav>   
            <span style="background: yellow">子組件</span>
            <br>
        </nav>
        `,
        methods:{
            getParent(data){
                console.log("獲取父組件的值為：", data)
            }
        }
    })

    // 父組件
    let vm = new Vue({
        el: "#commucation",
        methods:{
            transferVal(){
                console.log("this.$refs.inputVal.value", this.$refs.inputVal.value);
                let params = this.$refs.inputVal.value;
                // 獲取ref綁定的子組件,并調(diào)用子組件的函數(shù)(可以傳參)
                // this.$refs.childComponent 獲取子組件
                // this.$refs.childComponent.getParent(params) 調(diào)用子組件的函數(shù)
                this.$refs.childComponent.getParent(params);
            }
        }
    })
</script>

</html>

bus 通信（簡(jiǎn)單的非父子通信）
發(fā)布訂閱模式，通過同一個(gè) vue 實(shí)例作為中間件中心

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<child1></child1>
<child2></child2>
</div>
</body>

<script type="text/javascript"> 
    // 創(chuàng)建一個(gè) vue 實(shí)例,作為中央事件總線
    let bus = new Vue();

    // 子組件 1
    Vue.component("child1", {
        template:
        `
        <nav>   
            <span style="background: yellow">子組件 1</span>
            <button @click="transferData()">transfer</button>
        </nav>
        `,
        methods:{
            transferData(){
                console.log("開始輸出數(shù)據(jù)");
                // 通知dataMount事件
                bus.$emit("dataMount", "君不見黃河之水天上來(lái)")
            }
        }
    })

    // 子組件 2
    Vue.component("child2", {
        template:
        `
        <nav>   
            <span style="background: red">子組件 2</span>
            <br>
        </nav>
        `,
        mounted() {
            // 監(jiān)聽dataMount事件
            bus.$on("dataMount", (data)=>{
                console.log("the data is ", data);
            })
        }
    })

    // 父組件
    let vm = new Vue({
        el: "#commucation"
    })
</script>

</html>

Vuex
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
// 共享狀態(tài)
},
mutations: {
// 用于修改共享狀態(tài)
},
actions: {
// ajax 異步請(qǐng)求調(diào)用 mutations 中的函數(shù)，修改共享狀態(tài)
},
});

// 其他vue組件通過 "this.$store.state.共享狀態(tài)屬性" 進(jìn)行訪問

動(dòng)態(tài)組件

<component :is=""></component>


<keep-alive>
<component :is=""></component>
</keep-alive>

slot 插槽
插槽是混合父組件的內(nèi)容混到子組件中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<child>

<ul>
<li>11111111</li>
<li>22222222</li>
<li>33333333</li>
</ul>
</child>
</div>
</body>

<script type="text/javascript"> 
    // 子組件 2
    Vue.component("child", {
        template:
        `
            <nav>   
                <div>子組件</div>
                <!--slot插槽：混合父組件的內(nèi)容混到子組件中-->
                <slot></slot>
            </nav>
        `
    })
    
    // 父組件
    let vm = new Vue({
        el: "#commucation"
    })
</script>

</html>

具名插槽
插槽具有名字，可以使用name屬性指定使用插槽的位置

父組件使用 slot 屬性指定插槽名稱

子組件使用 <slot name=""> 指定slot名稱

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
<p>父組件</p>
<child>

<div slot="slot1">aaaaa</div>
<div slot="slot2">bbbbb</div>
<div slot="slot3">ccccc</div>
</child>
</div>
</body>

<script type="text/javascript"> 
    // 子組件 2
    Vue.component("child", {
        template:
        `
            <nav>   
                <div>子組件</div>
                <!--slot插槽：混合父組件的內(nèi)容混到子組件中, name指定插槽名稱-->
                <div style="background: red">
                    <slot name="slot1"></slot>
                </div>
                <div style="background: yellow">
                    <slot name="slot2"></slot>
                </div>
                <div style="background: blue">
                    <slot name="slot3"></slot>
                </div>
            </nav>
        `
    })
    
    // 父組件
    let vm = new Vue({
        el: "#commucation"
    })
</script>

</html>

動(dòng)畫
推薦：https://github.com/daneden/animate.css

使用方式：

<div id="commucation">

<p class="animated bounceIn"> 君不見黃河之水天上來(lái) </p>
</div>

輪播/滑動(dòng)效果
推薦：https://www.swiper.com.cn/

指令
指令不在 Vue 實(shí)例中

指令可以傳js對(duì)象

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
1
指令具有生命周期

// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el，binding) {
// el 是原生節(jié)點(diǎn),binding 表示標(biāo)簽值
// 聚焦元素
el.focus()
}
})

過濾器
自定義過濾器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="commucation">
{{name | msgFilter}}
</div>
</body>

<script type="text/javascript">
    let vm = new Vue({
        el: "#commucation",
        data:{
            name: "君不見黃河之水天上來(lái)"
        },
        filters:{
            msgFilter: function(value){
                console.log("value", value)
                // 處理數(shù)據(jù)
                return value.split('之')[1];
            }
        }
    })
</script>

</html>

路由
路由容器
<router-view name=""></router-view>
1
hash 路由

location.hash 切換
window.onhashchange 監(jiān)聽路徑的切換
1
2
history 路由

// 路徑?jīng)]有 #
const router = new Router({
mode : "history",
})

history.pushState 切換
window.onpopstate 監(jiān)聽路徑的切換

嵌套路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

// 注冊(cè)路由模塊
Vue.use(Router)

export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
alias: "/index", // 別名
component: Home,
children:[
{
path: '/',
name: 'home',
component: Home,
}
]
},
// 重定向
{
path: '/li',
name: 'li',
redirect: "/about"
}
]
})

動(dòng)態(tài)路由配置
{
# 使用 :id 做動(dòng)態(tài)路由配置，: 是做一個(gè)占位符
path: '/detail/:id1/:id2/:id3',
name: 'home'
component: Detail
}

編程式路由

路徑跳轉(zhuǎn)

this.$router.push(/path/{id})

路由名稱跳轉(zhuǎn)

this.$router.push({name:"",params:{}})

聲明式路由

<router-link>

獲取hash值

獲取當(dāng)前路由

let hashVal = location.hash

獲取當(dāng)前路由信息

this.$route

路由守衛(wèi)
全局守衛(wèi)
在 router.js 配置

router.befaoreEach((to, from, next) => {
if(to.path === '/center'){
// 攔截判斷
if(usre.isLogin()){
// 有登錄信息，可以訪問
next();
}else{
// 無(wú)登錄信息，需要登錄
next('/login')
}
}else{
// 允許過去
next();
}
})

Vuex
管理共享狀態(tài)——解決非父子通信
數(shù)據(jù)快照——緩存后端數(shù)據(jù)，避免重復(fù)請(qǐng)求，影響用戶體驗(yàn)
時(shí)光旅行——調(diào)式

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容