Vue的基本使用

       1.导入vue

        2.结构

        3.vue语法

 <!-- 1.导入vue -->
    <script src="vue.js"></script>
    <!-- 2.结构 -->
    <div id="app">
        <!-- 插值语法 -->
        <p>{{msg}}</p>
    </div>
    <!-- vue语法 -->
    <script>
        // 创建vue实例
        var app = new Vue({
            // 挂载点   el其实是element 
            el: '#app',
            data: {
                // 数据
                msg: '一年三百六十日，夺尸横戈马上行'
            }
        })
    </script>

在Vue项目中，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的。通过Vue实例化，将Vue实力的成员与DOM相关联。

el唯一的根标签：

其实这是用的是一个选择器，本质上是document.querySelector(),

作用是：绑定挂载元素。

el绑定挂载元素后接下来全部操作都将在该元素内进行，元素外则不受影响选项值可以是选择符，也可以是元素的DOM元素名称。

el标签绑定元素的方法：

1. 通过id值进行绑定  eg：'#app' 
2. 通过class值进行绑定    eg：'.app'         
3. 通过标签进行绑定   eg：'div'                     

 data初始数据

data 是Vue实力的数据对象，Vue 会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化

data中的数据是调用原本是通过this.data.变量名称（） 来调用并使用的，但是Vue把data的变量和methods的方法挂载到Vue实例中了，所以调用可以直接this.变量名称或者this.方法名称

methods定义方法 

通过Vue实例可以直接访问这些方法，在定义的方法中，this指向Vue实例本身。定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件触发后，执行相应的事件处理方法 。