Vue的一些基本语法学习

1.在head标签的script标签中导入一个vue包

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

2.创建一个控制区

 <div id="app">
            <!--   v-cloak能够解决插值表达式闪烁的问题    -->
            <p v-cloak>{{msg}}</p> 
            <h1 v-text="msg"></h1>
            <p>{{msg1}}</p>
            <p v-text="msg1"></p>
            <!-- v-html 没有闪烁问题且覆盖元素中原本的内容，内容当作html显示-->
            <p v-html="msg1"></p>
            <!-- v-bind :在vue中用于提供绑定属性的指令的指令-->
            <!--v-bind 可以缩写成 ： ，v-bind后面还可以加上合法的js表达式-->
            <!-- vue 中提供了v-on 的事件绑定机制，缩写是 @-->
            <input type="button" value="按钮" v-bind:title="mytitle +'123'" v-on:click="show"><br/>
            <input type="button" value="按钮" :title="mytitle +'123'" v-on:mouseover="show">
        </div>

3.在一个script标签中new一个vue的对象

<script>
            var vm =new Vue({
                el:'#app',                      //el表示当前我们new的一个vue的实例，要控制页面上的每一个区域
                data:{                         //data存放的是el中要使用的数据
                    msg:'欢迎使用vue' ,
                    msg1:'<h1>欢迎使用vue</h1>'  ,                 //通过vue使用的指令，很方便的就能把数据渲染到页面上，程序员不需要手动的操作DOM元素
                    mytitle:'这是一个自定义的title'
                },
                methods:{ //methods中定义的是当前vue实例中所有可用的方法
                    show:function() {
                        alert('hello')
                    }
                }
            });
        </script>