Vue基础-安装/引入/代理/计算属性/监视

安装

通过Vue官方下载：https://v2.cn.vuejs.org/v2/guide/installation.html

配置自定义代码片段
VSCode：通过 Ctrl+Shift+P 输入 “Configure User Snippets” 创建自定义代码模板；

然后选择要定义的代码类型比如：
html.json

"script引入": {
    "prefix": "sct",
    "body": ["<script type = \"text/javascript\" src=\"\"></script>"]
}

vue.json

"vue3模板": {
    "prefix": "vue3",
    "body": ["<template>", "  <div></div>", "</template>", "", "<script setup>", "", "</script>", "", "<style scoped>", "","</style>"]
  }

vue引入

<script type = "text/javascript" src="../js/vue.js"></script>

打开浏览器会有如下警告：

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

点击https://github.com/vuejs/devtools这个地址，或者从谷歌商店直接搜索安装也可以

初识Vue
先创建一个容器：

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

创建Vue实例，设置el字段与容器中的id一致，即指定当前Vue实例为哪个容器服务；
data字段用于存储数据，数据提供el所指定的容器中是使用,在容器中使用插值语法{{}}调用data中的值。

<script type="text/javascript">
     Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
     const vue = new Vue({
         el: "#root",
         data: {
             name: "vue"
         }
     })
</script>

注意：Vue实例和容器之间是一对一的关系，不能一对多。

模版语法
1、插值语法 {{ }}，花括号内是表达式；
2、指令语法v-bind:，可简写为: 后面字符串会当作表达式处理。

<a v-bind:href="url">点我跳转</a>
<a :href="url">点我跳转</a>

数据绑定
使用指令v-model:进行数据绑定

<input type="text" v-model:value = "name">

注意：并不是所有属性都能用v-model,因为只能用在表单类元素，例如：input、textarea、select等。

el与data的第二种写法
前面讲到一种写法

const vue = new Vue({
    el: "#root",
    data: {
        name: "vue"
    }
})

第二种写法：

const vue = new Vue({
     data: function () {
          return {
              name: "初识vue",
              url: "https://www.baidu.com"
          }
      }
})
vue.$mount('#root')

//函数式

data() {
     return {
          name: "初识vue",
          url: "https://www.baidu.com"
      }
}

说一个插件：Vue代码提示的插件

MVVM
是Model View ViewModel的简称，其中Model对应data中的数据，View是模版，ViewModel是Vue实例对象。

Object.defineProperty
es6中，这个方法是用于给对象添加属性，默认是不参与遍历的。
修改enumerable为true，即可参与遍历。
writable控制属性是否可以被修改，默认值是false；
configurable控制属性是否可以被删除，默认值是false；

Object.defineProperty(person,"age",{
       value:18,
       enumerable:true,
       writable:true,
       configurable:true
})

其他方法：
当读取person的age属性时，get函数会被触发，且返回age的值。

let number = 18
Object.defineProperty(person,"age",{
      get:function(){
          return number 
      }
      set:function(value){
         number = value
      }
})

数据代理
通过一个对象代理对另一个对象中属性的操作；
例如：通过obj2操作obj中的属性x

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

事件处理

methods:{
      showInfo(event) {
           console.log(event.target.innerText);//元素的内容
           console.log(this);//vue实例
          }
 }

传参时需要给event站位

<button @click="showInfo(666,$event)">点击按钮</button>

methods:{
         showInfo(number,event) {
              console.log(number);//666
              console.log(event.target.innerText);
              console.log(this);
          }
}

事件修饰符
@click.prevent

例如：

<button @click="showInfo(666,$event)" @click.prevent>点击按钮</button>

修饰符可以连续写，例如：@click.prevent.stop

键盘事件
@keydown和@keyup

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

<input type="text" v-model:value="name" @keydown.enter = "showInfo(666,$event)">

Vue计算属性

在computed中，创建fullName属性，通过get方法返回值；
计算属性好处：当有读取fullName值时，get就会被调用；get什么时候调用？初次读取时，所依赖的数据发生变化时。

<div>{{fullName}}</div>
computed: {
      fullName: {
          get() {
              return this.name + this.lastName;
          }
     }
}

简写形式：
调用计算属性时无需加括号（如this.fullName），Vue底层将其处理为属性访问。

fullName() {
     return this.name + "-" + this.lastName;
}

注意：只读取不修改才可以用简写形式

监视
两种写法：
1、初始化Vue实例时：

const vm= new Vue({
      el: ".root",
      data: {
          isHot: true
      },
      watch:{
          isHot:{
              immediate:true,//初始化时让handler执行
              handler(newValue,oldValue){
                  console.log(`isHot新值:${newValue} 旧值:${oldValue}`)
              }
          }
      }
})

2、使用vm调用

vue.$watch('isHot', {
      immediate: true,//初始化时让handler执行
      handler(newValue, oldValue) {
          console.log(`isHot新值:${newValue} 旧值:${oldValue}`)
      }
})

深度监视
1、深度监视numbers内的属性a

'numbers.a': {
     handler(newValue, oldValue) {
         console.log(`a新值:${newValue} 旧值:${oldValue}`)
      }
}

2、深度监视numbers内的所有属性，默认是不开启deep的，需要设置deep才能监视内部所有属性

numbers: {
    deep:true,
    handler(newValue, oldValue) {
       console.log(`isHot新值:${newValue} 旧值:${oldValue}`)
      }
}

监视的简写形式
在不需要开启immediate和deep时，可以写为简写形式

isHot(newValue, oldValue) {
      console.log(`isHot新值:${newValue} 旧值:${oldValue}`)
}
vm.$watch('isHot', function (newValue, oldValue) {
      console.log(`isHot新值:${newValue} 旧值:${oldValue}`)
})

computed和watch的区别
1、computed能完成的功能，watch都能完成。
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要点：
1、所谓被Vue管理的函数，最好写成普通函数，这样this指向的才是vm或组件实例对象。
2、所谓不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this指向的才是vm或组件实例对象。