烟台网站建设-中国互联,网站开发公司会计处理,百度竞价在哪里开户,百度营销登录入口目录 #xff08;1#xff09;Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接) #xff08;2#xff09;Vue3的基础语法学习与使用。 #xff08;1#xff09;{{}}绑定数据。 1ref()函数定义变量——绑定数据。 2reactive({...})… 目录 1Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接) 2Vue3的基础语法学习与使用。 1{{}}绑定数据。 1ref()函数定义变量——绑定数据。 2reactive({...})函数定义变量——绑定数据。 2定义数据的两种方式。(常用) 1ref()函数。 2reactive({...})——Vue实例定义中再定义变量。 3v-model。(绑定数据、双向绑定) 4v-if、v-else-if、v-else。(根据变量值动态地改变页面渲染) 5v-for。 1绑定数组变量动态渲染盒子(卡片)。 2绑定数组变量动态渲染选择下拉框。 6v-on(原生写法)或(简写)。事件绑定 7v-bind。(动态绑定属性) 8onMounted。(页面元素加载后触发) 1Vue3工程环境准备、项目基础脚手架搭建详细教程。(博客链接) Vue3实战学习Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像(1)-CSDN博客Vue3实战学习IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程(2)-CSDN博客 2Vue3的基础语法学习与使用。 1{{}}绑定数据。 结合下面的定义数据的两种方式——展示{{}}绑定数据。当Vue实例中的变量的数据变化时页面上的内容也会随之更新。 1ref()函数定义变量——绑定数据。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/divdiv stylefont-size: 25px{{ a }} {{ b }}/div/div
/templatescript setupimport {ref} from vue;//第一种定义数据的方式
const a ref(666)
const b ref(岁岁岁平安真的很帅)/script 页面渲染后如下所示。 2reactive({...})函数定义变量——绑定数据。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/divdiv stylefont-size: 25px;margin-bottom: 20px{{ a }} {{ b }}/divdiv stylefont-size: 25px;font-weight: bold;margin-bottom: 20px{{ data.c }} {{ data.d }}/div/div
/templatescript setupimport {reactive, ref} from vue;const a ref(666)
const b ref(岁岁岁平安真的很帅)//第二种定义数据的方式
const data reactive({c: 123,d:岁岁岁平安加油学Vue3
})/script 页面渲染后如下所示。 不要直接绑定Vue对象。不然整个对象全部渲染出来了。 div stylefont-size: 25px;font-weight: bold;margin-bottom: 20px{{ data.c }} {{ data.d }}{{data}}
/div 2定义数据的两种方式。(常用) 注意两种方式的使用都需要导包才能使用 1ref()函数。 2reactive({...})——Vue实例定义中再定义变量。 3v-model。(绑定数据、双向绑定) v-model通常用于表单绑定数据。使用输入框(input/)进行绑定数据演示。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/divdiv stylemargin-bottom: 20pxinput v-modeldata.c //div/div
/templatescript setupimport {reactive, ref} from vue;//第二种定义数据的方式
const data reactive({c: 123,d:岁岁岁平安加油学Vue3
})/script 双向绑定。数据可以在用户输入的时候发生实时的变化。 4v-if、v-else-if、v-else。(根据变量值动态地改变页面渲染) 需求当data.name的值改变时渲染的span也跟着改变。 使用v-if、v-else-if、v-else完成变量的值动态改变页面渲染。注意当双引号中需要再使用双引号时需要将内部的双引号改成单引号。否则无法识别内部的双引号。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/divdivspan stylefont-weight: bold;color: red v-ifdata.name 佩奇小猪佩奇/spanspan stylefont-weight: bold;color: gold v-else-ifdata.name 美猴王美猴王/spanspan stylefont-weight: bold;color: black v-else科比/span/div/div
/templatescript setupimport {reactive, ref} from vue;const a ref(666)
const b ref(岁岁岁平安真的很帅)//第二种定义数据的方式
const data reactive({c: 123,d:岁岁岁平安加油学Vue3,name:佩奇
})/script 修改data.name的值。观察页面渲染结果。 5v-for。 1绑定数组变量动态渲染盒子(卡片)。 Vue实例data中定义一个数组变量arr。数组变量里面有三个数字。需要实现的操作让这三个数字渲染到三个div盒子中并显示在页面中。 将三个div盒子的样式设计好后。 使用v-for完成数组变量的数据的依次绑定。原理临时变量item通过循环依次将data.arr的数组变量内的值赋值给item。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/div!-- 三个div盒子横着排列 --div styledisplay: flexdiv stylewidth: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px v-foritem in data.arr{{item}}/div/div/div
/templatescript setupimport {reactive, ref} from vue;const a ref(666)
const b ref(岁岁岁平安真的很帅)//第二种定义数据的方式
const data reactive({c: 123,d:岁岁岁平安加油学Vue3,name:,arr:[1,2,3],
})/script 修改data.arr里的值。再查看页面的渲染结果。 2绑定数组变量动态渲染选择下拉框。 让下拉选择框动态绑定数组变量data.fruits。 div stylemargin-bottom: 25pxselect stylewidth: 100pxoption v-foritem in data.fruits{{item}}/option/select
/div 页面的最终渲染结果。 6v-on(原生写法)或(简写)。事件绑定 像鼠标移动、鼠标移入输入框聚集事件、点击div盒子、点击按钮、失焦事件、键盘输入事件等等都是一种事件。 本次案例点击按钮触发事件弹出一个网页提示。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/divdivbutton v-on:clickonClick点我加好运/button/div/div
/templatescript setupimport {reactive, ref} from vue;const a ref(666)
const b ref(岁岁岁平安真的很帅)//第二种定义数据的方式
const data reactive({c: 123,d:岁岁岁平安加油学Vue3,name:,arr:[4,5,6,7],fruits:[苹果,香蕉,橘子,草莓]
})//定义一个点击方法js内容
const onClick (){alert(好运1)
}/script 使用简化写法。使用代替v-on。 将上面的v-for的数组变量动态渲染页面div盒子案例再添加点击div盒子事件然后网页弹窗提示点击的div盒子对应的数字。 templatedivdiv stylebackground-color: darksalmon; font-size: 20px; font-weight: bold; font-style: italic; margin-bottom: 20px 欢迎来到hyl的第一个Vue3项目主页加油学习吧/div!-- div盒子横着排列 --div styledisplay: flex;margin-bottom: 25pxdiv v-on:clickshow(item) stylewidth: 300px;height: 300px;text-align:center;font-weight:bold;line-height:300px;background-color: chartreuse;margin-right: 10px v-foritem in data.arr{{item}}/div/div/div
/templatescript setupimport {reactive, ref} from vue;//定义一个点击方法js内容
const onClick (){alert(好运1)
}const show (item) {alert(item)
}/script 这样每当点击div盒子时就会拿到对应它渲染时的item值并传给show函数。在函数中拿到参数值后在网页弹出提示 7v-bind。(动态绑定属性) 验证了HTML元素是可以被数据动态渲染的给一个div盒子绑定一个基础的css样式属性。 将width(宽)、height(高)、backgroundColor(背景颜色)设置成data对象里的对象数据通过v-bind动态绑定对象并完成指定的div盒子基础样式设置。 将{width:100px,height:100px,backgroundColor:yellow}替换成对象data.box。 动态绑定基础样式成功渲染页面。 可以使用简写:代替v-bind。 使用img标签动态绑定链接。渲染页面。图片地址https://www.runoob.com/wp-content/uploads/2017/01/vue.png 成功动态的渲染了图片的显示。因为以后data.img数据值肯定不是直接定义在对象data中的而是存储在数据库中的。 8onMounted。(页面元素加载后触发) 因为网页的所有元素加载并渲染出来是需要一点点时间的。如果想让网页的元素加载后再执行某些操作时就需要用到。实现渲染数据图、表时常用渲染出页面数据图、表基本结构后才会去数据库拿取数据完成剩下的渲染... 导入包。 onMounted((){...})。(hook钩子函数) 点击刷新按钮。当页面刷新后并加载完成就会弹出网页提示点击确定后立马显示网页完整渲染。
