vue学习（二）—vue.js2.0全局API学习
Vue.directive自定义指令<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue.directive自定义指令</title>&l
·
- 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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>Vue.directive自定义指令</h1>
<hr />
<div class="app">
<!--
自定义指令v-huang
-->
<div v-huang='color'>{{num}}</div>
<p><button @click="add">ADD</button></p>
</div>
<p>
<button onclick="unbind()">解绑</button>
</p>
<script type="text/javascript">
// Vue.directive('huang',function(el,binding){
// console.log(el);
// console.log(binding);
// el.style='color:'+binding.value;
// })
/**
* 解绑
*/
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>- 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>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献19条内容
所有评论(0)