Vue
Vue.js（/vju?/，或簡稱為Vue）是一個用于創(chuàng)建用戶界面的開源JavaScript框架勒虾，也是一個創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架廓译。 2016年一項針對JavaScript的調(diào)查表明档插，Vue有著89%的開發(fā)者滿意度瘫拣。 在GitHub上，該項目平均每天能收獲95顆星肛响，為Github有史以來星標數(shù)第3多的項目岭粤。
vue 移動端hybird 框架 混合app框架
安卓+ iOS 跨平臺的套殼程序
vue ： 適合中小型APP開發(fā) react/angularJS：適合大型APP開發(fā)
SPA:single page application ( 單頁應(yīng)用程序 )
- 漸進式
漸進增強 （向上兼容）
優(yōu)雅降級 （向下兼容） - mvc設(shè)計理念
m model 模型（數(shù)據(jù)層）
v view試圖 （模板）
*c * controller 控制層（業(yè)務(wù)層）
注：實際開發(fā)中，如果使用了vue之后特笋，盡可能不操作dom剃浇，不使用jq js等。
Vue-指令
操作指令元素
用法：放置在元素內(nèi)部做屬性
| 名字 | 作用 |
|---|---|
v-test="dataname" |
等價于innerText
|
v-html="elname" |
將原來的節(jié)點替換為聲明的節(jié)點 |
v-show="true" |
改掉元素的display
|
v-if="true" |
跟v-show一樣的功能 但是會刪掉節(jié)點//remove()
|
v-else |
跟v-if組成邏輯 |
v-else-if |
跟v-if組成邏輯 |
v-for="(v,k) in arr" |
循環(huán)遍歷指令 值：{{ v }} 鍵：{{ k }}
|
v-onor@
|
綁定事件v-on:事件名="函數(shù)名"or @click="函數(shù)名"
|
v-bind:屬性or :
|
動態(tài)綁定一個或多個屬性 |
v-model:"msg"or#
|
雙向數(shù)據(jù)綁定 只能給表單元素 指向value值 |
v-pre |
忽略解析 原樣輸出 |
v-cloak |
解決數(shù)據(jù)被解析之前的閃爍問題 |
v-once |
只渲染一次 |
鉤子函數(shù)
即vue生命周期猎物，從創(chuàng)建到銷毀的過程虎囚，當實例化vue的時候會創(chuàng)建幾個相應(yīng)的狀態(tài)，在某種情況下做特定的功能蔫磨，自動執(zhí)行淘讥。
執(zhí)行函數(shù)
-
對象創(chuàng)建狀態(tài)
beforeCreate 最先執(zhí)行的 廣告開場動畫
created 對象創(chuàng)建成功后 data數(shù)據(jù)已經(jīng)有了 模板沒有加載 可以 初始化數(shù)據(jù)
-
模板掛載狀態(tài)
beforeMount獲取到了頁面的模板 還沒有進行替換
mounted模板已經(jīng)重新進行了渲染 頁面已經(jīng)有了結(jié)果
-
修改數(shù)據(jù)狀態(tài)
beforeUpdate監(jiān)測mounted里面變更數(shù)據(jù)的操作才會觸發(fā)
updated同上
-
對象銷毀狀態(tài)
beforeDestroy 在對象銷毀成功之前 結(jié)束動畫
destored 銷毀整個實例對象之后 渲染時不會觸發(fā) 榮登極樂
Vue請求
vue-resource 自帶的庫
Get
new Vue = ({
el:"#app",
data:{},
created(){
this.$http.get("data.php",{params:{userName:"memeda"}}).then(function(res){
console.log(res);
})
}
})
Post
new Vue = ({
el:"#app",
data:{},
created(){
this.$http.post("data.php",{userName:"memeda"},{emulateJSON:true}).then(function(res){
console.log(res);
})
}
})
Jsonp
new Vue = ({
el:"#app",
data:{},
created(){
this.$http.jsonp("data.php",{userName:"memeda"},{emulateJSON:true}).then(function(res){
console.log(res);
})
}
})
Axios請求
Get
axios.get("data.php",{params:{user:"admin"}}).then((res)=>{
console.log(res);
})
Post
axios.post("data.php","user:admin&pwd=123").then((res)=>{
console.log(res);
})
組件
全局組件
在任何實例里面都能使用的就叫全局組件。
注冊全局組件
<body>
<template id="memeda">
<div>
<h1>{{ test }}</h1>
<button @click="test()">按鈕</button>
</div>
</template>
</body>
<script>
Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定義template標簽 通過#memeda選擇器獲取 必須放在一個根節(jié)點里面
data:function(){//或者data(){}
return {
test:"測試組件"
}
},
methods:{
function test(){
console.log(111);
}
}
})
</script>
//調(diào)用
<my-test></my-test>
this.$set.(this.arr,index,value)//解決修改組件內(nèi)部引用類型（數(shù)組堤如，對象）之后 頁面渲染不同步問題
封裝底部導航demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.xiaohuwei.cn/vue.min.js"></script>
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
a:hover{
text-decoration: none;
transform:scale(1.1);
color:red;
}
a{
text-decoration: none;
font-size:20px;
transition: .3s;
}
a:focus{
text-decoration: none;
}
*{
padding:0;
}
</style>
</head>
<body>
<div id="box">
<navbar></navbar>
</div>
<template id="navbar">
<div class="container-fluid text-center bg-info" style="height: 50px; line-height: 60px;position: fixed;bottom: 2px;width: 100%;">
<div class="row">
<div class="col-xs-4">
<a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" v-if="!arr[0]"></a>
<a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" style="color:red" v-else></a>
</div>
<div class="col-xs-4">
<a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" v-if="!arr[1]"></a>
<a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" style="color:red" v-else></a>
</div>
<div class="col-xs-4">
<a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" v-if="!arr[2]"></a>
<a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" style="color:red" v-else></a>
</div>
</div>
</div>
</template>
</body>
<script>
const ops = {
data(){
return{
arr:[0,0,0],
}
},
template:"#navbar",
methods: {
memeda(index){
this.arr.forEach((v,k)=>{
this.arr[k]=0;
})
this.$set(this.arr,index,1);
}
},
};
Vue.component("navbar",ops);
new Vue({
el:"#box"
})
</script>
</html>
事件修飾符
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理蒲列，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
注冊局部組件
Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定義template標簽 通過#memeda選擇器獲取 必須放在一個根節(jié)點里面
components:{
testson:{
template:'<h1>你好呀~</h1>',
data:function(){//或者data(){}
return {
test:"測試組件"
}
},
methods:{
function test(){
console.log(111);
}
}
}
}
})
//調(diào)用
只能在父組件模板里面調(diào)用
定義插槽
<template>
<slot></slot>
</template>
| 名稱 | 作用 |
|---|---|
| prop | 獲取一個組件外的值 作用：父子組件傳值 |
| slot | 插槽，用于構(gòu)建模板的時候占位搀罢，有具名和未具名的 |
父給子傳值
<body>
<div id="app">
<fuji></fuji>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
components:{
"fuji":{
data() {
return {
msg:"父級組件",
}
},
template:"<ziji :nihao='msg'></ziji>",// 將父級的msg通過：給綁定 調(diào)用子級組件 頁面顯示為msg
components:{
"ziji":{
props:["nihao"],//接受父級的值
data(){
return {
msg2:"子組件",
}
},
template:"<span>{{ nihao }}</span>",
}
}
}
}
})
</script>
子給父傳值
<body>
<div id="app">
<fuji></fuji>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
components:{
"fuji":{
data() {
return {
msg:"父級組件",
}
},
methods: {
getval(val){//接值函數(shù)
this.msg = val;
}
},
template:"<h1><ziji @change='getval'> </ziji>{{ msg }}</h1>",// 定義接值函數(shù) 頁面顯示為msg2
components:{
"ziji":{
data(){
return {
msg2:"子組件",
}
},
template:"<span></span>",
created() {
this.$emit("change",this.msg2);//模板掛載時 將變量拋出 誰拋的誰接
},
}
}
}
}
})
</script>
兄弟傳值
兄弟傳值為 兄弟B傳值給父級 然后父級再傳給兄弟A
<body>
<div id="app">
<fuji></fuji>
</div>
<template id="memeda">
<h1>
{{msg}}
<zijione :lalala="key"></zijione>
<zijitwo @change='getval'><zijitwo>//定義接值函數(shù)
</h1>
</template>
</body>
<script>
var vm = new Vue({
el:"#app",
components:{
"fuji":{
data() {
return {
msg:"父級組件",
key:""
}
},
methods: {
getval(val){//接值函數(shù)
this.key = val;
}
},
template:"#memeda",// 定義接值函數(shù)
components:{
"zijione":{
props:["lalala"],
data(){
return {
msg2:"子組件1",
}
},
template:"<span>{{ lalala }}</span>",//已經(jīng)接到值了
mounted() {
},
},
"zijitwo":{
data(){
return {
msg3:"子組件2",
}
},
template:"<span>{{msg3}}</span>",
created() {
this.$emit("change",this.msg3);//模板掛載時 將變量拋出
},
}
},
},
}
})
</script>
