当前位置：首页 > news >正文

Vue.js基础——贼简单易懂！！（响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind）

news 来源：原创 2025/7/19 1:15:36

Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它专门设计用于Web应用程序，并专注于视图层。Vue允许开发人员创建可重用的组件，并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统，用于高效地渲染和重新渲染组件。Vue以其简单易用的特点而闻名，使其成为初学者和有经验的开发人员的首选。

使用以下方法构建版本

下载 vue.esm-browser.js 这个模块文件

使用了<script type="module">，且导入了上面的js文件（详细点击这里）

<div id="app">{{ msg }}</div><!-- ES6基准新的特性，支持类似Python的模板开发方式 -->
<script type="module">import { createApp } from "../vue.esm-browser.js"createApp({data() {return {msg: 'Hello Vue!'}}}).mount('#app')
</script>

一、创建一个 Vue 应用程序

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例

<script type="module">  import { createApp } from "../vue.esm-browser.js" //通过 createApp 函数创建一个新的应用实例createApp({})

应用实例必须在调用了.mount() 方法后才会渲染出来，该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串，createApp 里面的内容将会被渲染在容器元素里面

<div id="app"> </div><!-- ES6基准新的特性，支持类似Python的模板开发方式 -->
<script type="module">import { createApp } from "../vue.esm-browser.js"createApp({}).mount('#app'); //将 Vue 应用程序挂载(mount) 到 app 元素上</script>

然后手写一个setup函数, 用于设置组件的响应式"数据（属性）"和"函数（方法）"等

创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。

<div id="app"></div><script type="module">import { createApp } from "../vue.esm-browser.js"createApp({setup(){// 定义数据（属性）let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下，你就知道",url: "www.baidu.com"}// 定义函数（方法）const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,func}}}).mount('#app'); </script>

{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染

<div id="app"><!-- 如: Vue 实例中定义一个 msg 变量, 值为 "成功创建第一个Vue应用程序!", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "成功创建第一个Vue应用程序!" --><p>{{ msg }}</p><p>{{ web.title }}</p><p>{{ web.url }}</p><p>{{ func() }}</p>
</div><script type="module">import { createApp } from "../vue.esm-browser.js"createApp({setup(){// 定义数据（属性）let msg = "成功创建第一个Vue应用程序!";const web = {title: "百度一下，你就知道",url: "www.baidu.com"}// 定义函数（方法）const func = ()=> console.log("方法func被调用");// 返回一个对象类型的数据return { msg,   web,func}}}).mount('#app'); </script>

接下来需要下载一个live-server插件，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。（实现自动刷新，架设本地服务器环境）

二、让数据变成响应式 ref 和 reactive

在Vue 3中，非响应式数据，在模板中普通变量不会自动更新，我们可以使用 ref 和 reactive 函数来将数据变成响应式。

1、ref 函数：可以将基本类型数据包装成响应式对象

//使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app"><p>{{ msg }}</p>
</div>
<script type="module">  
//导入 refimport {createApp, ref} from "../vue.esm-browser.js"createApp({setup(){// 定义数据let msg = ref("成功创建第一个Vue应用程序!");// 返回一个对象类型的数据return { msg, }}}).mount("#app");
</script>

在上面的例子中，使用 ref 函数将 "成功创建第一个Vue应用程序!" 包装成响应式对象 msg，然后使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染

2、reactive 函数：可以将对象或数组转换成响应式对象。

//使用 {{  }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app"><p>{{ web.title }}</p><p>{{ web.url }}</p>
</div>
<script type="module">  
//导入 refimport {createApp, reactive} from "../vue.esm-browser.js"createApp({setup(){// 定义数据const web = reactive({title: "百度一下，你就知道",url: "www.baidu.com"});// 返回一个对象类型的数据return { web, }}}).mount("#app");
</script>

在上面的例子中，我们使用 reactive 函数将包含 title 和 url 属性的对象转换成响应式对象 web。我们可以直接访问和修改 web 中的属性。

ref 和 reactive 函数的不同之处在于，ref 返回的是一个包装对象，我们需要使用 .value 来访问和修改数据。而 reactive 返回的是一个原始对象，我们可以直接访问和修改其中的属性。

无论是 ref 还是 reactive，当数据发生变化时，相应的视图也会自动更新。这使得我们能够轻松地实现数据的响应性。

三、事件绑定指令 v-on

在Vue中，可以使用 v-on 指令来绑定事件处理函数。

v-on指令可以简写为@，使用方式如下：

        <!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="edit">修改</button>

上面的代码将 edit 方法绑定到 click 事件上。当按钮被点击时，edit 方法将被执行。

事件处理函数可以是一个直接的方法引用，也可以是一个内联函数。例如：

<div id="app"><h3>{{ web.user }}</h3><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({user: 0});const add = (a, b) => {web.user += a + b}return {web,//响应式数据add,//方法}}}).mount("#app")</script>

在上面的例子中，将 add 方法绑定到 click 事件上，我们通过传递 "20" 和 "30" 来调用 add 方法修改web中的user属性，并使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染

除了click事件，v-on 指令还可以绑定其他DOM事件，如keyup、keydown等(点击这里了解DOM事件) 。例如：

        <!-- enter space tab 按键修饰符keyup是在用户松开按键时才触发keydown是在用户按下按键时立即触发-->        回车 <input type="text" @keyup.enter="add(40, 60)"> <br>空格 <input type="text" @keyup.space="add(20, 30)"> <br>Tab <input type="text" @keydown.tab="add(10, 20)"> <br>w <input type="text" @keyup.w="add(5, 10)"> <br>

例如上面的代码将add方法绑定到keyup.enter事件上，当用户按下回车键时，add方法将被执行。

四、条件渲染指令 v-show 和 v-if

条件渲染指令在Vue.js中用于控制元素的显示或隐藏，它们分别是v-show和v-if。

v-show指令根据其后表达式的真假值来控制元素的显示与隐藏。它通过修改元素的display:none实现隐藏的，当表达式为真时，元素显示，为假时，元素隐藏。例如：

    <div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） --><p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>   </div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true, //真});return {web,}}}).mount("#app");</script>

上面的代码将根据web中show属性的值来显示或隐藏<p>元素

v-if指令是真正地条件渲染。当表达式为真时，元素会被渲染到DOM中，为假时，元素会被移除。例如：

    <div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降 --><p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p><button @click="toggle">切换显示状态</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}return {web,toggle}}}).mount("#app");</script>

上面的代码定义了一个toggle 方法将其绑定到 click 事件上，当按钮被点击时，toggle 方法将被执行。改变web中show属性的布尔变量，根据web中show属性的值来渲染或移除<p>元素

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

在使用 v-if 时，还可以通过使用 v-else-if 和 v-else 指令来实现条件分支。

例如：（当用户数量小于100为新网站；用户数量大于等于100，小于1000为优秀网站；用户数量大于等于1000，小于10000为资深网站；否则为超级网站）

    <div id="app"><h3>{{ web.user }}</h3><p v-if="web.user < 100">新网站</p><p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p><p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p><p v-else>超级网站</p><button @click="add_user">增加用户</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据user: 50  //初始用户为50});const add_user = () => {web.user += 1000;}return {web,add_user}}}).mount("#app");</script>

上面的代码展示了如何使用 v-else-if 和 v-else 来创建条件分支。根据不同的条件，会显示不同的内容。

五、遍历指令 v-for

在Vue中，使用 v-for 指令可以遍历数组或对象，根据每个元素生成相应的元素或组件。它用于数组或者对象的迭代，帮助开发者轻松地将数据渲染成列表或重复结构。

它的基本语法如下：

    <div id="app"><!-- 遍历对象的值 --><h4>实验1：遍历对象的值</h4><p v-for="value in data.user"> {{value}} </p></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], //对象user: { name: "李雷",   gender: "女",  class:1}});return {data}}}).mount("#app")</script>

其中，data.user是data中的user属性（对象），value是对象中的每个值

除了对对象的值进行遍历，v-for还支持对对象、数组的值、索引和键进行遍历，以及迭代数字。下面是一些示例：

遍历对象的值和索引（先值后索引）：

        <!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 --><h4>实验2：遍历对象的值和索引（键）。 注意：写指令时，先值后索引</h4><p v-for="(value, key) in data.user"> {{key}} : {{value}} </p>

遍历数组的值和索引（先值后索引）：

        <!-- 遍历数组的值和索引。 注意：写指令时，先值后索引 --><h4>实验3：遍历数组的值和索引。 注意：写指令时，先值后索引</h4><p v-for="(v, i) in data.number"> {{i}} : {{v}} </p>

上面代码中值和索引的名字可改变，但要一定注意的是写指令时，先值后索引

遍历对象的值、键和索引（先值再键后索引）：

        <!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 --><h4>实验4：遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4><p v-for="(v, k, i) in data.user"> {{i}} : {{k}}: {{v}} </p>

遍历数字：

        <ul><li v-for="n in 10">{{ n }}</li></ul>

总结起来，v-for指令用于在Vue.js模板中进行循环遍历，可以对数组、对象和数字进行遍历

六、节点的动态属性 v-bind (单向绑定)

v-bind是Vue.js的指令之一，用于动态地绑定节点的属性。它可以将Vue实例的数据或计算属性绑定到节点的属性上，实现单向绑定。

v-bind的基本语法是在属性名前加上 v-bind: 或简写为 : ，后面跟上要绑定的表达式。例如：

input标签动态属性绑定

    <div id="app"><h3>  实验1：input标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><!-- 简写形式： <input type="text" :value="web.str"> --></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({str: "www.baidu.com"})return {web}}}).mount("#app")</script>

上面的代码中，:value 是 v-bind:value 的简写形式，web.str 是一个Vue实例的数据或属性，它会在渲染时被动态地绑定到 <input> 节点的 value 属性上。

img标签动态属性绑定

    <div id="app"><h3>  实验2： img标签动态属性绑定</h3><img v-bind:src="web.img"></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({img: "../img_src/logo0.png"})return {web}}}).mount("#app")</script>

上面的代码中，web.img 是一个Vue实例的数据或属性，它会在渲染时被动态地绑定到<img>节点的src属性上。

控制HTML标签的class中某个值是否存在

除了绑定属性值，v-bind还可以绑定动态的CSS类和内联样式。例如：

控制HTML标签的class中某个值是否存在使用 v-bind:class或 v-bind:id（通过布尔值控制该类名是否存在，进而控制CSS样式是否被选择生效）

<head><style>.textColor{color: red;font-size: larger;}</style>
</head><body><div id="app"><b v-bind:class="{textColor:web.fontStatus}"  id="b1">广东云浮中医药职业学院</b><br><br><br><button v-on:click="change">修改</button></div><script type="module">import { createApp, reactive } from '../vue.esm-browser.js'createApp({setup() {const web = reactive({fontStatus: false})const change = () => {web.fontStatus = !web.fontStatus; //修改布尔变量}return {web,change}}}).mount("#app")</script></body>

上面的代码中，web.fontStatus 是Vue实例的数据或计算属性，根据它的布尔值来动态地控制CSS样式是否被选择生效。 fontStatus的初始值为false，所以不生效。定义了一个change方法来修改布尔变量，将 change方法绑定到 click 事件上。当按钮被点击时，change方法将被执行，此时fontStatus 的值变为true，textColor的CSS样式就被选择生效。

需要注意的是，v-bind实现的是单向绑定，也就是数据变化会导致视图更新，但视图更新不会反过来改变数据。如果需要实现双向绑定，则应该使用v-model指令。

综上所述，v-bind指令用于动态绑定节点的属性，可以绑定属性值、CSS类和内联样式。它通过将Vue实例的数据或计算属性与节点属性进行绑定，实现数据的单向绑定。