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

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

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

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

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

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环境变量

感谢阅读，祝君暴富！