文章目錄

  • vue基礎
  • v-cloak
  • v-text
  • v-html
  • v-bind 綁定屬性
  • v-on 綁定事件
  • 事件修飾符
  • stop 阻止冒泡
  • capture
  • self
  • once
  • 問題：
  • （示例：跑馬燈效果）
  • v-model 雙線綁定
  • v-for 循環遍歷
  • filter過濾器
  • 自定義監按鍵
  • 自定義全局指令：
  • 自定義私有指令：
  • Vue生命週期
  • Vue 動畫
  • Vue組件
  • 路由守衞

vue基礎

v-cloak

解決插值表達式閃爍的問題

<style>
	[v-cloak]{
		display:block;
	}
</style>
	<p c-cloak>{{user}}</p>

v-text

v-text 和{{}}表達式作用差不多
1）但是v-test默認沒有閃爍問題
2）v-test會覆原有的內容，但插值表達式只會替換自己的佔位符，不會吧整個元素清空
<p>++++{{user}}</p>
<p v-test="user">============</p>

v-html

<p v-html="html"></p><!--傻子-->
<p v-test="html"></p><!--<h1>傻子</h1>-->

<script>
var a=new Vue({
	el:'#app',
	data：{
		html:"<h1>傻子</h1>",
		user{name:"yangyang",age:17},
	},
})
</script>

v-bind 綁定屬性

v-bind 可以被簡寫位 英文的 ‘:’ 後面加上需要綁定的屬性

<input type="button" value="按鈕" v-bind:title="mytitle"+'可以添加元素' >
<input type="button" value="按鈕" :title="mytitle"+'可以添加元素' >
<script>
	var app=new Vue({
		el:'#qpp',
		data:{
			mytitle:"這是一個自定義的title",
		}
	})
</script>

v-bind 還可以綁定class

<style>
	.a1{
		color:red;
	}
	.a2{
		letter-spaction:0.5em;
	}
</style>
<body>
  <div id="app">
	<h1 :class="{'a1':flag}">這是一段文字</h1>
	<!--可以有多個屬性-->
  </div>
</body>
<script>
	var app=new Vue({
		el:"#app",
		data:{
			flag:true;
		}
	})
</script>

v-bind 還能綁定style 這裏就不做過多贅述了

v-on 綁定事件

事件綁定機制
v-on 縮寫是 '@'符號

<input type="button" value="按鈕" v-on:click="show">
	<script>
		var app=new Vue({
			el:'#app',
			data:{},
			methods:{
				show:function(){
					alert("aaa");
				}
			}
		})
	</script>

當前端頁面提出：
捕獲事件的機制

事件修飾符

stop 阻止冒泡

<div @click="zdiv()">
		<input type="button" value="戳！！！！" @click.stop="zinput()">
	</div>
	<!--效果：點擊button按鈕，'zdiv()'事件不會觸發-->

capture

實現捕獲出發事件的機制

self

實現只有點擊當前元素的時候，才會觸發。

once

<a href="www.baidu.com" @click.prevent.once="linkClick" >有問題問百度</a>

只觸發一次事件管理

問題：

1）stop 和 self的區別
①stop 組織冒泡行為
②self 只會阻止自己身上冒泡行為，並不會阻止真正的冒泡行為

（示例：跑馬燈效果）

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="浪~" @click="lang">
        <input type="button" value="不浪了" @click="bulang">
        <p v-text="msg"></p>
        <!--<p v-html="msghtml"></p>-->
    </div>
</body>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            msg:"猥瑣發育，別浪!",
            msghtml:"<h1>{{msg}}</h1>",
            interval_id:null;
        },
        methods:{
            //注意：在vue實例中，如果想要獲取data裏面的屬性，或者想要調用methods中的方法，鄙俗使用 this關鍵字；
            //比如：this.屬性名 this.方法名
            lang(){
                this.interval=setInterval(_=>{
                    //點擊按鈕後 開啓自動定時器；
                    //獲取到頭的第一個字符
                    var start=this.msg.substring(0,1);  //字符串截取
                    console.log(start);
                    var end=this.msg.substring(1);
                    console.log(end);
                    this.msg=end+start;
                    //注意vue實例，會監聽自己身上的data ,只要data發生改變，就會把自己最新的數據同步到頁面中去
                },400 );

            },
            bulang(){
				clearInterval(this.interval);
            },

        }
    });

</script>
</html>

v-model 雙線綁定

使用 v-model 可以實現‘表單元素’ and ‘model’ 中數據的雙向綁定
注意： v-model 只能運用在表單元素中。
打包命令 npm run bild

v-for 循環遍歷

<p v-for="(item,index) in list">{{item}},{{index}}</p>
<sctipy>
new Vue({
	el:"#app",
	data:{
		list:[a,b,c,d,e,f,g]
	}
})
</script>

filter過濾器

過濾器實在渲染數據之前執行的操作 例子：
過濾器分為私有過濾器和公共過濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script/vue.js"></script>
</head>
<body>
    <div id="app">
                    <td>{{ctime |test}}</td>
    </div>
    <div id="app">
                    <td>{{towtime |test}}</td>
    </div>
</body>
<script>
	//公共過濾器
    Vue.filter("test",res=>{
        var y=res.getFullYear();
        var M=res.getMonth()+1;
        var D=res.getDate();
        var hh=res.getHours();
        var mm=res.getMinutes();
        var ss=res.getSeconds();
        return `${y}-${M}-${D} ${hh}:${mm}:${ss}`;
    })
    var app=new Vue({
        el: "#app",
        data:{
        	ctime:new Date();
        },
        methods:{}
    })
    var app2=new Vue({
        el: "#app2",
        data:{
        	towtime:new Date();
        },
        methods:{}
        filter:{
			test:function(time){//私有的過濾器
				//...
			}
		}
        
    })

</script>
</html>

自定義監按鍵

<input type="text" @keyup.enter="add()"> <!--監聽回車彈起事件。-->
<!--
	.enter 是官方封裝好的 如果碰上官方沒有封裝的 需要自己設置
	鍵盤按鍵對應的鍵碼	
-->
		<input type="text" @keyup.${鍵碼}="add()">
	<script>
		Vue.config.keyCodes.${自定義名稱}=	${鍵碼};
	</script>

自定義全局指令：

1.是input框獲得焦點：

<body>
	<input type="text" value="" v-test="'red'" />
</body>
<script>
	//定義全局質量
	/*
		第一個參數是指令的名字，前面不用加"v-",但是在調用的時候，需要加上"v-"
		第二個參數是一個對象 裏面有一些函數，這些函數可以在特定的階段執行特定的操作
	*/
	Vue.directive('test',{
	//每個函數第一個參數都是el ，標識被綁定的元素，是一個原生的js對象。
	bind:function(el){//每當指令綁定到元素上的時候後，會立刻執行bind函數，只執行一次
		
	},
	inserted:function(el,binding){//inserted 表示元素插入到DOM中的時候，會執行inserted函數
		console.log(binding.name)// test  name:指令名稱
		console.log(binding.value); //計算表達式 輸出表達式的值
		console.log(binding.ecpression); // 不計算表達式 輸出原始值
	},
	update:function(el){//當vNode更新的時候，會執行update,可能會執行多次
		
	}
	})
</script>

vue axios 接收stream流式的輸出_自定義

自定義私有指令：

<script>
    var app=new Vue({
        el: "#app",
        data:{
        	ctime:new Date();
        },
        methods:{}
    })
    var app2=new Vue({
        el: "#app2",
        data:{
        	towtime:new Date();
        },
        methods:{}
        filter:{//私有的過濾器
			test:function(time){
				//...
			}
		}
        directives:{
			'name':function(){
				bind(el,binding){
					//指令定義
				}
			}
		}
    })

</script>

Vue生命週期

又名生命週期鈎子，

vue axios 接收stream流式的輸出_Vue_02


beforeCreate:實例完全創建出來之前執行。 函數執行的時候，data和methods中的數據都還未初始化，裏面的屬性和方法暫時無法被使用。

created: 執行created函數時，data與methods中的數據和方法剛被初始化，可以使用。（data與methods最早只能在created函數中使用）

beforeMount:模板已經編譯成功並保存在內存中，但並未渲染到頁面

mounted:內存中的模板已經成功掛載到頁面中。(如果想操作頁面上每個dom節點，應該在mounted函數中操作)

beforeUpdate:這個時候表示數據已經更新，但界面還未更新的時候

update:uodate函數執行的時候，頁面數據已經與內存數據保持同步了。

beforeDestroy:執行beforeDestroy函數時候，表明vue已經進入銷燬階段。此時date與methods中以及過濾器、指令都還處於可用狀態。

destroyed:表示已經被完全銷燬。

Vue 動畫


Vue組件

什麼是組件： 為了拆分Vue的代碼量，以不同的組件來劃分不同的功能模塊。

路由守衞

var rou=new VueRouter({
        routes:[
            {path:"/index",component:index,},
            {path:"/index1",component:index1,},
            {name:"index2",path:"/index2",component:index2}]
    });
    var user=false;
    rou.beforeEach(function (to, from, next) {
        //to 你想要切換的路由路徑
        //from 你要從哪個路由下切換
        //next是一個function next()
        console.log(to, from, next);
        var auth=["/index1"]
        if(to.path.indexOf(auth)!=-1){
            if(user){
                next();
            }else{
                //兩種方式都可以
                //next({path:"/index2"})
                next({name:"index2"})
            }
        }else{
            next();
        }
    })