Vue 实例篇

1. Vue的使用

1.1 vue.js 的安装

1. 方式一：直接CDN引入

   <script src='https://cdn.jsdelivr.net/npm/vue'></script> 
   

2. 方式二：下载到本地引入

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

3. 方式三：npm 下载

   // 下载命令
   npm install vue
   // 页面中引用
   <script src="node_modules/vue/dist/vue.js"></script>
   

1.2 vue的构造函数

1. 下载 vue 的包(一个js文件)

2. 在 html 页面中引入 vue 包，当导入包之后，在浏览器的内存中就多了一个Vue的构造函数

3. vue 构造函数的参数为一个对象 :Vue ({})

4. 对象中有以下属性：
   el:’ ’ 表示要控制页面中的哪个位置
   data:{} 里面存放 el 中要用到的数据
   methods:{} 里面定义 Vue 实例所有可用的方法
   computed:{} 主要是做一些计算型的业务操作
   components 注册子组件

1.3 vue使用示例

1. 在 script标签 或 js文件 中创建一个 Vue 实例

    let vm =  new Vue({
             
          el:'#app',  // el 表示要控制页面中的哪个位置，如 id 为 app 的元素区域 (不要给 body 加 id Vue2.0不允许)
          data:{
          // data 存放的是 el 中要用到的数据
              msg:'欢迎学习Vue' // 在 el 控制的区域中用 插值表达式 {
        {msg}} 可以引入数据
          },
          methods:{
           
           // 定义 Vue 实例所有可用的方法             
          }
    }) 
   

注意：在 Vue 实例中，如果想要获取 data 上的数据，或者想要调用 methods 中的方法，必须通过 this.数据属性名
或 this.方法名 来进行访问，这里的 this 就是 Vue 实例

注意：Vue 实例会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上
同步到页面中去

2. Vue实例的属性

2.1 el属性（绑定区域）

1. el: "" 是表示要控制页面中的哪个位置，一般绑定控制区域的选择器

    el: '#app' //绑定 id，较为常用
    el: '.app' //绑定 类，用的较少
    // 另一种绑定方式
    new Vue ({
        
   	
   }).$mount('#app')
   // $mount('#app') 代替了 el
   

2.2 data属性（存储数据）

1. data:{} 里面存放 el 控制区域中要用到的数据

    data:{
        
   	msg: '我是数据'
    }
   

2.3 methods属性（定义方法）

1. methods:{} 里面定义 Vue 实例所有可用的方法
2. methods:{}里面定义的方法，在调用时需要加()。但是当作事件处理函数调用时，需要穿参数就加(),否则不需要加()

    // methods 里面的方法的 this 是 Vue 实例对象，但是