初学Vue

简介

1. 一套用于构建用户界面的渐进式JavaScript框架
   Vue可以自底向上逐层的应用

特点

1. 采用组件化模式，提高代码复用率、且让代码更好维护。
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
3. 使用虚拟DOM+优秀Diff算法，尽量复用DOM节点。

初识

1. 创建Vue实例，传入一个配置对象

<div id="root">
   <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  // 创建vue实例
  const x = new Vue({
    el: '#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
    data: {  // data用于存储数据，数据会自动与el中的内容进行绑定
      name: 'mq'
    }
  })
</script>

2. vue实例和容器是一一对应的
3. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
4. {{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
5. 一旦data中的数据发生改变，那么模版中用到该数据的地方也会自动更新
   注意：
   js表达式 & js代码(语句)
   a. 表达式
   一个表达式会生成一个值，可以放在任何一个需要值的地方
   (1) a
   (2) a+b
   (3) demo(1)
   (4) x === y ? ‘a’ : ‘b’
   b. js代码(语句)
   (1) if(){}
   (2) for(){}

Vue模板语法两大类

插值语法

功能：用于解析标签体内的内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
v-bind:href=“xxx” 或 简写为 :href=“xxx”, xxx同样要写js表达式，且可以直接读取到data中的所有属性

各类语法简写
v-bind: ===> :
v-on: ===> @
v-model:value ===> v-model

<div id="root">
    <h1>插值语法</h1>
    <h1>Hello,{{name}},{{address}}</h1>
    <hr/>
    <h1>指令语法</h1>
    <a :href="url">点我去百度</a>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

        // 创建vue实例
    const x = new Vue({
        el: '#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
        data: {  // data用于存储数据，数据会自动与el中的内容进行绑定
            name: 'mq',
            address: '北京',
            url: 'https://www.baidu.com/'
        }
    })
</script>

两种数据绑定方式

单项绑定（v-bind）

数据只能从data流向页面

双向绑定（v-model）

数据不仅能从data流向页面，还可以从页面流向data
备注：

1. 双向绑定一般都应用在表单类元素上（例如：input、select等）
2. v-model:value 可以简写为v-model，因为v-model默认收集的就是value值

<div id="root">
    单向数据绑定： <input type="text" name="" id="" :value="name"><br>
    双向数据绑定： <input type="text" v-model="name"/>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  // 创建vue实例
  const x = new Vue({
      el: '#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为CSS选择器字符串
      data: {
          name: 'mq'
      }

  })
</script>

数据代理

1. vue中的数据代理：
   通过一个对象代理对另一个对象中属性的操作（读/写）
2. vue中数据代理的好处：
   更加方便的操作data中的数据
3. 基本原理：
   通过Object.defineProperty() 把data对象中的所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作（读/写）data中对应的属性

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

事件处理

基本使用

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods 中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click=“demo” 和 @click="demo($event)"效果一致，但是后者可以传参

<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <button @click="showInfo1">点我提示信息1(不传参)</button>
  <button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      name: '河科院'
    },
    methods: {
      showInfo1() {
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      },
      showInfo2(number, event) {
        console.log(number,event);
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      }
    }
  })
</script>

事件修饰符

Vue中的事件修饰符：

1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素是才触发时间；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
   注：可以连着写，例如即阻止冒泡又阻止默认事件

<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示信息</a>
  <div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
  </div>
  <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2"  @click="showMsg(2)">div2</div>
  </div>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      name: '河科院'
    },
    methods: {

      showInfo(e) {
        // e.stopPropagation(),
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      },
      showMsg(num) {
        // e.stopPropagation(),
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + num + '学习')
      },
    }
  })
</script>

键盘事件

1. Vue中常用的按键别名：
   回车 => enter
   删除 => delete
   退出 => esc
   空格 => space
   换行 => tab（特殊，必须配合keydown去使用）
   上 => up
   下 => down
   左 => left
   右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
   a. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
   b. 配合keydown使用：正常触发事件
4. 也可以使用keyCode去指定具体按键（不推荐）
5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性 computed

1. 定义：要用的属性不存在，要通过已有属性计算得来
2. 原理：底层借助Object.defineproperty方法提供getter和setter
3. get函数什么时候执行
   a. 初次读取时会执行
   b. 当依赖的数据发生修改时会被再次调用
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5. 备注：
   a. 计算属性最终会出现在vm上，直接读取使用即可
   b. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<div id="root">
  姓：<input type="text" v-model="firstName"><br><br>
  名：<input type="text" v-model="lastName"><br><br>
  姓名：<span>{{fullName}}</span><br><br>
  姓名：<span>{{fullName}}</span><br><br>
  姓名：<span>{{fullName}}</span><br><br>
  姓名：<span>{{fullName}}</span>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      firstName: 'mq',
      lastName: 'tjc'
    },
    computed: {
      // 完整写法
      fullName:{
        // get：当有人读取fullName时，get 就会被调用，且返回值就作为fullName的值
        // get 什么时候调用？ 1. 首次读取fullName的时候，get会被调用 2. 当所依赖的数据发生改变的时候，fullName也会重新读取，此时get会被调用
        get(){
          return this.firstName + this.lastName
        }
      }

      // 简写
      fullName(){
        return this.firstName + this.lastName
      }
    }
  })
</script>