Vue進階 一、vue實例 1.一個基本的vue的實例 <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1> {{title}} </h1> <button id="btn" @click=" ...
Vue進階
一、vue實例
1.一個基本的vue的實例
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>
{{title}}
</h1>
<button id="btn" @click="btnclick">show</button>
<p v-if="showFlag">顯示段落</p>
{{lowercasetitle}}
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
var v1 = new Vue(
{
el:"#app",
data:{
title:"This is Title",
showFlag:false
},
methods:{
btnclick:function(){
this.showFlag=true;
this.updateTitle("this is new title");
},
updateTitle:function(d){
this.title = d;
}
},
computed:{
lowercasetitle:function(){
return this.title.toLowerCase();
}
},
watch:{
title:function(newVal,oldVal){
console.log(newVal)
}
}
}
);
</script>
2.新的實例
new Vue({
el:"#app2"
})
3.一個實例改變另一個實例中的內容，通過給實例命名
在一個實例中，通過調用另一個實例的屬性，來操作其屬性
var v1 = new Vue();
var v2 = new Vue({
el:"#app2",
data:{},
methods:{
changeTitle:function(){
v1.title = "changed title";
}
}
});
4.在vue外面操作vue實例——操作屬性
setTimeout(function(){
v1.title="st title";
},2000);
5.調用vue實例中的方法——操作方法
setTimeout(function(){
v1.btnclick();
},2000);
6.為vue實例設置屬性
-
vue中的實例屬性
v1.$data v1.$el -
設置實例屬性
var data = {
arg1:"arg1 value"
};
var v2 = new Vue({
el:"#app2",
data:data,
- 實例屬性還能這麼調用： v1.$data.title 相當於 v1.title
7.實例屬性ref的用法：相當於是id
<div id="app">
<button ref="mybtn1" id="btn" @click="btnclick">show</button>
<button ref="mybtn2" id="btn" @click="btnclick">show</button>
</div>
methods:{
btnclick:function(){
this.$refs.mybtn1.innerText = "tttttbbbbnnnn";
}
}
8.動態綁定vue實例到頁面中
mount 載入的意思
<div id="app3"></div>
<script>
var v3 = new Vue({
template:"<h1>hello</h1>"
});
v3.$mount("#app3");
</script>
二、Vue組件
萬事萬物皆對象
萬物皆組件
1.vue組件
Vue.componet 實現全局註冊
<div id="app1">
<hello></hello>
</div>
Vue.component("hello",{
template:"<h1>hello</h1>"
})
new Vue({
el:"#app1"
})
註意： div得是vue的實例，組件創建好後，只要被vue註冊過的div裡面，都能使用該組件
2.vue的生命周期函數
在控制台查看各函數的調用順序，並調用destroy，再點改變title按鈕，發現改變不了，因為已被銷毀
<html>
<head>
<meta charset="UTF-8">
<title>生命周期</title>
</head>
<body>
<div id="app1">
{{title}}
<button type="button" @click="changeTitle">change title</button>
<button type="button" @click="destroy">destroy</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script>
new Vue({
el:"#app1",
data:{
title:"this is title"
},
methods:{
changeTitle:function(){
this.title= "new title";
},
destroy:function(){
this.$destroy();
}
},
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestory")
},
destroyed(){
console.log("destory")
}
})
</script>
</html>
3.一個頁面中只有一個div，其他的都是vue組件
vue組件里的data必須使用function的形式對{}對象進行封裝，防止對其他數據的修改。
註意，template里必須有一個根節點。
<head>
<meta charset="UTF-8">
<title>component</title>
</head>
<body>
<div id="app1">
<my-cap></my-cap>
</div>
<div id="app2">
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
new Vue({
el:"#app2",
template:"<div>aaa</div>"
});
Vue.component("my-cap",{
data(){
return {
status:"hellllllllo"
}
},
template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
methods:{
changebtn:function(){
this.status = "enennnnnnn"
}
}
});
new Vue({
el:"#app1"
})
</script>
改進版：提高了代碼的重用性——萬物皆組件
var cmp = {
data(){
return {
status:"hellllllllo"
}
},
template:'<p>{{status}}<button @click="changebtn">btn</button></p>',
methods:{
changebtn:function(){
this.status = "enennnnnnn"
}
}
}
new Vue({
el:"#app1",
components:{
"my-cap":cmp
}
})
new Vue({
el:"#app2",
components:{
"cap":cmp
}
})
三、vue開發模式
1.vue-cli骨架
CLI（command line interfaces ）命令行介面。在進行Vue項目開發時，可以選擇不同的Vue模板進行項目的搭建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；vue-cli是官方提供的一個腳手架（預先定義好的目錄結構及基礎代碼，咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架），用於快速生成一個 vue 的項目模板。
2.詳細步驟
-
下載安裝node.js
https://nodejs.org/en/download/ -
在node.js的cmd組件（command prompt）中安裝vue-cli
npm install vue-cli -g -
創建vue項目文件夾並打開
mkdir d:/vuedemo cd d:/vuedemo -
使用vue list命令查看當前可用的vue骨架
-
使用vue命令創建基於vue-webpack-simple骨架的項目,vue-cli-demo是項目名，過程中需要輸入一些參數，回車是使用提示的值
vue init webpack-simple vue-cli-demo -
創建基於webpack骨架的項目
vue init webpack vue-cli-demo -
查閱readme.md文檔
npm install #安裝依賴環境 npm run dev #進入開發模式 npm run build #發佈項目
3.webpack-simple模板初體驗
-
1)進入到項目文件中，安裝依賴環境
npm install -
2)進入開發模式
npm run dev如果提示缺少依賴東西，嘗試重新 npm install，如果缺少node-sass，執行以下內容：
npm install node-sass如果npm命令無法使用，可以使用淘寶鏡像http://npm.taobao.org/
操作步驟如下：
# 1. 安裝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 2. 使用cnpm代替npm cnpm install cnpm run dev cnpm run build
-
開始組件開發
修改主組件App.vue
<template>
<div>
{{title}}
</div>
</template>
<script>
export default {
data(){
return {
title:"helloooooooo!"
}
}
}
</script>
四、編寫app.vue
1.註意template必須有一個根節點
這樣會報錯
<template>
<div>
{{title}}
</div>
<span>
</span>
</template>
2.在App.vue組件中使用另一個vue組件
- 新建Home.vue
<template>
<div>
label: {{label}}
<button @click="changeLable">btttttttn</button>
</div>
</template>
<script>
export default {
data(){
return {
label:"i am a label"
}
},
methods:{
changeLable(){
this.label = "yes a label!"
}
}
}
</script>
<style>
</style>
- 修改main.js
定義Home.vue為組件，並設置其標簽名字
import Vue from 'vue'
import App from './App.vue'
import Home from './Home.vue'
Vue.component("app-server-home",Home)
new Vue({
el: '#app',
render: h => h(App)
})
- 修改App.vue
直接使用在main.js中定義的組件的標簽名
<template>
<app-server-home></app-server-home>
</template>
3.組件中嵌套組件
app內使用home，home內使用subcontent。併在home中本地註冊subcontent組件。
<template>
<div>
<app-server-subcontent v-for="(sc,i) in 5":key="i">
</app-server-subcontent>
</div>
</template>
<script>
//本地註冊
import SubContent from "./SubContent.vue"
export default {
components:{
"app-server-subcontent":SubContent
}
}
</script>
五、在項目中使用bootstrap
1.在index.html中引入bootstrap.css
<head>
<meta charset="utf-8">
<title>vuedemo2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
2.編寫組件，組件中使用bootstrap
編寫header、footer、content組件
- header組件
<template>
<div class="col-xs-12">
<header>
This is Header!!!
</header>
</div>
</template>
- footer組件
<template>
<div class="col-xs-12">
<footer>
All Right Copy
</footer>
</div>
</template>
- content組件
<template>
<div class="col-xs-12 col-sm-6">
<ul class="list-group">
<li class="list-group-item" v-for="(s,i) in 5" :key="i">
{{s}}
</li>
</ul>
</div>
</template>
3.在app.vue中本地註冊這些組件並使用
<template>
<div id="app">
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
</template>
<script>
//內部註冊
import Footer from "Footer.vue"
import Header from "Header.vue"
import Content from "Content.vue"
export default {
components:{
"app-footer":Footer,
"app-header":Header,
"app-content":Content
}
}
</script>
六、組件的全局註冊
在main.js中註冊組件，該組件能夠在項目中的每個Vue中被使用
import Home from './Home.vue';
Vue.component("appHome",Home);
七、在組件中使用樣式
在組件中定義樣式，組件里的樣式會影響所有組件，如何設定，讓樣式只作用於當前組件？
content組件中的style將會影響整個頁面的元素，因此在組件的style標簽裡加入scoped關鍵字，讓該樣式只作用於當前組件。
<template>
<div class="col-xs-12 col-sm-6">
<ul class="list-group">
<li class="list-group-item" v-for="(s,i) in 5" :key="i">
{{s}}
</li>
</ul>
</div>
</template>
<script>
</script>
<style scoped>
div{
border: 1px solid red;
}
</style>
八、各組件中的參數傳遞
1.父傳子
通過父vue的標簽屬性傳遞參數：
- App.vue
<template>
<div id="app">
<sub-app :myName="name"></sub-app>
</div>
</template>
<script>
//內部註冊
import Sub1 from "@/subapp/sub1.vue"
export default {
data(){
return {
name:"xiaoyu"
}
},
components:{
subApp:Sub1
}
}
</script>
- sub1.vue
<template>
<div>
<h1>{{myName}}</h1>
</div>
</template>
<script>
export default{
props:['myName']
}
</script>
props後存放數組，表示可以拿多個參數。也可以改寫成一個對象：
<template>
<div>
<h1>{{myName}}</h1>
</div>
</template>
<script>
export default{
//props:['myName']
props:{
myName:{
type:String,
required:true,
default:'xx'
}
}
}
</script>
2.子組件調用父組件中的函數並傳遞參數
- App.vue
<template>
<div id="app">
<sub-app :myName="name" :ffn="changeName"></sub-app>
</div>
</template>
<script>
//內部註冊
import Sub1 from "@/subapp/sub1.vue"
export default {
data(){
return {
name:"xiaoyu"
}
},
methods:{
changeName:function(name){
this.name = name
}
},
components:{
subApp:Sub1
}
}
</script>
- sub1.vue
<template>
<div>
<h1>{{myName}}</h1>
<button type="button" @click="doClick" >點我</button>
</div>
</template>
<script>
export default{
props:{
myName:{
type:String,
required:true,
default:'xx'
},
ffn:{
type:Function
}
},
methods:{
doClick:function(){
this.ffn("xiaohe");
}
}
}
</script>
3.改進版的參數傳遞(常用)
從下往上的事件發射
- sub1.vue
doClick:function(){
//this.ffn("xiaohe");
this.$emit('newName','xiaoliu');
}
- App.vue
<sub-app :myName="name" @newName="name=$event"></sub-app>
