网站开发需会的课程,wordpress编辑小工具代码,右安门网站建设,摄影师个人网站怎么做文章目录 Vue应用基本结构模块化开发ref和reactive绑定事件 v-on 简写显示和隐藏 v-show条件渲染 v-if动态属性绑定 v-bind 简写#xff1a;遍历数组或对象 v-for双向数据绑定 v-model渲染数据 v-text 和 v-html计算属性 computed侦听器 watch自动侦听器 watchEffect 本文示例… 文章目录 Vue应用基本结构模块化开发ref和reactive绑定事件 v-on 简写显示和隐藏 v-show条件渲染 v-if动态属性绑定 v-bind 简写遍历数组或对象 v-for双向数据绑定 v-model渲染数据 v-text 和 v-html计算属性 computed侦听器 watch自动侦听器 watchEffect 本文示例代码下载链接Vue3基本语法示例代码
Vue.js是渐进式JavaScript框架渐进式是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架。 下面引入vue采用本地文件的方式 vue.global.js vue.esm-browser.js vue.esm-browser.js和vue.global.js是Vue.js的两个不同构建版本主要区别在于模块系统和使用场景。前者更适合模块化开发如webpack打包。后者是一个全局构建适合在浏览器中直接使用不依赖模块系统。在全局作用域中注册Vue使得在浏览器中可以直接通过Vue访问Vue的API。更适合快速原型开发或者在没有构建工具的情况下直接在 HTML 中使用。 加载后可在浏览器页面中右键另存为js文件放到测试文件中类似如下 如果采用的是VS Code可安装插件Live Server右键查看页面效果
Vue应用基本结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
body!--div idapp/div 指定一个id为app的div元素;{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染,如: Vue实例中定义一个 msg变量, 值为Hello world, 在模板中若使用插值表达式{{ msg }}则会被渲染成Hello world;响应式数据是指当数据发生变化时, 模板中依赖于该数据的部分会自动更新--div idapp{{ msg }}h2{{ web.title }}/h2h3{{ web.url }}/h3/divscript//创建一个 Vue 应用程序Vue.createApp({//Composition API(组合式API) 的setup选项 用于设置响应式数据和方法等setup() {//Composition API的reactive()函数 用于创建响应式数据//Vue.reactive创建一个响应式数据对象web, 其中包含title和url属性const web Vue.reactive({ title: 百度搜索,url: baidu.com})//返回数据return {msg: success,web}}}).mount(#app) //将Vue应用程序挂载(mount)到app元素上/script
/body
/html上述程序运行结果页面如下
或者将创建app部分更换成如下写法效果相同
//将 Vue 对象中的 createApp、reactive 属性赋值给 createApp、reactive 变量
const { createApp, reactive } Vue //解构赋值语法createApp({setup() {const web reactive({title: 百度搜索,url: baidu.com})return {msg: success,web}}
}).mount(#app)模块化开发
或者像如下方式引入esm-browser.js中的模块也是相同的效果。
script typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({title: 百度搜索,url: baidu.com})return {msg:success,web}}}).mount(#app)
/scriptref和reactive
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idappmsg: {{ msg }}h3web.title: {{ web.title }}/h3h3web.url: {{ web.url }}/h3h3web.number: {{ number }}/h3/divscript typemoduleimport { createApp, ref, reactive } from ./vue.esm-browser.jscreateApp({setup() {//ref用于存储单个基本类型的数据, 如:数字、字符串等const number ref(10) //使用ref创建的响应式对象, 需要通过.value属性来访问和修改其值number.value 20 //用于存储复杂数据类型, 如:对象或数组等const web reactive({ title: 百度搜索,url: baidu.com})//使用reactive创建的响应式对象, 可以直接通过属性名来访问和修改值web.url www.baidu.com return {msg: success,number,web}}}).mount(#app)/script
/body
/html上述程序运行结果如下
绑定事件 v-on 简写
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapph3{{ msg }}/h3h3{{ web.url }}/h3h3{{ web.user }}/h3h3{{ sub(100, 20) }}/h3!-- v-on:click 表示在 button 元素上监听 click 事件 --button v-on:clickedit修改/button br!-- click 简写形式 --button clickadd(20, 30)加法/button br!-- enter space tab 按键修饰符keyup是在用户松开按键时才触发keydown是在用户按下按键时立即触发--回车 input typetext keyup.enteradd(40, 60) br空格 input typetext keyup.spaceadd(20, 30) brTab input typetext keydown.tabadd(10, 20) brw input typetext keyup.wadd(5, 10) br!-- 组合快捷键 --Ctrl Enter input typetext keyup.ctrl.enteradd(40, 60) brCtrl A input typetext keyup.ctrl.aadd(20, 30)/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({title: 百度搜索,url: baidu.com,user: 0})const edit () {web.url www.baidu.com//错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据//msg 百度搜索 }const add (a, b) {web.user a b}const sub (a, b) {return a - b}return {//普通变量, 非响应式数据, 在模板中普通变量不会自动更新msg: success, //响应式数据web, //方法edit, add,sub,}}}).mount(#app)/script/body
/html上述程序运行初始界面如下 上述页面中点击相应按钮会将光标定位到输入框内再使用快捷键即可完成相应的调用加法功能函数页面中数据渲染及时更新。
显示和隐藏 v-show
div idapph3{{ web.show }}/h3p v-showweb.show百度搜索 baidu.com/pbutton clicktoggle点击切换显示状态/button
/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({show: true})const toggle () {web.show !web.show}return {web,toggle}}}).mount(#app)
/script上述程序运行后初始页面如下 点击按钮可切换页面中元素如下
条件渲染 v-if
div idapph3{{ web.show }}/h3p v-showweb.show百度搜索/pp v-ifweb.showbaidu.com/pbutton clicktoggle点击切换显示状态/buttonp v-ifweb.user 1000Class1网站/pp v-else-ifweb.user 1000 web.user 10000Class2网站/pp v-else-ifweb.user 10000 web.user 100000Class3网站/pp v-elseSuperClass网站/p
/divscript typemodule/*v-show通过 css display属性来控制元素的显示或隐藏;v-if用于对元素进行条件渲染. 当条件为true时, 渲染该元素; 为false时, 则不渲染。v-show适用于频繁切换元素的显示状态, 因为只改变display属性, 不需要重新渲染整个组件。v-if适用于较少改变的场景, 因为频繁从dom中删除或添加元素, 会导致性能下降。*/import { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({show: true,user: 500})const toggle () {web.show !web.show}return {web,toggle}}}).mount(#app)
/script动态属性绑定 v-bind 简写
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/scriptstyle.textColor{color:aqua;}/style
/head
bodydiv idapph3常规方法传值/h3h3{{value}}/h3input typetext valuebaidu.comh3使用v-bind动态传值/h3h3{{web.url}}/h3input typetext v-bind:valueweb.urlh3使用v-bind简写形式传值,即只有一个冒号/h3input typetext :valueweb.url!-- :src --h3本地路径传图片资源/h3img src./images/test.jpg stylemax-width: 20%; height: auto;h3动态绑定图片源/h3img :srcweb.img stylemax-width: 10%; height: auto;h3动态绑定类名/h3百度搜索!-- b标签用于加粗文本 --b classtextColor百度搜索/b!-- :class用于动态绑定类名。如果web.fontStatus为true则会将textColor类应用于b标签如果为false则不会应用这个类。 --h3动态绑定类名并决定是否启用/h3b :class{textColor:web.fontStatus}baidu.com/b/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({url: www.baidu.com,img: ./images/test.jpg,fontStatus: true})return {web}}}).mount(#app)/script
/body
/html上述程序运行后效果如下
遍历数组或对象 v-for
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/scriptstyle.textColor{color:aqua;}/style
/head
bodydiv idappulli v-for(value, index) in data.numberindex值为{{ index }} : value值为{{ value }}/li/ululli v-forvalue in data.uservalue值为{{ value }}/li/ululli v-for(value, key) in data.userkey值为{{ key }} : value值为{{ value }}/li/ululli v-for(value, key, index) in data.userindex值为{{ index }} : key值为{{ key }} : value值为{{ value }}/li/ulul!-- template 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 --template v-for(value, key, index) in data.userli v-ifindex 1index值为{{ index }} : key值为{{ key }} : value值为{{ value }}/li/template/ulul!-- :keyvalue.id 为 每个 li 元素设置一个唯一的 key 值 --li v-for(value, index) in data.teacher :titlevalue.name :keyvalue.idindex值为 {{ index }} : value.id值为{{ value.id }} value.name值为{{ value.name }} value.web值为{{ value.web }}/li/ul/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const data reactive({number: [足球, 篮球, 排球], //数组user: { //对象name: tina,gender: 女},//包含两个对象的数组teacher: [ { id: 100, name: 小明, web: baidu.com },{ id: 101, name: Mario, web: www.baidu.com }]})return {data}}}).mount(#app)/script
/body
/html上述程序运行后效果如下
双向数据绑定 v-model
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/scriptstyle.textColor{color:aqua;}/style
/head
bodydiv idapph3文本框 {{ data.text }}/h3h3单选框 {{ data.radio }}/h3h3复选框 {{ data.checkbox }}/h3h3记住密码 {{ data.remember }}/h3h3下拉框 {{ data.select }}/h3!-- 单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 --单向数据绑定 input typetext :valuedata.texthr!-- 双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新对于 input typetext, v-model 绑定的是 input 元素的 value 属性--双向数据绑定 input typetext v-modeldata.texthr!-- 单选框 对于 input typeradio, v-model 绑定的是 input 元素的选中状态--input typeradio v-modeldata.radio value1男input typeradio v-modeldata.radio value2女hr!-- 复选框对于 input typecheckbox, v-model 绑定的是 input 元素的选中状态--input typecheckbox v-modeldata.checkbox valuea红色input typecheckbox v-modeldata.checkbox valueb绿色input typecheckbox v-modeldata.checkbox valuec蓝色hr!-- 记住密码 --input typecheckbox v-modeldata.remember记住密码hr!-- 下拉框对于 select, v-model 绑定的是 select 元素的选中状态--select v-modeldata.selectoption value请选择/optionoption valueA红色/optionoption valueB绿色/optionoption valueC蓝色/option/select/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const data reactive({text: baidu.com, //文本框radio: , //单选框checkbox: [], //复选框remember: false, //单个复选框-记住密码select: //下拉框})return {data}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示 当操作双向绑定文本框或其他可选控件时数据可双向绑定实时更新 另外还有v-model常见修饰符属性案例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapph3url: {{ web.url }}/h3h3user: {{ web.user }}/h3实时渲染 input typetext v-modelweb.url br在失去焦点或按下回车键之后渲染 input typetext v-model.lazyweb.url br!-- 输入 100人, web.user 的值仍为 100 --输入框的值转换为数字类型 input typetext v-model.numberweb.user br!-- 此处的输入框输入完之后去除首尾空格但管不到其他部分更新的数据 --去除首尾空格 input typetext v-model.trimweb.url/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({url: baidu.com,user: 10})return {web}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示 相应动态效果如描述所示。
渲染数据 v-text 和 v-html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapph3{{ web.title }}/h3!-- v-text 将数据解析为纯文本格式 --h3 v-textweb.title/h3!-- v-html 将数据解析为 html 格式 --h3 v-htmlweb.url/h3/divscript typemoduleimport { createApp, reactive } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({title: 百度搜索,url:i stylecolor:blue;www.baidu.com/i})return {web}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示
计算属性 computed
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapph3add: {{ add() }}/h3h3add: {{ add() }}/h3h3sum: {{ sum }}/h3h3sum: {{ sum }}/h3x input typetext v-model.numberdata.x bry input typetext v-model.numberdata.y/divscript typemoduleimport { createApp, reactive, computed } from ./vue.esm-browser.jscreateApp({setup() {const data reactive({x: 10,y: 20})//方法-无缓存,只要被调用就会执行方法里面的代码let add () {console.log(add) //打印两次return data.x data.y}//计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]//只有当依赖的数据发生变化才会执行里面的内容否则使用缓存const sum computed(() {console.log(sum) //打印一次return data.x data.y})return {data,sum,add}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示
侦听器 watch
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapp颜色select v-modelcoloroption value请选择/optionoption value1红色/optionoption value2绿色/optionoption value3蓝色/option/selecthr年select v-modeldate.yearoption value请选择/optionoption value20232023/optionoption value20242024/optionoption value20252025/option/select月select v-modeldate.monthoption value请选择/optionoption value1010/optionoption value1111/optionoption value1212/option/select/divscript typemoduleimport { createApp, ref, reactive, watch } from ./vue.esm-browser.jscreateApp({setup() {const color ref() //颜色const date reactive({ //日期year: 2024,month: 11})//监听 colorwatch(color, (newValue, oldValue) {console.log(oldValue, oldValue, newValue, newValue)if (newValue 2) {console.log(绿色)}})//监听 datewatch(date, (newValue, oldValue) {/*JS中对象和数组是通过引用传递的, 而不是通过值传递当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组所以如果修改了对象或数组的值那么打印出来的结果则是修改后的值*/console.log(oldValue, oldValue, newValue, newValue)if (newValue.year 2025) {console.log(2025)}if (newValue.month 11) {console.log(11)}})//监听 date 中的某个属性 year//使用() 创建了一个getter函数这样只监听特定的属性变化watch(() date.year, (newValue, oldValue) {console.log(oldValue, oldValue, newValue, newValue)if (date.year 2024) {console.log(2024)}})return {color,date}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示 点改变相应控件的值时相应的监听函数会被调用。
补充引用传递相关知识 引用传递是指在 JavaScript 中当对象或数组作为参数传递时传递的是对该对象或数组的引用而不是其副本。这意味着在函数内部对该对象或数组的修改将影响到外部的原始对象或数组。
//假设我们有一个对象 person我们将其作为参数传递给一个函数
let person {name: Alice,age: 25
};function updateAge(obj) {obj.age 1; // 修改对象的 age 属性console.log(内部:, obj);
}//在updateAge函数中obj实际上是对person对象的引用。对obj.age的修改直接影响了person.age的值。
//因此当在updateAge函数中增加age时person对象的age属性也发生了变化。
console.log(修改前:, person); // 输出: { name: Alice, age: 25 }
updateAge(person); // 传递引用
console.log(修改后:, person); // 输出: { name: Alice, age: 26 }自动侦听器 watchEffect
当在watchEffect内部引用响应式数据如ref或reactive的属性时Vue会自动追踪这些依赖。这意味着只要这些数据发生变化watchEffect内的函数就会被重新执行。包括
用户在界面上进行交互导致数据变化。程序代码直接修改数据的情况。刷新页面并重新挂载组件时watchEffect也会在组件首次加载时执行一次。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDemo/titlescript srcvue.global.js/script
/head
bodydiv idapp颜色select v-modelcoloroption value请选择/optionoption value1红色/optionoption value2绿色/optionoption value3蓝色/option/selecthr年select v-modeldate.yearoption value请选择/optionoption value20232023/optionoption value20242024/optionoption value20252025/option/select月select v-modeldate.monthoption value请选择/optionoption value1010/optionoption value1111/optionoption value1212/option/select/divscript typemodule/*watch需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行若需要更精细地控制或需要获取到原值, 需要使用watch*/import { createApp, ref, reactive, watchEffect } from ./vue.esm-browser.jscreateApp({setup() {const color ref() //颜色const date reactive({ //日期year: 2024,month: 11})//自动监听watchEffect(() {console.log(------ 监听开始)if (color.value 2) {console.log(绿色)}if (date.year 2025) {console.log(2025)}if (date.month 11) {console.log(11)}console.log(------ 监听结束)})return {color,date}}}).mount(#app)/script
/body
/html上述程序运行结果如下图所示
