vue的脚手架及创建一个新的实例化vue

vue操作的脚手架

 <!-- 创建容器，通绑定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>

创建一个新的实例化vue

<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>