vue快速使用

1、引用脚本

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

vm.＄data === data // => true
vm.＄el === document.getElementById('example') // => true

实例：使用srcipt做法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="example-1">
            <ul>
                <li v-for="item in items">
                    {{ item.message }}
                </li>
            </ul>
            <input  v-model="inpu"/>
            <span>{{revMsg}}</span>
            <button type="button" onclick="destroy()">销毁</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <script>
        var example1 = new Vue({
            el: '#example-1',
            data: {
                items: [{
                        message: 'Foo'
                    },
                    {
                        message: 'Bar'
                    }
                ],
                inpu:0
            },
            //创建前
            beforeCreate:function(){
                console.log("创建前进入beforeCreate inpu："+this.inpu+" $el："+this.$el);
            },
            //创建后
            created:function(){
                console.log("创建后进入created inpu："+this.inpu+" $el："+this.$el);
                //this.add();
            },
            //挂载前
            beforeMount:function(){
                console.log("挂载前进入beforeMount inpu："+this.inpu+" $el："+this.$el);
            },
            //挂载后
            mounted:function(){
                console.log("挂载后进入mounted inpu："+this.inpu+" $el："+this.$el);
            },
            //实例更新前
            beforeUpdate:function(){
                console.log("实例更新前进入beforeUpdate inpu："+this.inpu+" $el："+this.$el);
            },
            //实例更新后
            updated:function(){
                console.log("实例更新后进入updated inpu："+this.inpu+" $el："+this.$el);
            },
            //实例销毁前
            beforeDestroy:function(){
                console.log("实例销毁前进入updated inpu："+this.inpu+" $el："+this.$el);

            },
            //实例销毁后
            destroyed:function(){
            console.log("实例销毁后进入updated inpu："+this.inpu+" $el："+this.$el);
            },
            //定义方法
            methods: {
                //调用时候进入
                add(){
                    console.log("进入add");
                    for(var i = 0;i<2;i++){
                        this.items.push({
                            "message": i
                        })
                    }
                }
            },
             computed: {
                    //加载时候进入 在created后面  修改时候在computed后面 在updated前面
                    revMsg: function() {
                        console.log("进入computed revMsg inpu："+this.inpu+" $el："+this.$el);
                       
                    },
                    ss:function(){
                        console.log("进入computed ss inpu："+this.inpu+" $el："+this.$el);
                    }
                },
            watch:{
                    //值更变时候进入  修改是在 computed前面
                    inpu: function(val, oldVal) {
                        console.log("新值:"+val+"   旧值："+oldVal);
                    }
                }
        })
        
        function destroy(){
                example1.$destroy();
            }
    </script>
</html>

View Code

生命周期详细：https://www.cnblogs.com/weibanggang/p/9999055.html

运行结果：

使用export方法

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <ul id="example-1">
        <li v-for="item in datas" :key="item.message" >
            {{ item.message }}
        </li> 
        </ul>
    </div>
</template>

<script>
 export default {
       name: 'HelloWorld',
       props: {
         msg: ""
       },
         data() {
             return {
                 datas: [{
                     message: 'Foo'
                 },
                 {
                     message: 'Bar'
                 }
                 ]
             }
             
         },methods:{
            adds(){
                for (var i = 0; i < 10; i++) {
                    this.datas.push({"message":i});
                }
            }
        },
        created() {
            this.adds();
        }
     }

/*     var xx = {
        name: 'HelloWorld',
        props: {
            msg: ""
        },
        data() {
            return {
                datas: [{
                        message: 'Foo'
                    },
                    {
                        message: 'Bar'
                    }
                ]
            }
        },
        methods:{
            adds(){
                for (var i = 0; i < 20; i++) {
                    this.datas.push({"message":i});
                }
            }
        },
        created(){
            this.adds();
        }
    }
    export default xx; */

View Code

运行结果

案列下载地址：https://github.com/weibanggang/vueexport.git