百度不收录我的网站,个人中心页面设计html,国内最好的erp系统,怎么看网站开发语言Vue.js是一个渐进式JavaScript框架#xff0c;用于构建用户界面。它专门设计用于Web应用程序#xff0c;并专注于视图层。Vue允许开发人员创建可重用的组件#xff0c;并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统#xff0c;用于高效地渲染和重新渲染组件。Vue以… Vue.js是一个渐进式JavaScript框架用于构建用户界面。它专门设计用于Web应用程序并专注于视图层。Vue允许开发人员创建可重用的组件并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统用于高效地渲染和重新渲染组件。Vue以其简单易用的特点而闻名使其成为初学者和有经验的开发人员的首选。
使用以下方法构建版本 下载 vue.esm-browser.js 这个模块文件 使用了script typemodule且导入了上面的js文件详细点击这里
div idapp{{ msg }}/div!-- ES6基准新的特性支持类似Python的模板开发方式 --
script typemoduleimport { createApp } from ../vue.esm-browser.jscreateApp({data() {return {msg: Hello Vue!}}}).mount(#app)
/script
一、创建一个 Vue 应用程序 每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例 script typemodule import { createApp } from ../vue.esm-browser.js //通过 createApp 函数创建一个新的应用实例createApp({}) 应用实例必须在调用了.mount() 方法后才会渲染出来该方法接收一个“容器”参数可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串createApp 里面的内容将会被渲染在容器元素里面 div idapp /div!-- ES6基准新的特性支持类似Python的模板开发方式 --
script typemoduleimport { createApp } from ../vue.esm-browser.jscreateApp({}).mount(#app); //将 Vue 应用程序挂载(mount) 到 app 元素上/script 然后手写一个setup函数, 用于设置组件的响应式数据属性和函数方法等 创建一个Vue实例并利用setup函数配置好这个实例里的数据和方法并将需要用到的数据和方法暴露出来供HTML调用。 div idapp/divscript typemoduleimport { createApp } from ../vue.esm-browser.jscreateApp({setup(){// 定义数据属性let msg 成功创建第一个Vue应用程序!;const web {title: 百度一下你就知道,url: www.baidu.com}// 定义函数方法const func () console.log(方法func被调用);// 返回一个对象类型的数据return { msg, web,func}}}).mount(#app); /script {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染 div idapp!-- 如: Vue 实例中定义一个 msg 变量, 值为 成功创建第一个Vue应用程序!, 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 成功创建第一个Vue应用程序! --p{{ msg }}/pp{{ web.title }}/pp{{ web.url }}/pp{{ func() }}/p
/divscript typemoduleimport { createApp } from ../vue.esm-browser.jscreateApp({setup(){// 定义数据属性let msg 成功创建第一个Vue应用程序!;const web {title: 百度一下你就知道,url: www.baidu.com}// 定义函数方法const func () console.log(方法func被调用);// 返回一个对象类型的数据return { msg, web,func}}}).mount(#app); /script 接下来需要下载一个live-server插件我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。实现自动刷新架设本地服务器环境 二、让数据变成响应式 ref 和 reactive
在Vue 3中非响应式数据在模板中普通变量不会自动更新我们可以使用 ref 和 reactive 函数来将数据变成响应式。
1、ref 函数可以将基本类型数据包装成响应式对象
//使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
div idappp{{ msg }}/p
/div
script typemodule
//导入 refimport {createApp, ref} from ../vue.esm-browser.jscreateApp({setup(){// 定义数据let msg ref(成功创建第一个Vue应用程序!);// 返回一个对象类型的数据return { msg, }}}).mount(#app);
/script 在上面的例子中使用 ref 函数将 成功创建第一个Vue应用程序! 包装成响应式对象 msg然后使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染 2、reactive 函数可以将对象或数组转换成响应式对象。
//使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
div idappp{{ web.title }}/pp{{ web.url }}/p
/div
script typemodule
//导入 refimport {createApp, reactive} from ../vue.esm-browser.jscreateApp({setup(){// 定义数据const web reactive({title: 百度一下你就知道,url: www.baidu.com});// 返回一个对象类型的数据return { web, }}}).mount(#app);
/script 在上面的例子中我们使用 reactive 函数将包含 title 和 url 属性的对象转换成响应式对象 web。我们可以直接访问和修改 web 中的属性。
ref 和 reactive 函数的不同之处在于ref 返回的是一个包装对象我们需要使用 .value 来访问和修改数据。而 reactive 返回的是一个原始对象我们可以直接访问和修改其中的属性。
无论是 ref 还是 reactive当数据发生变化时相应的视图也会自动更新。这使得我们能够轻松地实现数据的响应性。
三、事件绑定指令 v-on
在Vue中可以使用 v-on 指令来绑定事件处理函数。
v-on指令可以简写为使用方式如下 !-- v-on:click 表示在 button 元素上监听 click 事件 --button v-on:clickedit修改/button br!-- click 简写形式 --button clickedit修改/button
上面的代码将 edit 方法绑定到 click 事件上。当按钮被点击时edit 方法将被执行。 事件处理函数可以是一个直接的方法引用也可以是一个内联函数。例如
div idapph3{{ web.user }}/h3!-- click 简写形式 --button clickadd(20, 30)加法/button br/divscript typemoduleimport { createApp, reactive, ref } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({user: 0});const add (a, b) {web.user a b}return {web,//响应式数据add,//方法}}}).mount(#app)/script 在上面的例子中将 add 方法绑定到 click 事件上我们通过传递 20 和 30 来调用 add 方法修改web中的user属性并使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染 除了click事件v-on 指令还可以绑定其他DOM事件如keyup、keydown等(点击这里了解DOM事件) 。例如 !-- 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 例如上面的代码将add方法绑定到keyup.enter事件上当用户按下回车键时add方法将被执行。
四、条件渲染指令 v-show 和 v-if
条件渲染指令在Vue.js中用于控制元素的显示或隐藏它们分别是v-show和v-if。
v-show指令根据其后表达式的真假值来控制元素的显示与隐藏。它通过修改元素的display:none实现隐藏的当表达式为真时元素显示为假时元素隐藏。例如 div idapph3显示状态: {{ web.show }}/h3!-- Vue处理v-show变化时是用display:none实现隐藏的可以通过F12检查源代码当点击时源码会加入display:none --p v-showweb.show广东云浮中医药职业学院计算机学院v-show/p /divscript typemoduleimport { createApp, reactive, ref } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({ // 响应式数据show: true, //真});return {web,}}}).mount(#app);/script 上面的代码将根据web中show属性的值来显示或隐藏p元素 v-if指令是真正地条件渲染。当表达式为真时元素会被渲染到DOM中为假时元素会被移除。 例如 div idapph3显示状态: {{ web.show }}/h3!-- Vue处理v-if变化时是通过删除节点实现隐藏的可以通过F12检查源代码当点击时源码会删除节点 。当遇到需要频繁显示和隐藏的场景时不是合使用v-if 因为频繁增删节点会导致渲染效率下降 --p v-ifweb.show广东云浮中医药职业学院基础学院v-if/pbutton clicktoggle切换显示状态/button/divscript typemoduleimport { createApp, reactive, ref } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({ // 响应式数据show: true});const toggle () {web.show !web.show; // 这个布尔变量被切换后模板中用到的地方会自动更新进而被v-show捕获}return {web,toggle}}}).mount(#app);/script 上面的代码定义了一个toggle 方法将其绑定到 click 事件上当按钮被点击时toggle 方法将被执行。改变web中show属性的布尔变量根据web中show属性的值来渲染或移除p元素 v-if 是“真实的”按条件渲染因为它确保了在切换时条件区块内的事件监听器和子组件都会被销毁与重建。 相比之下v-show 简单许多元素无论初始条件如何始终会被渲染只有 CSS display 属性会被切换。 总的来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要频繁切换则使用 v-show 较好如果在运行时绑定条件很少改变则 v-if 会更合适。 在使用 v-if 时还可以通过使用 v-else-if 和 v-else 指令来实现条件分支。
例如 当用户数量小于100为新网站用户数量大于等于100小于1000为优秀网站用户数量大于等于1000小于10000为资深网站否则为超级网站 div idapph3{{ web.user }}/h3p v-ifweb.user 100新网站/pp v-else-ifweb.user 100 web.user 1000优秀网站/pp v-else-ifweb.user 1000 web.user 10000资深网站/pp v-else超级网站/pbutton clickadd_user增加用户/button/divscript typemoduleimport { createApp, reactive, ref } from ./vue.esm-browser.jscreateApp({setup() {const web reactive({ // 响应式数据user: 50 //初始用户为50});const add_user () {web.user 1000;}return {web,add_user}}}).mount(#app);/script 上面的代码展示了如何使用 v-else-if 和 v-else 来创建条件分支。根据不同的条件会显示不同的内容。
五、遍历指令 v-for
在Vue中使用 v-for 指令可以遍历数组或对象根据每个元素生成相应的元素或组件。它用于数组或者对象的迭代帮助开发者轻松地将数据渲染成列表或重复结构。
它的基本语法如下 div idapp!-- 遍历对象的值 --h4实验1遍历对象的值/h4p v-forvalue in data.user {{value}} /p/divscript typemoduleimport { createApp, reactive } from ../vue.esm-browser.jscreateApp({setup() {const data reactive({//数组number: [十, 十一, 十二], //对象user: { name: 李雷, gender: 女, class:1}});return {data}}}).mount(#app)/script 其中data.user是data中的user属性对象value是对象中的每个值 除了对对象的值进行遍历v-for还支持对对象、数组的值、索引和键进行遍历以及迭代数字。下面是一些示例
遍历对象的值和索引先值后索引 !-- 遍历对象的值和索引。 注意写指令时先值后索引 --h4实验2遍历对象的值和索引键。 注意写指令时先值后索引/h4p v-for(value, key) in data.user {{key}} : {{value}} /p 遍历数组的值和索引先值后索引 !-- 遍历数组的值和索引。 注意写指令时先值后索引 --h4实验3遍历数组的值和索引。 注意写指令时先值后索引/h4p v-for(v, i) in data.number {{i}} : {{v}} /p 上面代码中值和索引的名字可改变但要一定注意的是写指令时先值后索引 遍历对象的值、键和索引先值再键后索引 !-- 遍历对象的值键和索引。 注意写指令时先值再键后索引 --h4实验4遍历对象的值键和索引。 注意写指令时先值再键后索引/h4p v-for(v, k, i) in data.user {{i}} : {{k}}: {{v}} /p 遍历数字 ulli v-forn in 10{{ n }}/li/ul 总结起来v-for指令用于在Vue.js模板中进行循环遍历可以对数组、对象和数字进行遍历
六、节点的动态属性 v-bind (单向绑定)
v-bind是Vue.js的指令之一用于动态地绑定节点的属性。它可以将Vue实例的数据或计算属性绑定到节点的属性上实现单向绑定。
v-bind的基本语法是在属性名前加上 v-bind: 或简写为 : 后面跟上要绑定的表达式。例如
input标签动态属性绑定 div idapph3 实验1input标签动态属性绑定 v-bind:value /h3input typetext v-bind:valueweb.str!-- 简写形式 input typetext :valueweb.str --/divscript typemoduleimport { createApp, reactive } from ../vue.esm-browser.jscreateApp({setup() {const web reactive({str: www.baidu.com})return {web}}}).mount(#app)/script 上面的代码中:value 是 v-bind:value 的简写形式web.str 是一个Vue实例的数据或属性它会在渲染时被动态地绑定到 input 节点的 value 属性上。 img标签动态属性绑定 div idapph3 实验2 img标签动态属性绑定/h3img v-bind:srcweb.img/divscript typemoduleimport { createApp, reactive } from ../vue.esm-browser.jscreateApp({setup() {const web reactive({img: ../img_src/logo0.png})return {web}}}).mount(#app)/script 上面的代码中web.img 是一个Vue实例的数据或属性它会在渲染时被动态地绑定到img节点的src属性上。 控制HTML标签的class中某个值是否存在
除了绑定属性值v-bind还可以绑定动态的CSS类和内联样式。例如 控制HTML标签的class中某个值是否存在使用 v-bind:class或 v-bind:id通过布尔值控制该类名是否存在进而控制CSS样式是否被选择生效
headstyle.textColor{color: red;font-size: larger;}/style
/headbodydiv idappb v-bind:class{textColor:web.fontStatus} idb1广东云浮中医药职业学院/bbrbrbrbutton v-on:clickchange修改/button/divscript typemoduleimport { createApp, reactive } from ../vue.esm-browser.jscreateApp({setup() {const web reactive({fontStatus: false})const change () {web.fontStatus !web.fontStatus; //修改布尔变量}return {web,change}}}).mount(#app)/script/body 上面的代码中web.fontStatus 是Vue实例的数据或计算属性根据它的布尔值来动态地控制CSS样式是否被选择生效。 fontStatus的初始值为false所以不生效。定义了一个change方法来修改布尔变量将 change方法绑定到 click 事件上。当按钮被点击时change方法将被执行此时fontStatus 的值变为truetextColor的CSS样式就被选择生效。
需要注意的是v-bind实现的是单向绑定也就是数据变化会导致视图更新但视图更新不会反过来改变数据。如果需要实现双向绑定则应该使用v-model指令。
综上所述v-bind指令用于动态绑定节点的属性可以绑定属性值、CSS类和内联样式。它通过将Vue实例的数据或计算属性与节点属性进行绑定实现数据的单向绑定。
