Vue3 零基础每日笔记（004）：模板语法初识——插值表达式、v-bind、v-on 一次学会

一、前言前三篇环境、工具、构建全部就位今天正式写Vue 的代码——模板语法。这是 Vue 的门面担当插值表达式 {{ }}、属性绑定 v-bind、事件绑定 v-on。学完今天页面就能动起来了。二、插值表达式 {{ }}把数据放到页面上双大括号语法是 Vue 最基础的输出方式作用把 script 里的数据渲染到模板中。template !-- 1. 基础用法渲染变量 -- p姓名{{ name }}/p !-- 2. 大括号里可以写简单的 JS 表达式 -- p年龄{{ age 1 }}/p p大写名字{{ name.toUpperCase() }}/p p是否成年{{ age 18 ? 是 : 否 }}/p !-- 3. 错误示范大括号里只能写表达式不能写语句 -- !-- p{{ if (age 18) { return 成年 } }}/p -- /template script setup import { ref } from vue const name ref(小明) const age ref(17) /script三个必须记住的规则大括号里放表达式有返回值不能放if、for这类语句属性值里的{{ }}无效属性要用下面的 v-bindref定义的数据在模板里直接写名字不用 .value下一篇细讲为什么三、v-bind给属性动态绑定数据插值表达式管不了 HTML 属性。想让src、href、class也跟着数据变就得用v-bindtemplate !-- 完整写法 -- a v-bind:hrefurl去 Vue 官网/a !-- 语法糖冒号缩写实际项目 99% 都这么写 -- img :srcimgUrl :alttitle / !-- 绑定的值可以是表达式拼接 -- img :srchttps://cdn.xxx.com/ imgName / /template script setup import { ref } from vue const url ref(https://cn.vuejs.org) const imgUrl ref(/logo.png) const title ref(网站logo) const imgName ref(banner.jpg) /script记忆口诀大括号管内容冒号管属性。试一下它的动态威力——点按钮换图片template img :srcsrc width300 / button clicksrc /img2.png换图/button /template script setup import { ref } from vue const src ref(/img1.png) /script数据一变属性立刻跟着变——这就是数据驱动视图Vue 的核心思想。四、v-on绑定事件用户点击、输入、鼠标移动时执行代码用v-on监听事件template !-- 完整写法 -- button v-on:clickcount完整写法点我 {{ count }}/button !-- 语法糖 实际项目 99% 都这么写 -- button clickcount语法糖点我 {{ count }}/button !-- 事件处理逻辑复杂时封装成函数 -- button clickadd加 10/button /template script setup import { ref } from vue const count ref(0) function add() { count.value 10 } /script两个关键区别clickcount直接写表达式一行搞定clickadd逻辑复杂就写函数名注意函数名不加括号加了括号是立刻执行不加是点击时才执行新手高频坑第七节详解常用事件速查click点击、input输入、change值变化、keyup按键抬起、mouseenter鼠标移入。五、综合实战一个迷你计数器三个语法合体写个完整可跑的小案例template h1{{ title }}/h1 p :style{ color: count 0 ? green : red } 当前计数{{ count }} /p button clickcount1/button button clickreset归零/button /template script setup import { ref } from vue const title ref(我的第一个交互页面) const count ref(0) function reset() { count.value 0 } /script运行后点 1 数字变绿归零后数字变红。v-bind负责颜色、{{ }}负责数字、v-on负责响应点击——三兄弟各司其职。【截图位置点击按钮后计数变绿、归零变红的运行效果】六、今日小结{{ }}渲染数据只能写表达式不能写语句v-bind缩写:绑定属性v-on缩写绑定事件数据变 → 视图自动变这就是数据驱动clickfn传函数名不加括号作者陈志宝下篇预告ref到底是什么为什么 script 里要.value、模板里又不用下一篇讲透 Vue3 响应式的第一块基石ref 响应式基础。