Vue入门1.0：零基础也能笑着变大神！

前言

Vue.js是一个流行的开源JavaScript框架，用于构建用户界面。它易于学习、灵活高效，被广泛用于单页面应用开发和前端项目中。Vue通过其简洁的API和响应式数据绑定，帮助开发者快速构建交互丰富的Web应用。

基本步骤

npm create vue@latest

我们打开终端，输入这行指令。这条命令会使用 npm 包管理器来初始化一个新的 Vue.js 项目。然后接下来的选项我们都选择默认的就可以。

然后我们会发现我们的目录下多了这么一些东西。我们重点看src，因为我们这次的全部操作都是在这里面进行的。

cd base

我们输入这行代码目的是进入我们所创建的这个vue文件夹，其中base是我们给文件夹取的名字。

npm install

命令 npm install 是用来安装当前项目中所需的所有 npm 包。当你在项目的根目录中运行 npm install 时，它会查找并安装 package.json 文件中列出的所有依赖包。

npm run dev

这段代码是让我们的项目运行起来，最终会弹出一个本地端口的地址，我们的项目最终就在这个页面显示。

我们打开这个链接，是可以进去的。

我们打开src文件夹，删除一些不必要的文件，最终我们只需要vue文件和js文件即可。 我们删除默认内容，

我们看js部分

因为我们删除了多余内容，所以js部分的第一句话也可以删掉，这里我们的大致意思就是首先我们引入vue这个库，然后把我们的vue文件导入进来，最后进行挂载，也就是进行我们vue文件的解析。总结概括就是引入工具，引入对象，用工具操作对象，最后显示我们的对象内容。

我们在vue文件里输入vb3s，会给我们生成3部分内容，分别是template要书写的html，js，以及css，默认是scss，我们手动改为css即可，接下来我们就去了解一些vue的基本操作。

vue的一些基本使用

v-text

<template>
    <div class="app">
        <h2>{{ title }}</h2>
        <h2 v-text="title1"></h2>
    </div>
</template>

<script setup>
const title = 'vuevuevue'
const title1 = 'jsjsjsjsjs'
</script>

<style lang="css" scoped>

</style>

我们输入如上代码，会发现页面是这样显示的，

首先我们要明确我们使用vue框架则大部分时候不需要获取页面的dom结构啦，我们如果有一个变量需要赋值给html，采用{{}}的方式就可以，我们还可以采用v-text，实现效果是一样的。

为了方便说明我们后面的代码只提供主体内容，大家放在各自的部分就可以

v-html

<h2 v-html="title1"></h2>
const title1 = '<p>333333333333</p><p>44444444444444</p>'

如果我们js里的变量是字符串，并且里面含有标签元素，那我们就不能直接{{}}或v-text了，而是v-html。

v-on/@

在了解这个之前我们先了解一下响应式，首先我们要知道在vue里我们如果在js里进行了html内容的改变，html并不会显示改变之后的内容，这就需要我们把改变的变量设置为响应式，我们先通过import {ref} from 'vue'引入这个库，然后ref（输入我们的值）就可以啦！

 <button v-on:click="add">{{ count }}</button>
 import { ref } from 'vue'
 let count = ref(0)
 const add = () => {
    count.value++
}

• <button v-on:click="add">{{ count }}</button>：这是一个按钮，当它被点击时会触发 add 方法。

  • v-on:click="add"：这是 Vue 的事件绑定语法，当按钮被点击时，调用 add 方法。
  • {{ count }}：这是 Vue 的插值语法，用于显示 count 的当前值。

我们首先通过v-on绑定点击事件，当我们点击的时候，html内容就+1,首先我们将count处理为响应式，然后通过.value的方式增加数字，最后就会达到我们想要的效果啦！v-on:也可以替换为@，效果是一模一样的。

v-bind

这是用来绑定属性的。

 <img v-bind:src="src" alt="" @click="handle" v-bind:class="{bd: p}">
 import { ref } from 'vue'
const src = "https://p1.ssl.qhimgs1.com/sdr/400__/t01587731fd3e215351.jpg"
let p = ref(false)
const handle = () => {
    p.value = true
}
.bd{
    border: 5px solid black;
}

• <img> 标签用于显示图像。

• v-bind:src="src"：Vue 指令，用于绑定图像的 src 属性到 src 变量。这将设置图像的来源为 src 变量的值。

• alt=""：图像的替代文本属性，当前为空字符串。

• @click="handle"：Vue 指令，当图像被点击时，调用 handle 方法。

• v-bind:class="{bd: p}"：Vue 指令，用于根据 p 的值动态地绑定 CSS 类。

  • 当 p 为 true 时，bd 类将被添加到图像元素上；当 p 为 false 时，bd 类将被移除。 我们首先利用v-bind绑定了src属性，然后绑定了一个点击事件，当我们点击图片的时候会增加边框，v-bind绑定了class属性，里面填写一个对象，对象里放入我们的类名后面接布尔值。

 <img v-bind:src="src" alt="" @click="handle" v-bind:class="name">
 let name = ref('')
const handle = () => {
    name.value = 'bd'
}

我们也可以采用上面这种方式去绑定。

 <img v-bind:src="src" alt="" @click="handle" v-bind:class="c >= 3 ? 'bd' : ''">
 let c = ref(0)
const handle = () => {
    c.value++
}

1. let c = ref(0)

   • 使用 ref 函数创建了一个响应式变量 c，并将其初始值设为 0。

2. const handle = () => { c.value++ }

   • 创建了一个名为 handle 的箭头函数，当该函数被调用时，会将 c 的值加一。

当我们点击三次时加上这个边框，我们可以在里面加三目运算符。

 <img v-bind:src="src" alt="" @click="handle" v-bind:class="state.c >= 3 ? 'bd' : ''">
 const state = reactive({
    c: 0
})
const handle = () => {
    state.c++
}

• @click="handle"：Vue 指令，当图像被点击时，调用 handle 方法。

• v-bind:class="state.c >= 3 ? 'bd' : ''"：Vue 指令，用于根据 state.c 的值动态地绑定 CSS 类。

  • 当 state.c 大于或等于 3 时，bd 类将被添加到图像元素上；否则，不会添加任何类。

当然，关于响应式我们也可以使用reactive。

我们这里的v-bind：可以简写为 ：

 <img v-bind:src="src" alt="" @click="handle" :class="name" :style=" `border : ${n}px solid black` ">
 let n = 20

当我们想直接改变style里的某个属性时，也是通过v-bind去绑定，然后通过模板字符串的形形式。

v-if/v-else

 <h2 v-if="isEN">{{ title1 }}</h2>
      <h2 v-else>{{ title2 }}</h2>
      <button @click="f">切换</button>
 import { ref, reactive } from 'vue'
let isEN = ref(true)
let title1 = 'hello'
let title2 = '你好'
const f = () => {
    isEN.value = !isEN.value
}

我们通过这个所绑定的标签如果为true则显示，否则不显示，两者配合使用。当我们点击切换时，会互换中英文。

v-show/v-else

二者几乎一模一样，唯一不同的地方在于if会直接移除dom结构，而show通过display：none让结构看不见，具体使用取决于我们的需求。