初识Vue

<div id="c1">
    <!--插值语法{{}}；react用{},angular用{{}}-->
    <h3>{{msg}}</h3>
</div>

<script src="./vue.js"></script>
<script>
    // 实例化一个Vue对象,名字是app;
    var app = new Vue({
        el: ‘#c1‘,
        data:{
            msg:‘学习Vue‘
        }
    });
    console.log(app);
    console.log(app.$data);
    console.log(app.$data.msg)


</script>

//常用的指令
v-text 
v-html 
v-if　　//条件渲染
v-show
v-for
v-bind　　
v-on  //注意:所有的原生js的事件使用v-on都可以绑定

<div id="c1">
    <h1 v-if = ‘show‘>哈哈</h1>  
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: ‘#c1‘,
        data:{
            msg:‘学习Vue‘,
            show:true,       //页面显示哈哈；如果show:false,页面不显示哈哈；
        }
    });
</script>

<div id="c1">
    <h1 v-if = ‘show‘>哈哈</h1>
    <!--事件的调用-->
    <button v-on:click = "clickHandler">切换</button>
    <!--<button @click="clickHandler">切换</button>  -->   <!--v-on  的简便写法-->
    <button v-on:click = "count+=1">加{{count}}</button>
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: ‘#c1‘,
        // data里面放数据属性；可以理解为小的数据库
        data:{
            show:true,
            count:0,
        },
        methods: {
            // 事件的声明
            clickHandler() {
                this.show = !this.show;
            },
        }
    });
</script>

<div id="c1">
    <h2 v-bind:title="title">我是h2</h2>
    <!--<h2 :title="title">我是h2</h2>-->        <!--v-bind:  的简便写法  ：-->
    <div class="box" v-bind:class="{box2:isGreen}"></div>
    <!--如果isGreen是true，会将box2添加到class中。如果是false，则不会。-->
    <button v-on:click="changeColor">切换颜色</button>
</div>

<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el: ‘#c1‘,
        data:{
            title:‘我是隐藏的‘,
            isGreen:true,
        },
        methods:{
            // 事件的声明
            changeColor(){
                this.isGreen = !this.isGreen;
            },
        }
    });
</script>