在构造器外部用Vue提供的API函数来定义新的功能。
vue.directive
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue.directive 自定义指令</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.directive 自定义指令</h1>
<hr>
<div id="app">
<div v-jsxwk="color">{{num}}</div>
<button v-on:click="add">ADD</button>
</div>
<p>
<button οnclick="unbind()">解绑</button>
</p>
<script type="text/javascript">
// 解绑
function unbind(){
app.$destroy();
}
// 自定义指令
Vue.directive("jsxwk",{
bind:function () {// 被绑定，绑定时只执行一次
console.log('1-bind');
},
inserted:function () {// 绑定到节点，插入时调用
console.log('2-inserted');
},
update:function (el,binding) {// 组件更新，更新时调用
el.style="color:"+binding.value;
console.log('3-update');
},
componentUpdated:function () {// 组件更新完成，完成时调用
console.log('4-componentUpdated');
},
unbind:function () {// 解绑，解绑时调用
console.log('5-unbind');
}
});
var app = new Vue({
el: '#app',
data: {
num: 10,
color:'red'
},
methods:{
add:function () {
this.num++;
}
}
})
</script>
</body>
</html>
vue.extend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.extend 扩展实例构造器</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.extend 扩展实例构造器</h1>
<hr>
<author></author>
<script type="text/javascript">
var authorExtend = Vue.extend({
template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
data:function () {
return{
authorName:'xwk',
authorURL:'http://www.baidu.com'
}
}
});
new authorExtend().$mount('author');
</script>
</body>
</html>
vue.set
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.set 全局操作</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.set 全局操作</h1>
<hr>
<div id="app">
{{count}}
</div>
<p><button οnclick="add()">add</button></p>
<script type="text/javascript">
function add() {
//Vue.set(outData,'count',2);
//app.count++;
outData.count++;
}
var outData={
count:1,
goods:'car'
}
var app = new Vue({
el: '#app',
data: outData
})
</script>
</body>
</html>
Vue生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的生命周期</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue的生命周期</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">ADD</button></p>
</div>
<button οnclick="app.$destroy()">销毁</button>
<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 lang="en">
<head>
<meta charset="UTF-8">
<title>Template制作模板</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Template制作模板</h1>
<hr>
<div id="app">
{{message}}
</div>
<template id="dd2">
<h2 style="color: red">我是template标签模板</h2>
</template>
<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 word!+xwk'
},
template: "#dd3"
// template: `<h2 style="color: red">我是选项模板</h2>`
})
</script>
</body>
</html>
Component 初识组件
