vue入门基础：小白必看

一、了解Vue

vue就是一个单页应用框架，顾名思义，整个项目只有一个HTML文件。对比Javaweb是切换多个html，Vue是切换多个div：当我想显示首页页面时，首页对应的div生效，其他页面对应的div失效；当我想从首页跳转至其他页面时，其他页面对应的div生效，首页对应的div失效。

你看到的多个页面，只不过是多个代码片段（即组件）在同一个html里有次序有条理地生效。

话不多说，跟着以下步骤进行操作，你便很快就能对vue有个较为清晰的认识。

二、创建并运行vue项目

（VSCode + Node 环境下，或直接在文件夹中打开终端）

2.1. 执行npm create vue@latest命令， 用node里面的包管理工具去创建一个最新版本的vue项目，根据需求选择配置

2.2. 执行完上述操作后会生成一个名为"base"的文件夹。执行cd base命令，终端便进入到了base文件夹中

原本

变成

2.3. 执行 npm i 命令，二级base文件装入node_modules第三方依赖库（自动根据package.json这个文件内容装好） 此时文件目录结构如下：

2.4. 执行 npm run dev 命令，将整个项目运行起来

项目运行在 http://localhost:5173/ 这个地址，出现这个页面就说明运行成功了

三、响应式API

3.1. ref()

主要用于将一个值变成响应式的。当你调用 ref(value) 时，它会返回一个对象，这个对象有一个 .value 属性，用来访问或修改传入的值。这个返回的对象可以被任何使用它的组件或计算属性所感知，当其 .value 被改变时，所有依赖于它的组件都会重新渲染。

以下举一个 响应式计数 的例子（点击按钮，数字加一）：

<!-- html代码 -->
<div class="app">
    <button v-on:click="add">{{ count }}</button> <!-- 绑定一个点击事件，执行add函数 -->
</div>

// js 代码
import { ref } from 'vue'
  
 let count = ref(0) 
 const add = () => {
    count.value++
 }

3.2. reactive()

用于创建响应式对象的函数。当你调用 reactive() 并传入一个普通对象作为参数时，它会返回一个代理对象（Proxy object），这个代理对象在结构上与原对象相同，但是具有响应式特性。

下面例子与 3.1 实现相同效果（点击按钮，数字加一）：

<!-- html代码 -->
<div class="app">
    <button v-on:click="add">{{ state.count }}</button> <!-- 绑定一个点击事件，执行add函数 -->
</div>

// js 代码
import { reactive } from 'vue'
  
let state = reactive({ count: 0 })  
const add = () => {
   state.count++
}

注意：ref()可以接收原始类型，但reactive()只能接收引用类型

3.3. watch()

watch(xx, (newVal, oldVal) => {

}) 可以监听一个响应式数据，当响应式数据发生变化时，会执行回调函数

下面例子：点击按钮改变温度，使建议穿衣随温度改变而改变

<!-- html代码 -->
<div>
    <h2>当前温度：{{ temp }}</h2>
    <h2>建议穿衣：{{ suggest }}</h2>
    <button @click="add">+</button>
    <button @click="minus">-</button>
</div>

// js 代码
import { ref, watch } from 'vue'
let temp = ref(20)
let suggest = '夹克'  // suggest 的值是基于 temp 的值动态决定的,Vue 仍然能够追
const add = () => {
    temp.value += 5
}
const minus = () => {
    temp.value -= 5
}
// temp 是原始类型，所以它作为第一个参数可以不以回调的形式传入
watch(temp, (newValue, oldValue) => {
    console.log(newValue, oldValue);
    if (newValue >= 30) {
        suggest = '短袖'
    } else if (newValue >= 20) {
        suggest = '夹克'
    } else if (newValue >= 0) {
        suggest = '棉袄'
    } else {
        suggest = '羽绒服'
    }
})

3.4. computed()

const xxx = computed( () => { return xx } ) 当computed中的变量值发生改变时，computed中的回调函数会重新执行

下面例子同3.3效果一致：

// js 代码
import { computed, ref, watch } from 'vue'
let temp = ref(20)
const add = () => {
    temp.value += 5
}
const minus = () => {
    temp.value -= 5
}
// 只要写在computed里的变量的值发生变化，就会重新计算 suggest 的值
const suggest = computed(() => {
    if (temp.value >= 30) {
        return '短袖'
    } else if (temp.value >= 20) {
        return '夹克'
    } else if (temp.value >= 0) {
        return '棉袄'
    } else {
        return '羽绒服'
    }
})

补充一个computed高级用法：computed 函数接收一个对象，其中 get 和 set 是对象的属性

get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值

set回调函数: 监视当前属性值发生改变时调用,更新相关的属性值

let allDone = computed({
    get: function() {
        return active.value == 0
    },
    set: function(value) {
        todos.value.forEach((todo) => {
            todo.done = value
        })
    }
})

绝大多数情况下watch能实现的computed能实现，computed能实现的watch也能实现，但computed性能会稍微好一些

四、vue的指令

4.1. v-text：将绑定的数据作为纯文本内容插入到元素中，和双大括号 {{ }} 的效果类似

<!-- html代码（写在根组件App.vue中） -->
<div class="app">
    <h2>{{ title }}</h2>
    <h2 v-text="title2"></h2>
</div>

// js 代码
const title = 'Hello World'
const title2 = '标题'

4.2. v-html：将绑定的数据作为 HTML 插入到元素中

<!-- html代码 -->
<div class="app">
    <h3>{{ content }}</h3>
    <h3 v-html="content"></h3>
</div>

// js 代码
const content = '<p>哈哈哈</p><p>嘻嘻嘻</p>'

4.3. v-on：监听 DOM 事件，并在事件触发时执行相应的 JS 代码。v-on:click 相当于 @click

例子同3.1所示

4.4.v-bind：用于动态地将一个或多个属性绑定到 HTML 元素上。

下面例子实现了点击图片添加黑色边框的效果（即为该图片绑定一个点击事件，触发事件后为img动态添加一个bd类名）

<!-- html代码 -->
<div class="app">
    <img v-bind:src="url" alt="" @click="handle" v-bind:class="{'bd': active}">
    <!-- 还可以用冒号简写成
    <img v-bind:src="url" alt="" @click="handle" :class="{'bd': active}">-->
</div>

// js 代码
import { ref } from 'vue'

let active = ref(false)
const handle = () => {
    active.value = true  // 变成响应式后获取值要接一个.value
  }

/* css代码 */
img{
  width: 100px;
  height: 100px;
} 
.bd{
  border: 2px solid black;
}

4.5. v-if：用于条件性地渲染一个块。v-if="a" a为true时，dom显示，false时，dom隐藏。

下面例子通过v-if和v-else实现点击按钮切换中英文内容的效果

<!-- html代码 -->
<div class="main">
    <h2 v-if="isEn">{{ title1 }}</h2>
    <h2 v-else>{{ title2 }}</h2> 
    <button @click="change">切换</button>
</div>

// js 代码
import { ref } from 'vue'

let title1 = 'Hello'
let title2 = '你好'
let isEn = ref(true)
const change = () => {
  isEn.value = !isEn.value
}

v-if 和 v-show 的区别：

v-if 直接移除dom结构 (适用于后台管理系统，根据权限显示不同界面)

v-show 改变css，通过css的display:none隐藏dom，display:block显示dom (如果要频繁显示或隐藏，v-show性能更好)

4.6. v-for：用于在组件模板中循环渲染数据。item是当前迭代项的别名，可以自定义;index是当前项的索引，也可以自定义或省略。key这一项可以省略，但有的话性能更好。

<!-- html代码 -->
<div>
      <ul>
          <li v-for="(item, index) in arr" key="index">{{ item }}</li>
      </ul>
</div>

// js 代码
const arr = ['html', 'css', 'js', 'vue']

4.7. v-model：实现表单控件（如<input>, <textarea>和<select>）的双向数据绑定。

① 输入框的输入数据能被自动绑定到state对象上：

<!-- html代码 -->
<div>
      <div>
           账号：<input type="text" v-model="state.username">
      </div>
      <div>
           密码：<input type="text" v-model="state.password">
      </div>
      <button @click="login">登录</button>
</div>

// js 代码
const state = reactive({
    username: '',
    password: ''
})
const login = () => {
    console.log(state);
}

点击登录前

点击登录后

② 后端改变过的动态数据显示到前端：

// js 代码
import { reactive } from 'vue'
const state = reactive({
    username: '',
    password: ''
})
const login = () => {
    state.username = 'admin'
    console.log(state);
}

点击登录后

最后，要掌握更加详细完备的API用法可去查阅官方文档cn.vuejs.org/api/ ，我们下篇再见~