02生命周期

02生命周期

1,自定义指令

<div v-jspang="color">{{num}}</div>
<p><button @click="add">ADD</button></p>
Vue.directive("jspang",function(el,binding){
// console.log(el);
// console.log(binding);
// console.log(binding.name);
// console.log(binding.value);
// console.log(binding.expression);
el.style="color:"+binding.value;
});

2,扩展实例构造器

<body>
    <h1>Vue.extend 扩展实例构造器</h1>
    <hr>
    <div id="author"></div>
    <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://jspang.com'
                }
            }
        });
        new authorExtend().$mount('#author');
        new authorExtend().$mount('author');
         
    </script>
</body>

3,Vue.set 全局操作

<body>
   <h1>Vue.set 全局操作</h1>
   <hr>
   <div id="app">
       <p>{{count}}</p>
       <ul>
           <li v-for=" aa in arr">{{aa}}</li>
       </ul>
     
   </div>
   <button onclick="add()">外部添加</button>
   <script type="text/javascript">
   
       function add(){
           console.log("我已经执行了");
          // Vue.set(outData,'count',4);
          // app.count++;
          //outData.count++;
          //app.arr[1]='ddd';
          Vue.set(app.arr,1,'ddd');
       }
       var outData={
           count:1,
           goodName:'car',
           arr:['aaa','bbb','ccc']
       };
       var app=new Vue({
           el:'#app',
           //引用外部数据
           data:outData
       })
   </script>
</body>

4,Vue的声明周期(钩子函数)

<body>
<h1>Vue的生命周期(钩子函数)</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">add</button></p>
</div>
<button onclick="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>

5,Template 制作模板

<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 world!'
},
template:"#dd2"
// template:`
//     <h2 style="color:red">我是选项模板</h2>
// `
})
</script>
</body>

6,Component 初识组件

<body>
<h1>Component-1</h1>
<hr>
<div id="app">
<jspang></jspang>
<panda></panda>
</div>
<script type="text/javascript">
Vue.component('jspang',{
template:`<div style="color:red">我是全局的jspang组件</div>`
})
var app = new Vue({
el:'#app',
components:{
"panda":{
template:`<div style="color:green">我是局部的panda组件</div>`
}
}
})
</script>
</body>

7,Component组件props属性设置

<body>
<h1>Component-2</h1>
<hr>
<div id="app">
<panda :here="message"></panda>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'China'
},
components:{
"panda":{
template:`<div style="color:green">Panda from {{ here }}</div>`,
props:['here']
}
}
})
</script>
</body>

8,Component 父子组件关系

<body>
<h1>Component 父子组件关系</h1>
<hr>
<div id="app">
<panda></panda>
</div>
<script type="text/javascript">
var city = {
template:`<div style="color:green;">siChuan of China.</div>`
}
var pandaComponent = {
template:`
<div>
<p>Panda from China!</p>
<city></city>
</div>
`,
components:{
"city":city
}
}
var app = new Vue({
el:'#app',
components:{
"panda":pandaComponent
}
})
</script>
</body>

9,Component 标签

<body>
<h1>Component-4</h1>
<hr>
<div id="app">
<componcnet :is="who"></componcnet>
<button @click="changeConponent">changeConponent</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:{
changeConponent:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC";
}else{
this.who="componentA";
}
}
}
})
</script>
</body>



回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置