vue學習（二）—vue.js2.0全域性API學習
阿新 • • 發佈：2019-02-15
- Vue.directive自定義指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.directive自定義指令</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script - Vue.extend擴充套件例項構造器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.extend擴充套件例項構造器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Vue.extend擴充套件例項構造器</h1>
<hr />
<author></author>
<div class="author"></div>
<script type="text/javascript">
var authorUrl = Vue.extend({
template:'<p> <a :href="authorUrl">{{authorName}}</a> </p>',
data:function(){
return{
authorName:'huangxiaoguo',
authorUrl:'https://blog.csdn.net/huangxiaoguo1'
}
}
});
new authorUrl().$mount('author');
new authorUrl().$mount('.author');
</script>
</body>
</html>- Vue.set全域性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.set全域性操作</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Vue.set全域性操作</h1>
<hr />
<div class="app">
{{message.count}}
<ul>
<li v-for="item in message.arr">{{item}}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
<!--
由於Javascript的限制，Vue不能自動檢測以下變動的陣列。
*當你利用索引直接設定一個項時，vue不會為我們自動更新。
*當你修改陣列的長度時，vue不會為我們自動更新。
*
* 這時我們的介面是不會自動跟新陣列的，
* 我們需要用Vue.set(app.message.arr,1,'dd')來設定改變，
* vue才會給我們自動更新，
* 這就是Vue.set存在的意義。
-->
<script type="text/javascript">
function add() {
//Vue.set(outData,'count',2);
//app.message.count++;
//outData.count++;
/**
* vue可能監聽不到（當沒有其他的dom發生變化，改變陣列下標的時候）
*/
//app.message.arr[1]='ddd';
Vue.set(app.message.arr, 1, 'dd');
}
var outData = {
count: 1,
goods: 'car',
arr: ['aaa', 'bbb', 'ccc']
}
var app = new Vue({
el: '.app',
data: {
message: outData
}
})
</script>
</body>
</html>- 生命週期
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命週期</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>生命週期</h1>
<hr />
<div class="app">
{{count}}
<p><button @click="add">ADD</button></p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
count: 1
},
methods: {
add: function() {
this.count++;
}
},
beforeCreate: function() {
console.log('1-beforeCreate 初始化之前');
},
created: function() {
console.log('2-created 建立完成');
},
beforeMount: function() {
console.log('3-beforeMount 掛載之前');
},
mounted: function() {
console.log('4-mounted 被掛載之後');
},
beforeUpdate: function() {
console.log('5-beforeUpdate 資料更新前');
},
updated: function() {
console.log('6-updated 被更新後');
},
activated: function() {
console.log('7-activated');
},
deactivated: function() {
console.log('8-deactivated');
},
beforeDestroy: function() {
console.log('9-beforeDestroy 銷燬之前');
},
destroyed: function() {
console.log('10-destroyed 銷燬之後')
}
})
</script>
</body>
</html>- Template 製作模版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template 製作模版</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Template 製作模版</h1>
<hr />
<div class="app">
<!--
這個模組是放模板的，當有模板的時候，
裡面所有的內容都會被替換掉
-->
{{message}}
</div>
<div>
<!--
這種模板，是在本頁面內單獨使用的模板
-->
<template id='dd2'>
<h2 style='color:red'>我是Template標籤模板</h2>
</template>
</div>
<!--
這種模板可以外部引用，重複高，使得頁面整潔
-->
<script type="x-template" id="dd3">
<h2 style='color:red'>我是script標籤模板</h2>
</script>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
message: 'hello world!'
},
/**
* 這種模板比較死，適合少內容的寫法
*/
//template:`
//<h2 style='color:red'>我是選項模板</h2>
//`
template: "#dd3"
})
</script>
</body>
</html>- component元件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component元件-1</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<h1>component元件-1</h1>
<hr />
<div class="app">
<huang></huang>
<panda here='china' from-here='sichuan'></panda>
<!--
使用data中的值
-->
<panda v-bind:here='message'></panda>
<!--
簡寫
-->
<panda :here='message'></panda>
</div>
<div class="ppa">
<huang></huang>
</div>
<script type="text/javascript">
Vue.component('huang',{
template:`<div style='color:red'>我是全域性的huang元件</div>`,
})
var app=new Vue({
el:'.app',
data:{
message:'China'
},
components:{
"panda":{
template:`<div style='color:green'>我是區域性的panda元件,自定義屬性值是{{here}}-{{fromHere}}</div>`,
props:['here','fromHere']
}
}
})
var ppa=new Vue({
el:'.ppa'
})
</script>
</body>
</html>
- component元件-2(父子元件的關係)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component元件-2(父子元件的關係)</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>component元件-2(父子元件的關係)</h1>
<hr />
<div class="app">
<panda></panda>
</div>
<script type="text/javascript">
var city = {
template: `<div style='color:green'>sichuan of China!</div>`
}
var panda = {
template: `
<div>
<p style='color:red'>panda from China!</p>
<city></city>
</div>
`,
components: {
"city": city
}
}
var app = new Vue({
el: '.app',
components: {
"panda": panda
}
})
</script>
</body>
</html>- component元件-3(動態新增元件)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component元件-3(動態新增元件)</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>component元件-3(動態新增元件)</h1>
<hr />
<div class="app">
<component :is='who'></component>
<button @click="changeComponent">changeComponent</button>
</div>
<script type="text/javascript">
var componentA = {
template: `<div style='color:red'>I'm componentA </div>`
}
var componentB = {
template: `<div style='color:green'>I'm componentB </div>`
}
var componentC = {
template: `<div style='color:pink'>I'm componentC </div>`
}
var app = new Vue({
el: '.app',
data: {
who: 'componentA'
},
components: {
"componentA": componentA,
"componentB": componentB,
"componentC": componentC
},
methods: {
changeComponent: function() {
if(this.who=='componentA'){
this.who='componentB';
}else if(this.who=='componentB'){
this.who='componentC'
}else{
this.who='componentA'
}
}
}
})
</script>
</body>
</html>