环境搭建

引入Vue

下载js文件：

• 开发版本：https://cn.vuejs.org/js/vue.js
• 生产版本：https://cn.vuejs.org/js/vue.min.js

用<script>标签引入，Vue会被注册为一个全局变量。

用谷歌浏览器打开html文件，切换到控制台，会出现2个小提示。

Vue开发者工具

第一个小提示，安装Vue开发者工具后，就不会出现提示了。

如果安装后还是不行的话，右键「Vue Devtools」->「管理扩展程序」，打开「允许访问文件网址」即可。

修改全局配置

第二个小提示，需要修改全局配置：

//阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false;

脚手架自定义创建项目

安装脚手架

全局安装：npm i -g @vue/cli，如果之前安装过低版本的脚手架，想更新至最新版本的话，可先卸载当前版本再安装最新版本：npm un -g vue-cli。

查看版本：vue -V。

自定义创建项目

创建项目：vue create test： ? Please pick a preset: Manually select features（选择自定义） ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter（选择需要的特性） ? Choose a version of Vue.js that you want to start the project with 2.x（这里选择Vue2） ? Use history mode for router? (Requires proper server setup for index fallback in production) No（这里不使用历史模式，即URL路径中带有#号） ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less（选择CSS预处理器） ? Pick a linter / formatter config: Standard（ESLint代码检查和格式化工具，选择标准化无分号规范） ? Pick additional lint features: Lint on save（选择保存时检验） ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（将ESLint配置文件放在单独文件中） ? Save this as a preset for future projects? No（是否保存当前配置作为将来项目的预设，这里选择No） ? Pick the package manager to use when installing dependencies: Yarn（选择安装依赖时使用的包管理器，这里选择Yarn）

启动项目

cd test
yarn serve

ESLint代码规范

• JavaScript Standard Style规范说明：https://standardjs.com/rules-zhcn.html
• ESLint规则表：https://zh-hans.eslint.org/docs/latest/rules

使用Prettier代码格式化工具，格式化Vue代码时可能出现单引号变双引号等其他问题，这时需要自定义一些配置，可在项目根目录下添加配置文件.prettierrc：

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none"
}

调整初始化目录

删除多余的文件

• src\assets\logo.png
• src\components\HelloWorld.vue
• src\views\AboutView.vue和src\views\HomeView.vue

修改路由配置和App.vue

src\router\index.js：删除HomeView导入，删除routes，默认路由规则设置为空数组，即：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const router = new VueRouter({
routes: []
});
export default router;

src\App.vue修改为：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="less"></style>

新增api和utils目录

在src目录下新增两个目录api和utils：

• api接口模块：发送ajax请求的接口模块
• utils工具模块：自己装的一些工具方法模块

数据代理

Object.defineProperty()方法

这个方法接收三个参数：属性所在的对象、属性的名字、一个描述符对象。 该方法的第三个参数除了可以是数据属性，也可以是访问器属性：

//当修改person的age属性时，set函数(setter)会被调用，且会收到修改的具体值
set(value) {
  number = value
},

})

事件处理

基本使用

事件修饰符

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

修饰符可以连续写： <div id="root" @click="showInfo"> <a href="https://www.baidu.com/" @click.stop.prevent="showInfo">点我提示信息

键盘事件

1. 回车 => enter
2. 删除 => delete（“删除”和“退格”键）
3. 退出 => esc
4. 空格 => space
5. 换行 => tab（配合keydown使用）
6. 上 => up
7. 下 => down
8. 左 => left
9. 右 => right

系统修饰键：ctrl、alt、shift、meta，配合keydown使用。想用keyup，还可以这样用：

// ctrl + y
@keyup.ctrl.y="showInfo"

计算属性

计算属性完整写法

<!-- 第二步：引包 -->
<script src="vue.js"></script>

<script>
  // 第三步：创建实例，添加配置项
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '张',
      lastName: '三',
    },
    methods: {
      changeName() {
        this.fullName = '张小三'
      },
    },
    computed: {
      fullName: {
        get() {
          return this.firstName + this.lastName
        },
        set(value) {
          this.firstName = value.slice(0, 1)
          this.lastName = value.slice(1)
        },
      },
    },
  })
</script>

监视属性

还可以这么写：

app.$watch("isHot", {
  immediate: true,
  handler(newValue, oldValue) {
    console.log("isHot被修改了", newValue, oldValue)
  },
})

深度监视

监视简写

watch: { isHot(newValue, oldValue) { console.log("isHot被修改了", newValue, oldValue) }, }还可以简写：

app.$watch("isHot", function (newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue)
      })

实时翻译案例

<!-- 第二步：引包 -->
<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
  // 第三步：创建实例，添加配置项
  const app = new Vue({
    el: '#app',
    data: {
      obj: {
        words: '',
      },
      result: '',
    },
    watch: {
      'obj.words'(newValue) {
        // 防抖优化（延时 300ms）
        clearInterval(this.timer)
        this.timer = setTimeout(async () => {
          const res = await axios({
            url: 'https://applet-base-api-t.itheima.net/api/translate',
            params: {
              words: newValue,
            },
          })
          this.result = res.data.data
        }, 300)
      },
    },
  })
</script>

列表过滤

用watch实现：

用computed实现：

列表排序