本文深入探讨Vue.js的关键特性，包括全局API、自定义指令、生命周期钩子、组件及其实现方式等内容，并通过示例代码展示如何在实际项目中运用这些特性。
全局API学习（api,定义好的方法，全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能）
Vue.directive自定义指令（自己定义v-指令）
<div v-direc="color">{{mesgess}}</div>
<script>
Vue.derective('direc',function(el,binding,vnode){
el.style='color'+binding.valne;
});
var app = new Vue({
el:'#app',
data:{
mesgess:'文本'，
color:'red'
}
});
</script>
*el: 指令所绑定的元素，可以用来直接操作DOM
*binding: 一个对象，包含指令的很多信息
*vnode: Vue编译生成的虚拟节点
生命周期（钩子函数）----注意这时传入的是一个对象
Vue.derective('direc',{
bind:function(){//被绑定
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('1 - bind');
}
});
Vue.extend返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器---类似的一个vue构造器
<author></author>
<script type="text/javascript">
var authorExtend = Vue.extend({
template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'JSPang',
authorUrl:'http://www.jspang.com'
}
}
});
new authorExtend().$mount('author'); ----注意最后还需要针对这个构造器进一步的挂载
</script>
Vue.set()方法的出现就是为了在vue构造器的外面操作构造器里面的数据、方法或赋值。
首先vue构造器的内部使用构造器外部声明的变量
var oData = {
count:1,
name:'one01'
};
var app = new Vue({
el:'#app',
data:oData,
});
现在改变对象中的赋值
a.使用Vue.set()方法
function appChange(){
Vue.set(oData,'count',4);
}
b.直接更改vue构建的对象
app.count = 4;
c.直接操作外部声明的对象属性
oData.count = 35324;
需要注意的点是，外部构建的数据为一个数组的时候当外部方法去操作这个数组的时候，Vue构造器内部的数组是不对更改的。所以需要Vue.set的存在！
Vue生命周期函数
<body>
<h1>构造器的声明周期</h1>
<hr>
<div id="app">
{{message}}
<p><button @click="jia">加分</button></p>
</div>
<button onclick="app.$destroy()">销毁</button>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:1
},
methods:{
jia:function(){
this.message ++;
}
},
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>
Template模版制作（意思是编写一个由html标签组成的可多次使用的模块）
1.在vue构造器中写模版
var app = new Vue({
el:'#app',
data:{
mesgess:'wenben!'
},
template:`<div>这是一个模版，需要注意的点就是这里使用的标点符号</div>`
});
2.在template标签里写模版,注意点是需要在vue构造器的内部再次的使用template调用
<template id="thisTemplate">
<div>这是一个模版</div>
</template>
<script>
var app = new Vue({
el:'#app',
data:{
mesgess:'hhh',
},
template:'#thisTemplate',
});
</script>
3、在script标签中设置模版
<script id="thisScriptTemplate">
<div>this Script Template!</div>
</script>
<script>
var app = new Vue({
el:'#app',
data:{
mesgess:'hhh',
},
template:'#thisScriptTemplate',
});
</script>
4.在vue-cli中**.vue文件也是一种建造模版的方法
Vue.conponent设立组件：
全局组件--在vue构造器的外部直接设立组件
<thisConpoment>******</thisConpoment>
<script>
Vue.conponent('thisConpoment',{
template:`<div>this is a conpoment</div>`;
});
</script>
局部组件--在构造器的内部设立的组件（其中的conpoments）
<thisConpoment>******</thisConpoment>
<script>
var app = new Vue({
el:'#app',
conponents:{
'thisConpoment':{
template:`<div>this is a conpoment</div>`;
}
}
});
</script>
conponent组件的props属性，props选项就是设置和获取标签上的属性值的
<div id="app">
<panda here="China"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ here }}.</div>`,
props:['here']
}
}
})
</script>
以上的代码作用是props获取到了组件的here属性的值，之后在赋值{{here}}
ps:如果要获取的属性中带有‘-’，可直接写成驼峰法 如：here-name -> hereName
父子组件嵌套使用
<father></father>
var son = {
template:`<p>儿子</p>`
};
var father ={
template:`<div><son></son></div>`,
conponents:{
'son':son
}
};
var app = new Vue({
el:'#app',
conponents:{
'father':father
}
});
注意的点：子组件一定要写在父组件的前面，在父组件应用的时候才可以调用到
<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件------以下的代码使用了该标签的is属性绑定上将要显示具体组件
<div id="app">
<component v-bind: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>
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
