vue的基本介绍1

---

前言

vue是一款用于构建用户界面的 JavaScript 框架,有以下两个主要核心功能

• 声明式渲染：Vue 通过自己的模板语法扩展了标准 HTML，使得我们可以声明式地描述基于 JavaScript 状态输出的 HTML。
• 响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

提示：具体内容可参照官网
vue3官方文档
vue2官方文档

一、概念介绍

1.el：挂载点

• Vue实例的作用范围：管理el选项命中的元素及其内部的后代元素

• 可以使用其他选择器，但是建议使用id选择器

• 可以设置其他双标签 dom元素，但不能使用html和body

2.data：数据对象

• 数据给el所指定的容器使用
• 容器中使用data时一般使用插值表达式{{xxx}}

二、使用步骤

1.引入vue

下载官网中的开发版，然后再引入本地文件

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

2.准备好一个容器

<div id="root">
    <h1>{{name.toUpperCase()}}</h1>
    <h2>{{add}}</h2>
  </div>

3.创建vue实例，传入配置对象

 //创建Vue实例
 <script>
   //el两种写法
     new Vue({
       el:'#root', //第一种写法
       data:{ 
         name:'ppp'
       }
     })
     //第二种写法
     const v = new Vue({
      data:{
        name:"ppp"
      }
     })
     v.$mount("#root") //第二种写法
     //data的两种写法
     new Vue({
      el:"#root",
      //第一种：对象式
      // data:{ 
      //   name:"ppp"
      // }
      //第二种：函数式(不能使用箭头函数，一旦使用this变为window而不是vue实例)
      data(){
        return {
          name:"ppp"
        }
      }
     })    
  </script>

注意：

1.vue实例和容器是一一对应的
2.真实开发中只有一个vue实例，并且配合组件一起使用
3.插值表达式中的式子写js表达式，且可自动读取到data中所有属性
4.一旦data中数据改变，容器中用到该数据的地方也会自动更新
5.指定容器内代码称为vue模板

三、模板语法

1.插值语法

功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式

代码如下（示例）：

<div id="root">
    <h1>插值语法</h1>
    <h3>你好,{{name}}</h3>
    <hr>
  </div>

2.指令语法

功能：用于解析标签(包括：标签属性、标签体内容、绑定事件。。)
写法：以v-开头，例如v-bind

代码如下（示例）：

<div id="root">
    <h1>指令语法</h1>
    <!-- v-bind简写为： -->
    <a v-bind:href="url">点我跳转</a>
    <a :href="url">点我跳转哦2</a>
  </div>

效果：

四、数据绑定

1.单向数据绑定v-bind

代码：

<div id="root">
    单向数据绑定
    <input type="text" v-bind:value="name">
  </div>

  <script>
     new Vue({
       el:'#root',
       data:{
         name:'ppp'
       }
     })
  </script>

结果：

2.双向数据绑定v-model

代码：

<div id="root">
    双向数据绑定：<input type="text" v-model="name">
  </div>
 //js内容与上相同

结果：

注意：v-model只能应用在表单类元素上(输入类元素),例如input,select

五、MVVM模型

Vue的设计参照了MVVM模型

1.M(Model):对应data中数据
2.V(View):模板
3.VM(ViewModel):Vue实例对象

代码对照理解如下：

注意：
1.data中所有属性最后都出现在vue实例vm身上
2.vm身上所有属性以及vue原型上所有属性，在vue模板中都可以直接使用

六、数据代理

定义：通过一个对象代理对另外一个对象中属性的操作(读/写）

简单示例：

    let obj = {x:100};
    let obj2 = {y:200};
    Object.defineProperty(obj2,'x',{
      get(){
        return obj.x;
      },
      set(value){
        obj.x=value;
      }
    })

结果：

vue中的数据代理

通过vm对象来代理data对象中属性的操作，更加方便的操作了data中的数据

const vm = new Vue({
      el:"#root",
      data:{
        name:"abcd",
        address:"北京"
      }
    })

访问数据结果：

基本原理

• 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定了一个getter、setter。
• 在getter/setter内部去操作(读/写)data中对应的属性。

---