Vue學習筆記[更新中...]
阿新 • • 發佈：2021-08-04
1.怎麼使用Vue元件?
元件怎麼用? 3個步驟
定義元件物件 const (在元件物件中除了有template也可以像Vue例項中定義data、methods、computed和生命週期函式)
在Vue例項中註冊 (es6中同名可省略value)
使用元件 (在例項掛載範圍內，以標籤形式寫上註冊元件的名稱)
補充：常用的生命週期函式
beforeMount(){},//將template中指向html編譯vue模板 此時還沒有完成模板中內容渲染 mounted(){},//將template中html編譯模板進行資料渲染 並且將渲染完成的資料在記憶體中形成虛擬dom替換template指向dom beforeUpdate(){},//當元件中data資料發生變化時,會觸發beforeUpdate,此時頁面中資料還是原始資料 updated(){},//此時頁面中資料和data資料一致 beforeDestroy(){},//銷燬vue例項之前觸發方法 destroyed(){}//vue例項已經觸底銷燬 監聽機制 全部消失
2.父子元件怎麼通訊?
2-1：元件的分類(根據元件的註冊位置分類)：全域性元件、區域性元件
全域性元件 ——> 直接註冊Vue例項根 在所有元件中可用
//引數1: 元件名稱 引數2: 指定元件內容的配置物件
Vue.component('register',{ //注意:這裡的元件名稱register如果使用駝峰命名法，需要改為-連線符
Vue.component('usersList',{
template:"<div><h3>使用者註冊元件</h3></div>"
});
區域性元件 ——> 註冊在vue例項內部 區域性元件只能元件內部可用
// 這裡一共定義了兩個元件：分別是login和register <script> //定義元件物件 const login = { //定義一個登入 template:"<div><h3>使用者登入區域性元件</h3></div>" }; const app = new Vue({ el:"#app", data:{ }, methods:{ }, components:{ //在Vue例項中註冊元件都為區域性元件 login,//es5 login:login //es6 login, register:{ //定義一個註冊元件 template:"<div><h3>使用者註冊區域性元件</h3></div>" } } }); </script>
全域性和區域性同時用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue元件：全域性與區域性的使用</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--使用全域性元件-->
<users-list></users-list>
<!--使用區域性元件-->
<emps></emps>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
//vue中元件 全域性元件 直接註冊Vue例項根 在所有元件中可用 區域性元件:註冊在vue例項內部 區域性元件只能元件內部可用
//引數1:元件名稱 引數2:元件模板配置物件 //注意:在定義元件名稱時如果元件名稱使用駝峰命名法 在使用元件時 單詞必須全部小寫,同時使用-作為分隔使用
Vue.component('usersList',{
template:"<div><h2>使用者列表-{{count}}---{{counts}}---{{counts}}</h2><button @click='increment'>+1</button></div>",
data(){ //用來定義元件資料
return {
count:0
}
},
methods:{
increment(){
this.count++;
}
},
computed:{
counts(){
return this.count*this.count*this.count;
}
},
//定義元件自己生命週期
});//定義一個全域性元件
//定義員工列表元件配置物件
const emps = {
template:"<div><h2>員工列表</h2></div>",
data(){
return{};
},
methods:{
},
computed: {}
};
const app = new Vue({
el:"#app",
data:{
msg: "Vue 中元件開發"
},
methods:{},
computed:{},
components: { //用來定義一些列區域性元件
emps,
}
});
</script>
2-2：父子元件的使用
父元件向子元件之間傳遞資料：用元件標籤的value傳，子元件用props陣列接收
props：用來給元件傳遞相應靜態資料或者是動態資料的
注意 ！ props是單項資料流，不要試圖在宣告元件的時候通過methods方法去改變父元件中相應的值
//1.宣告元件模板物件
const login = {
template:'<div><h2>歡迎: {{ name }} 年齡:{{ age }}</h2><button @click='donotChange'></button></div>',
props:['name','age'],
//不要試圖去改變age，因為prosps項資料流，不能流向父元件，不能去改變父元件中的age
methods:{
donotChange(){
age++;//錯誤！這裡的age是父元件的資料，如果想改變age，可以自己在子元件中的data定義
},
data(){
return{
ziage:this.age; //把父元件中的age賦值給子元件直接去改變ziage就不會報錯了
}
}
}
}
//2.註冊區域性元件
const app = new Vue({
el: "#app",
data: {
username:"小陳陳",
age:23
},
methods: {},
components:{
login //Vue例項中註冊的父元件
}
});
//3.使用元件：key是子元件的props元素，value是父元件中的data元素
<login :name="username" :age="age"></login> //使用v-bind形式將資料繫結Vue例項中data屬性,日後data屬性發生變化,元件內部資料跟著變化
父元件向子元件之間傳遞事件：事件不但可以父傳子，也可以子傳父
父傳子
在子元件中呼叫父元件傳遞過來的相關事件必須使用 this.$emit('函式名') 方式呼叫
//1.宣告元件
const login = {
template:"<div><h1>我愛學習 {{ uname }}</h1> <input type='button' value='點我' @click='change'></div>",
methods:{
change(){
//點選子元件的change，執行aaa,aaa在使用元件中找到父元件是findAll,實際執行的是
// 父元件中的findAll
this.$emit('aaa'); //這裡只有一個引數，就是父傳子，引數就是傳過來的函式名
}
}
}
//2.註冊元件
const app = new Vue({
el: "#app",
data: {
username:"小陳"
},
methods: {
findAll(){ //父元件的事件函式 將這個函式傳遞給子元件
alert('Vue 例項中父元件定義的方法');
}
},
components:{
login,//元件的註冊
}
});
//3.使用元件
<login @aaa="finAll"></login>
子傳父
$emit('傳來的函式名'，'引數1'，'引數2'，'引數3'...) 引數1,2,3...是發出去的資料，若引數較多還可以傳物件
//1.宣告元件
const login = {
template:"<div><h1>我愛學習 {{ uname }}</h1> <button @click='change'>點我</button></div>",
data(){
return { //這裡是子元件中要傳給父的資料
uname:Kyle,
pwd:123
}
},
props:['name'],
methods:{
change(){
//點選子元件的change，執行aaa,aaa在使用元件中找到父元件是findAll,實際執行的是
// 父元件中的findAll
this.$emit('aaa',uname,pwd); //多個引數
this.$emit('aaa',{uname:'Lauren',pwd:123}); //多個引數變為一個物件
}
}
}
//2.註冊元件
const app = new Vue({
el: "#app",
data: {
username:"小陳"
},
methods: {
findAll(uname,pwd){ // 接收$emit發出的多個引數
this.username = uname; // 子元件改變父元件資料
this.password = pwd;
}
findAll(obj){ // 接收$emit發出的物件
this.username = obj.uname;
this.password = obj.pwd;
}
},
components:{
login,//元件的註冊
}
});
//3.使用元件
<login @aaa="finAll"></login> <!--這裡只需要繫結好事件名即可-->
3.怎麼使用路由?
路由怎麼用? 6個步驟
-
引入路由Js
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //vue 路由js -
建立元件物件
const login = { template:'<h1>登入</h1>' //宣告元件模板 }; const register = { template:'<h1>註冊</h1>', data(){ return{} }, methods:{ } }; -
定義路由物件，並定義規則
//建立路由物件 const router = new VueRouter({ routes:[ { path:'/',redirect:'/login'}, //path沒寫是預設路由,redirect: 預設路由重定向到哪個路由 {path:'/login',name:login,component:login}, //path: 路由的路徑 name：類似於id，唯一的名稱 component:路徑對應的元件名稱 {path:'/register',name:register,component:register} //除了上面的平級路由，還可以放子路由 { //外層路由：裡面有2個子路由，分別是add和edit path: '/edit', name: 'edit', component: products, children:[ //子路由 注意:子路由的path屬性不能使用"/"開頭 {path: "add",name: "add", component: add}, {path: "edit",name: "edit", component: edit} ] }, ] }); -
將路由物件註冊到Vue例項
const app = new Vue({ el: "#app", data: { username:"小康", }, methods: {}, router:router //設定路由物件，此時也可寫成router, }); -
使用：el掛載的div中，使用
<!--顯示路由的元件--> <router-view></router-view> -
切換路由【2種方式】：使用
標籤切換路由 ；通過事件函式的方式動態切換路由 <!--方式一： 標籤切換--> <router-link to="/login" tag="button">我要登入</router-link> <router-link to="name:register" tag="button">點我註冊</router-link> <!--或者使用下面的方法 效果相同--> <a href="#/login">點我登入</a> <a href="#/register">點我註冊</a> <!--方式二： 事件函式切換--> <button @click="test">切換路由</button>
test(){
//this.$router.push("/emps");// 代表切換路由路徑[簡寫]
//this.$router.push({path:'/users'});//路徑方式切換路由 [全寫]
// [推薦]名稱方式切換路由： 注意！多次切換相同路由會報錯，建議加入手工判斷或者官方程式碼
if(this.$route.emps != Emps){ // 手工判斷,Emps為路由的name，表示不是當前路由才去切換
this.$router.push({name:"emps"});//
}
}
4.路由怎麼傳參?
- 第一種方式傳遞引數 queryString傳統方式
-
切換路由時通過?號拼接引數
<router-link to="/login?id=21&name=zhangsan">我要登入</router-link> -
在元件中獲取引數
const login = { template:'<h1>使用者登入</h1>', data(){return {}}, methods:{}, created(){ console.log("=============>"+this.$route.query.id+"======>"+this.$route.query.name); } };
- 第二種方式傳遞引數 restful
-
通過使用路徑方式傳遞引數
<router-link to="/register/24/張三">我要註冊</router-link> var router = new VueRouter({ routes:[ {path:'/register/:id/:name',component:register} //定義路徑中繫結key,在router-link的to屬性後面拼接對應引數，獲取key ] }); -
在元件中獲取引數
const register = { template:'<h1>使用者註冊{{ $route.params.name }}</h1>', created(){ console.log("註冊元件中id: "+this.$route.params.id+this.$route.params.name); } };
5. 巢狀路由
6. vue-cli
- 模組介紹