---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

宫女如花满春殿，只今惟有鹧鸪飞。
——《越中览古》

---

---

Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏

---

Vue入门之v-on、v-model、v-if

文末附本文所有示例代码的下载地址以及基于vite构建vue3的项目demo地址

1. v-on

事件监听
使用v-on指令监听DOM事件，如v-on:click=“add”
v-on的简写语法使用@，如@click=“add”
触发的事件add需要在script setup标签中声明函数add()

1.1 script setup

script setup标签内的代码

// 3. 事件监听，使用v-on指令监听DOM事件，v-on也有一个简写语法省去v-on:，替换为@即可
const count2 = ref(0)
function increment(){count2.value++
}

1.2 template

template标签内的代码

  <!-- 3.  --><div><h2>3. 事件监听</h2><button id="btn-increment" v-on:click="increment">count2 is :{{ count2 }}</button></div><br>

1.3 style scoped

style scoped标签内的代码

/* 3.  */
#btn-increment{height: 50px;width: 400px;text-align: center;background-color: seagreen;font-size: 20px;
}

1.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果，点击绿色区域，即可实现数值累加效果

2. v-model

双向绑定
同时使用v-bind和v-on可以实现双向绑定
但为了更方便的使用，Vue中简化为v-model进行双向绑定的实现，此时可不用再写事件处理函数
如下进行了两种双向绑定的实现

2.1 script setup

script setup标签内的代码

// 4. 表单绑定
// 4.1 双向绑定 使用v-bind和v-on在表单的输入元素上创建双向绑定
const text = ref('')
function onInput(e){// v-on 处理函数会收到原生DOM事件作为其参数text.value = e.target.value
}// 4.2 表单绑定 简化双向绑定，使用v-model，会同步数据，不用使用事件绑定了，（除文本类型外其余输入也可使用该方法，如多选框、单选框、下拉框等）
const text2 = ref('')

2.2 template

template标签内的代码

  <!-- 4.1  --><div><h2>4.1 双向绑定</h2><input id="ipt-v1" :value="text" @input="onInput" placeholder="please type here something"><br><br><p>{{ text }}</p></div><!-- 4.2 --><div><h2>4.2 表单绑定</h2><input id="ipt-vmodel" v-model="text2" placeholder="type something here"><p>{{ text2 }}</p></div>

2.3 style scoped

style scoped标签内的代码

/* 4.1 */
#ipt-v1{height: 50px;width: 400px;text-align: center;background-color: tan;font-size: 30px;
}
/* 4.2  */
#ipt-vmodel{height: 50px;width: 400px;text-align: center;background-color: slategrey;font-size: 30px;
}

2.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果

在输入框中输入内容，查看绑定效果

3. v-if

条件渲染
通过v-if指令有条件的渲染元素
v-if条件值为真则渲染，值为假则从dom中移除
除了v-if还有v-else和v-else-if用来表示其他条件分支

3.1 script setup

script setup标签内的代码

// 5. 条件渲染 使用v-if有条件地渲染元素，当v-if属性的值对应的是真值Truthy时渲染，若为假值则会从dom中移出
// 除此之外，v-else、v-else-if可表示其他条件分支
const awesome = ref(true)
function toggle(){// if (awesome.value) {//   awesome.value = false// }else if(!awesome.value){//   awesome.value = true// }// 或者awesome.value = !awesome.value}

3.2 template

template标签内的代码

  <!-- 5.  --><div id="d-5"><h2>5. 条件渲染</h2><button id="btn-5" @click="toggle">Toggle</button><h1 id="h-5" v-if="awesome">Vue is awesome!</h1><h1 id="h-5" v-else>Oh no emo</h1></div>

3.3 style scoped

style scoped标签内的代码

/* 5.  */
#btn-5{height: 30px;width: 100px;text-align: center;border-radius: 20px;background-color: darkorange;font-size: 20px;
}
#h-5{height: 50px;width: 400px;text-align: center;border-radius: 20px;background-color: darkorange;font-size: 30px;
}

3.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果

点击Toggle按钮触发条件变更，可实现下方内容变换

4. 代码示例

以上示例的代码已打包上传到CSDN资源库，可自行下载获取示例代码
下载地址：Vue v-on v-model v-if 语法示例演示代码

5. 项目demo

本文示例代码都是基于vite构建的vue3项目编写，项目demo也已上传CSDN资源库
下载地址：Vue 基于vite构建vue3项目 以及基础语法演示
下载后如想正常运行项目，需先有node环境，可根据文章开始的链接进行下载安装node环境，以及配置node环境变量

---

感谢阅读，祝君暴富！

---