Vue.js2.0

vue

内部指令

项目搭建

//安装
npm install live-server -g

//打开
live-server

v-if v-else v-show

v-if : 用来判断是否加载html的DOM
v-show : 则是通过css来控制

<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">已登录</div>
        <div v-else>未登录</div>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                isLogin : false
            }
        })
    </script>
</body>

v-for

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名

数组和对象的循环
<body>
    <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(student,index) in sortStudents">
                {{index}} : {{student.name}}--{{student.age}}
            </li>
        </ul>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                //数组排序
                items : [2,31,52,4,456,34,18,5],
                //对象排序
                students : [
                    {name:'greentea',age:24},
                    {name:'wang',age:1},
                    {name:'klaus',age:22}
                ]
            },
            computed : {
                sortItems : function(){
                    return this.items.sort(sortNumber);     //从小到大排列
                },
                sortStudents : function(){
                    return sortByKey(this.students,'age');
                }
            }
        });
        function sortNumber(a,b){
            return a-b;
        }

        //数组对象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>

v-text & v-html

v-text和{{}}的效果相同,{{}}的弊端就是当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}
v-html 可以输出带html标签的内容,也就是当内容有html标签的时候,是可以识别的

<span>{{ message }}</span>=<span v-text="message"></span><br/>

<span v-html="theHtml"></span>

v-on

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

<body>
    <h1>v-on</h1>
    <hr>
    <div id="app">
        number:{{score}}
        <p>
            <button v-on:click="add">add</button>
            <button @click="minus">minus</button>
            <input type="text" @keyup.enter="onEnter" v-model="score2">
            <!--<input type="text" @keyup.13="onEnter" v-model="score2">-->
        </p>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                score : 0,
                score2 : 1
            },
            methods : {
                add : function(){
                    this.score++;
                },
                minus : function () {
                    this.score--;
                },
                onEnter : function () {
                    this.score = this.score + parseInt(this.score2);
                }
            }
        })
    </script>
</body>

v-model

就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

<body>
    <h1>v-model</h1>
    <hr>
    <div id="app">
        <h4>文本框</h4>
        <p>{{message}}</p>
        <br>
        <p><input type="text" v-model="message"></p>
        <p><input type="text" v-model.lazy="message"><span>失去焦点后改变</span></p>
        <p><input type="text" v-model.number="message"><span>必须是数字,最先输入的是字符串就失效了</span></p>
        <p><input type="text" v-model.trim="message"><span>去空格</span></p>
        <hr>
        <h4>文本域</h4>
        <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
        <h4>多选框绑定一个值</h4>
        <input type="checkbox" id="isYes" v-model="isTrue">
        <label for="isYes">{{isTrue}}</label>
        <hr>
        <h4>多选框绑定数组</h4>
        <p>
            <input type="checkbox" id="greentea" value="greentea" v-model="names">
            <label for="greentea">greentea</label>
            <input type="checkbox" id="wang" value="wang" v-model="names">
            <label for="wang">wang</label>
            <input type="checkbox" id="klaus" value="klaus" v-model="names">
            <label for="klaus">klaus</label>
        </p>
        <p>{{names}}</p>
        <hr>
        <h4>单选框绑定</h4>
        <p>
            <input type="radio" id="one" value="male" v-model="sex">
            <label for="one">male</label>
            <input type="radio" id="two" value="female" v-model="sex">
            <label for="two">female</label>
            <p>已选择:{{sex}}</p>
        </p>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'hello world',
                isTrue : true,
                names : [],
                sex : 'male'
            }
        })
    </script>
</body>

v-bind

v-bind是处理HTML中的标签属性的

<body>
    <h1>v-bind</h1>
    <hr>
    <div id="app">
        <p>![](imgSrc)</p>
        <p><a :href="myBlog" target="_blank">me</a></p>
        <hr>
        <div :class="className">1.绑定class</div>
        <div :class="{classA:isTrue}">2.绑定class中的判断</div>
        <div :class="[classA,classB]">3.绑定class中的数组</div>
        <div :class="isTrue?classA:classB">4.绑定class中的三元运算符</div>
        <hr>
        <div>
            <input type="checkbox" id="theInput" v-model="isTrue">
            <label for="theInput">istrue={{isTrue}}</label>
        </div>
        <hr>
        <div :style="{color:red,fontSize:font}">5.绑定style</div>
        <div :style="styleObject">6.对象绑定style</div>
    </div>
    <style>
        .classA{
            color : red;
        }
        .classB{
            font-size: 200%;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                imgSrc : 'https://cn.vuejs.org/images/logo.png',
                myBlog : 'http://www.guoqianchen.com',
                className : 'classA',
                isTrue : true,
                classA : 'classA',
                classB : 'classB',
                red:'red',
                font:'20px',
                styleObject : {
                    color : 'green',
                    fontSize : '24px'
                }
            }
        })
    </script>
</body>

其他内部指令

v-pre 在模板中跳过vue的编译,直接输出原始值
v-cloak 在vue渲染完指定的整个DOM后才进行显示,它必须和CSS样式一起使用
v-once 在第一次DOM时进行渲染,渲染完成后视为静态内容

<body>
    <h1>v-pre&v-cloak&v-once</h1>
    <hr>
    <div id="app">
        <div v-pre>{{message}}</div>
        <div v-cloak>渲染完成后显示</div>
        <div v-once>{{message}}</div>
        <div><input type="text" v-model="message"></div>
        <div>{{message}}</div>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'hello world'
            }
        })
    </script>
</body>

全局API

什么是全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能.

1. Vue.directive自定义指令

Vue.directive('jspang',function(el,binding,vnode){
        el.style='color:'+binding.value;
});
自定义指令中的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。

<body>
<h1>Vue.directive 自定义指令</h1>
<hr>
<div id="app">
    <div v-greentea="color">{{num}}</div>
    <p><button @click="add">ADD</button></p>
    <p><button onclick="unbind()">解绑</button></p>
</div>
<script src="../assets/js/vue.js"></script>
<script>
    function unbind(){
        app.$destroy();
    }
    Vue.directive("greentea",{
        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 : 10,
            color : 'red'
        },
        methods : {
            add : function () {
                this.num++
            }
        }
    })
</script>
</body>

2. Vue.extend构造器的延伸

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

<body>
    <h1>Vue.extend</h1>
    <hr>
    <div id="author"></div>
    <author></author>

    <script src="../assets/js/vue.js"></script>
    <script>
        
        var authorExtend = Vue.extend({
            template : "<p><a :href='authorURL'>{{authorName}}</a></p>",
            data : function(){
                return {
                    authorName : 'greentea',
                    authorURL   : 'http://www.guoqianchen.com'
                }
            }
        });

        new authorExtend().$mount('#author');
        new authorExtend().$mount('author');
    </script>
</body>

3. Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

引用构造器外部数据
//在构造器外部声明数据
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})
在外部改变数据的三种方法
<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        {{count}}
    </div>
    <p><button onclick="add()">ADD</button></p>
    <script src="../assets/js/vue.js"></script>
    <script>
        function add(){
            //Vue.set(outdata,'count',3);   //使用Vue.set改变
            //app.count++;      //用Vue对象的方法添加
            outdata.count++;        //直接操作外部数据
        }
        var outdata = {
            count : 1,
            goods : 'book'
        }
        var app = new Vue({
            el : '#app',
            data : outdata
        })
    </script>
</body>
为什么要有Vue.set的存在

由于Javascript的限制，Vue不能自动检测以下变动的数组。
当你利用索引直接设置一个项时，vue不会为我们自动更新。
当你修改数组的长度时，vue不会为我们自动更新。

<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
    <p><button onclick="add()">ADD</button></p>
    <script src="../assets/js/vue.js"></script>
    <script>
        function add(){
            //Vue.set(outdata,'count',3);   //使用Vue.set改变
            //app.count++;      //用Vue对象的方法添加
            //outdata.count++;        //直接操作外部数据
            // app.arr[1] = 'ddd';      //无法改变数组的值
            Vue.set(app.arr,1,'ddd');
        }
        var outdata = {
            count : 1,
            // goods : 'book'
            arr : ['aaa','bbb','ccc']
        }
        var app = new Vue({
            el : '#app',
            data : outdata
        })
    </script>
</body>

这时我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

4. Vue的生命周期(钩子函数)

Vue一共有10个生命周期函数，利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

生命周期
<body>
    <h1>life cycle</h1>
    <hr>
    <div id="app">
        {{count}}
        <p><button @click="add">ADD</button></p>
    </div>
    <button onclick="app.$destroy()">destroy</button>
    <script src="../assets/js/vue.js"></script>
    <script>
        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>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'hello world'
            },
            template : `
                <h2 style="color:red">我是选项模板</h2>
            `
        })
    </script>
</body>
写在Template里的模板
<body>
    <h1>template</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <template id="dd2">
        <h2 style="color:red">我是Template标签模板</h2>
    </template>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'hello world'
            },
            template:'#dd2'
        })
    </script>
</body>
写在<script>标签里的模板
<body>
    <h1>template</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script src="../assets/js/vue.js"></script>
    <script type="x-template" id="dd3">
        <h2 style="color:red">我是script标签模板</h2>
    </script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                message : 'hello world'
            },
            template:'#dd3'
        })
    </script>
</body>

6. Component组件

全局注册组件

局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<body>
    <h1>component</h1>
    <hr>
    <div id="app">
        <greentea></greentea>
        <klaus></klaus>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        Vue.component('greentea',{
            template : `<div style="color:red">我是全局的组件</div>`
        })
        var app = new Vue({
            el : '#app',
            components : {
                "klaus" : {
                    template : `<div style="color:blue">我是局部的klaus组件</div>`
                }
            }
        })
    </script>
</body>
组件props属性设置
<body>
    <h1>component</h1>
    <hr>
    <div id="app">
        <klaus :here="country"></klaus>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : function(){
                return {
                    country : "CHINA"
                }
            },
            components : {
                "klaus" : {
                    template : `<div style="color:blue">from {{ here }}</div>`,
                    props:['here']
                }
            }
        })
    </script>
</body>
父子组件关系
<body>
    <h1>component3父子组件关系</h1>
    <hr>
    <div id="app">
        <klaus></klaus>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var city = {
            template : `<div style="color:green">天津</div>`
        }
        var klausComponent = {
            template : `<div style="color:red">klaus is handsome <city></city></div>`,
            components : {
                "city" : city
            }
        }
        
        var app = new Vue({
            el : '#app',
            // template : `<div>qweqweqwe<klaus></klaus></div>`,
            components : {
                "klaus" : klausComponent
            }
        })
    </script>
</body>
Component标签

<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

<body>
    <h1>component4标签</h1>
    <hr>
    <div id="app">
        <component :is="who"></component>
        <button @click="changeComponent">change</button>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var componentA = {
            template : `<div style="color:red">i am componentA</div>`
        }
        var componentB = {
            template : `<div style="color:green">i am componentB</div>`
        }
        var componentC = {
            template : `<div style="color:blue">i am 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>

选项

propsData Option 全局扩展的数据传递

propsData 不是和属性有关，他用在全局扩展时进行传递数据

<body>
    <h1>propsData</h1>
    <hr>
    <header></header>
    <script src="../assets/js/vue.js"></script>
    <script>
        var header_a = Vue.extend({
            template : `<p>{{message}}----{{a}}</p>`,
            data : function(){
                return {
                    message : 'Hello,I am header'
                }
            },
            props : ['a']
        })

        new header_a({propsData:{a:1}}).$mount('header');
    </script>
</body>

computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号等等

<body>
    <h1>computed option</h1>
    <hr>
    <div id="app">
        <p>{{newPrice}}</p>
        <ul>
            <li v-for="news in reverseNews">{{ news.title }}-----{{ news.date }}</li>
        </ul>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var newsList = [
            {title : 'first news',date : '2017/8/23'},
            {title : 'second news',date : '2017/8/29'},
            {title : 'third news',date : '2017/9/10'},
            {title : 'fourth news',date : '2017/11/20'},
            {title : 'fifth new',date : '2017/12/31'}
        ]
        var app = new Vue({
            el : '#app',
            data : {
                price : 99,
                newsList : newsList
            },
            computed : {
                newPrice : function(){
                    return this.price = '$'+this.price;
                },
                reverseNews : function(){
                    return this.newsList.reverse()
                }
            }
        })
    </script>
</body>

Methods Option

<body>
    <h1>methods option</h1>
    <hr>
    <div id="app">
        {{ num }}
        <!-- 1. 方法传值 -->
        <p><button @click="add(2,$event)">add</button></p>
        <!-- 2. 使用event -->
        <!-- 3. 组件调用原生的方法 -->
        <p><btn @click.native="add(1,$event)"></btn></p>
    </div>
    <!-- 4. 在作用域外调用Vue构造器的方法 -->
    <button onclick="app.add(5)">外部ADD</button>
    <script src="../assets/js/vue.js"></script>
    <script>
        var btn = {
            template : `<button>组件ADD</button>`
        }
        var app = new Vue({
            el : '#app',
            data : {
                num : 0
            },
            components : {
                "btn" : btn  
            },
            methods : {
                add : function(number,event){
                    this.num += number;
                    console.log(event);
                }
            }
        })
    </script>
</body>

Watch Option

数据变化的监控

<body>
    <h1>watch option</h1>
    <hr>
    <div id="app">
        <p>today : {{temperature}}</p>
        <p>advice : {{advice}}</p>
        <p>theNumber : {{theNumber}}</p>
        <p>
            <button @click="rise">rise</button>
            <button @click="decline">decline</button>
        </p>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : {
                temperature : 18,
                advice : 'jack',
                theNumber : ''
            },
            methods : {
                rise : function(){
                    this.temperature += 5;
                },
                decline : function(){
                    this.temperature -= 5;
                }
            },
            watch : {
                temperature : function(newVal,oldVal){
                    if(newVal >= 26){
                        this.advice = 't-shirt'
                    }else if(newVal < 26 && newVal > 0){
                        this.advice = 'jack'
                    }else{
                        this.advice = 'overcoat'
                    }
                }
            }
        })

        app.$watch('advice',function(newVal,oldVal){
            if(app.advice === 't-shirt'){
                app.theNumber = 1
            }else if(app.advice === 'jack') {
                app.theNumber = 2
            }else{
                app.theNumber = 3
            }
        })
    </script>
</body>

Mixins 混入选项操作

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        {{num}}
        <p><button @click="add">add</button></p>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        // 混入先执行,原生后执行
        var addConsole = {
            updated : function(){
                console.log('数据发生变化,现在:'+this.num );
            }
        }
        //全局最先执行 
        Vue.mixin({
            updated:function(){
                console.log('我是全局的update')
            }
        })

        var app = new Vue({
            el : '#app',
            data : {
                num : 1
            },
            methods : {
                add : function(){
                    this.num++
                }
            },
            updated : function(){
                console.log('我是原生的updated');
            },
            mixins : [addConsole]
        })
    </script>
</body>

Extends Option 扩展选项

这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级.

<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        ${num}
        <p><button @click="add">add</button></p>
    </div>
    <script src="../assets/js/vue.js"></script>
    <script>
        var extendsObj = {
            updated : function(){
                console.log('我是扩展的updated');
            },
            methods : {
                //方法名相同是不执行的,只执行原生的方法
                add : function(){
                    console.log('我是被扩展出来的方法');
                    this.num++;
                }
            }
        }

        var app = new Vue({
            el : '#app',
            data : {
                num : 1
            },
            methods : {
                add : function(){
                    console.log('我是原生的方法');
                    this.num++
                }
            },
            updated : function(){
                console.log('我是原生的updated');
            },
            //只能有一个扩展,和混入写法不相同
            extends : extendsObj,
            //修改插值的符号
            delimiters : ['${','}']
        })
    </script>
</body>

参考 : https://segmentfault.com/a/1190000010095089

实例和内置组件

实例属性

<body>
    <h1>Early Examples Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            //在Vue中使用jQuery
            mounted:function(){
                $('#app').html('我是jQuery!');
            }
        })
    </script>
</body>

实例方法

<body>
    <h1>example methods Demo2</h1>
    <hr>
    <div id="app">
        
    </div>
    <p><button onclick="destroy()">销毁</button></p>
    <p><button onclick="reload()">刷新</button></p>
    <script src="../assets/js/vue.js"></script>
    <script>
       var greentea = Vue.extend({
           template : `<p>{{message}}</p>`,
           data : function(){
               return {
                   message : 'hello,i am greentea'
               }
           },
           mounted : function(){
               console.log('mounted被创建');
           },
           destroyed : function(){
               console.log('destroy被销毁');
           },
           updated : function(){
               console.log('update更新之后');
           }
       })

       var vm = new greentea().$mount('#app');

       function destroy(){
           vm.$destroy();
       }
       function reload(){
           vm.$forceUpdate('updated被更新');
       }
    </script>
</body>

实例事件

<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        {{num}}
        <p><button @click="add">add</button></p>
    </div>
    <p><button onclick="reduce()">reduce</button></p>
    <script src="../assets/js/vue.js"></script>
    <script>
        var app = new Vue({
            el : '#app',
            data : function(){
                return {
                    num : 1
                }
            },
            methods : {
                add : function(){
                    this.num++;
                }
            }
        });
        app.$on('reduce',function(){
            console.log('执行了reduce方法');
            this.num--;
        });

        app.$once('reduceOnce',function(){
            console.log('只执行一次的方法');
            this.num--;
        });

        function reduce(){
            app.$emit('reduce');
        }

        function reduceOnce(){
            app.$emit('reduceOnce');
        }
        //关闭事件
        function off(){
            app.$off('reduce');
        }
    </script>
</body>

内置组件-slot讲解

<body>
    <h1>helloworld</h1>
    <hr>
    <div id="app">
        <greentea>
            <span slot="blogUrl">{{jspangData.blogUrl}}</span>
            <span slot="netName">{{jspangData.netName}}</span>
            <span slot="skill">{{jspangData.skill}}</span>
        </greentea>
    </div>

    <template id="tep">
        <div>
            <p>博客地址:<slot name="blogUrl"></slot></p>
            <p>网名:<slot name="netName"></slot></p>
            <p>技术类型:<slot name="skill"></slot></p>
        </div>
       
    </template>

    <script src="../assets/js/vue.js"></script>
    <script>
        var greentea = {
            template : '#tep'
        }
        var app = new Vue({
            el : '#app',
            data : function(){
                greenteaData : {
                    username : 'wang',
                    age : 24
                };
            },
            components : {
                'greentea' : greentea
            }
        })
    </script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,265评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,078评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,852评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,408评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,445评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,772评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,921评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,688评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,130评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,276评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,882评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2赞 348