<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 type="text/javascript" src="../js/vue.js">script>
head>
<body>
<h1>Vue.directive自定义指令h1>
<hr />
<div class="app">
<div v-huang='color'>{{num}}div>
<p><button @click="add">ADDbutton>p>
div>
<p>
<button onclick="unbind()">解绑button>
p>
<script type="text/javascript">
function unbind(){
app.$destroy();
}
Vue.directive('huang', {
bind: function(el,binding) {
console.log('1 - bind');
el.style='color:'+binding.value;
},
inserted: function() {
console.log('2 - inserted');
},
update: function() {
console.log('3 - update');
},
componentUpdated: function() {
console.log('4 - componentUpdated');
},
unbind: function() {
console.log('5 - unbind');
}
})
var app = new Vue({
el: '.app',
data: {
num: '0',
color: 'red'
},
methods: {
add: function() {
this.num++;
}
}
})
script>
body>
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:' {{authorName}}
',
data:function(){
return{
authorName:'huangxiaoguo',
authorUrl:'https://blog.csdn.net/huangxiaoguo1'
}
}
});
new authorUrl().$mount('author');
new authorUrl().$mount('.author');
script>
body>
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()">addbutton>p>
<script type="text/javascript">
function add() {
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>
<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">ADDbutton>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>
<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">
'color:red'
>我是script标签模板</h2>
script>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
message: 'hello world!'
},
template: "#dd3"
})
script>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>component组件-1title>
<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组件-1h1>
<hr />
<div class="app">
<huang>huang>
<panda here='china' from-here='sichuan'>panda>
<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:`'color:red'>我是全局的huang组件<
/div>`,
})
var app=new Vue({
el:'.app',
data:{
message:'China'
},
components:{
"panda":{
template:`我是局部的panda组件,自定义属性值是{{here}}-{{fromHere}}div>`,
props:[
'here',
'fromHere']
}
}
})
var ppa=
new Vue({
el:
'.ppa'
})
script>
body>
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: `'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>
<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">changeComponentbutton>
div>
<script type="text/javascript">
var componentA = {
template: `'color:red'>I'm componentA
`
}
var componentB = {
template: `I'm componentB <
/div>`
}
var componentC = {
template: `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>
