3月7的博客

 <!-- 创建容器，通绑定id值

    注：搭建脚手架（vue-cli）后只能出现一个容器-->

    <div id="app">

        <!-- {{}}  插值-->

        {{message}}

    </div>

    <div id="abc" class="box">

        {{aaa}}--------

        <h1>

            {{a+b}}------{{c+d}}-----{{e+f}}-----{{c>9?1:2}}-----{{func(99)}}

        </h1>

    </div>

    <div id="ips">

        {{this.abc}}

        <h1>

            <a href="http://www.baidu.com">访问百度</a>

            <!-- 指令

            1.绑定元素的属性 v-bind: -->

            <a v-bind:href="num">访问vue官网</a>

        </h1>

    </div>

</body>

<script src="../vue.js"></script>

<script>

    // vue启动时出现的提示,Vue.config.productionTip阻止启动提示

    Vue.config.productionTip = false;

    // 1.el:"容器名称，如id或class等"

    // 2.Vue实例.$mount("容器名称，如id或class等")

    // 注：$mount绑定方式一定放在实例最后

    var vm = new Vue({

        // 1.data:{}对象式

        // 2.data(){return{}}函数式

        // 注：不要使用箭头函数,搭建脚手架（vue-cli）后，必须使用函数式

        // data:{

        //     abc:"我是王五"

        // },

        // data:function(){

        //     return{

        //         abc:"我是赵六，今天学习vue"

        //     }

        // },

        data() {

            return {

                abc:"我是赵六",

                num:"https://v2.cn.vuejs.org/v2/guide/instance.html"

            }

        },

    })

    vm.$mount("#ips");

    // 创建一个新的实例化Vue

    var vms = new Vue({

        // el绑定创建的容器

        el:".box",

        // data用于定义变量的集合,通常与插值提供

        data:{

            aaa:"第一天学习Vue,class",

            a:"我是张三",

            b:"我今天学习vue",

            c:10,

            d:20,

            e:[1,2,3],

            f:[4,5,6],

            func(a){

                return a;

            }

        }

    })

    var app = new Vue({

        // el绑定创建的容器

        el:"#app",

        data:{

            message:"Hello Word"

        }

    })

</script>

</html>