营销型网站建立费用,临夏州住房和城乡建设厅网站,沈阳建站经验,seo工资目录
一、Vue的模板语法
1. 学会使用VsCode
2. 文本插值
3. 使用JavaScript表达式
4. 无效
5. 原始html
二、 属性绑定
1. 属性绑定 2.简写方案 3.布尔型Attribute 4. 动态邦定多个值
三、条件渲染
1. v-if
2. v-else
3. v-else-if
4. v-show
5. v-if VS v-sho…目录
一、Vue的模板语法
1. 学会使用VsCode
2. 文本插值
3. 使用JavaScript表达式
4. 无效
5. 原始html
二、 属性绑定
1. 属性绑定 2.简写方案 3.布尔型Attribute 4. 动态邦定多个值
三、条件渲染
1. v-if
2. v-else
3. v-else-if
4. v-show
5. v-if VS v-show
四、循环遍历指令 1. 复杂数据
2. v-for 与对象
3. 通过key管理状态
4. Key的来源 一、Vue的模板语法 Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。
1. 学会使用VsCode Ctrl ~波浪线键 打开终端执行npm run dev ,运行程序将以下两个模块中的内容删除掉 将App.vue文件改成如下 2. 文本插值 最基本的数据绑定形式是文本插值它使用的是“Mustache“语法(即双大括号): scriptexport default{data(){return{msg:神奇的棒棒糖,hello:hello world}}}
/script
templateh3模版语法/h3p{{ msg }}/pp{{ hello }}/p
/template 3. 使用JavaScript表达式 每个绑定仅支持单一表达式也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面 (一般不建议这样做) scriptexport default{data(){return{number:10,ok:true,message:hello}}}
/script
templatep {{ number 1 }} /pp {{ ok?Yes:No }} /pp {{ message.split().reverse().join() }} /p
/template
4. 无效
script/script
template!-- 这是一个语句而非表达式 (错误) --p {{ var a 1}} /p!-- 条件控制也不支持请使用三元表达式 --p {{if(ok) {return message} }} /p
/template
5. 原始html 双大括号将会将数据插值为纯文本而不是 HTML。若想插入 HTML你需要使用 v-html 指令。
scriptexport default{data(){return{rawHtml:a hrefhttps://www.boyatop.cn/青城博雅/a}}}
/script
templatep 纯文本: {{ rawHtml }} /pp 属性:span v-htmlrawHtml/span /p
/template 动态式语法 模版语言 scriptexport default{data(){return{msg:hello world,rawHtml:a hrefhttps://www.boyatop.cn/青城博雅/a}}}
/scripttemplateh3模板语法/h3p{{ msg }}/pp纯文本{{ rawHtml }}/pp属性span v-htmlrawHtml/span/p
/template 第二种写法 script setupimport { Hello } from ./components/Hello.vue;
/scripttemplateHello/
/template scriptexport default{data(){return{msg:hello world,rawHtml:a hrefhttps://www.boyatop.cn/青城博雅/a}}}
/scripttemplateh3模板语法/h3p{{ msg }}/pp纯文本{{ rawHtml }}/pp属性span v-htmlrawHtml/span/p
/template 二、 属性绑定
1. 属性绑定 双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute应该使用 v-bind 指令。
templatediv v-bind:iddynamicId v-bind:classdynamicClass测试/div
/template
scriptexport default{data(){return{dynamicClass:appClass,dynamicId:appid}}}
/script
style.appClass{color: red;font-size: 30px;}
/style v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicid 属性保持一致。如果绑定的值是 null 或者undefined,那么该 attribute 将会从渲染的元素上移除
比如 浏览器元素上边不显示 2.简写方案
因为 v-bind 非常常用我们提供了特定的简写语法 冒号就是v-bind简写 3.布尔型Attribute 布尔型 attribute 依据 true /false 值来决定 attribute 是否应该存在于该元素上,disabied 就是最常见的例子之一。 4. 动态邦定多个值 如果你有像这样的一个包含多个 attribute 的JavaScript 对象
templatediv v-bindObjectofAttrs青城博雅/div
/template
scriptexport default{data(){return{ObjectofAttrs:{class:appClass,id:appid}}}}
/script
style.appClass{color: red;font-size: 30px;}
/style 三、条件渲染
在 Vue中提供了条件渲染这类似于 Javascript 中的条件语句 v-ifv-elsev-else-ifv-show 1. v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
templatediv v-ifflag你能看到我嘛/div
/template
scriptexport default{data(){return{flag:true // flag:false }}}
/script
2. v-else 你也可以使用v-else为v-if添加一个“else区块”
templatediv v-ifflag你能看到我嘛/divdiv v-else你还能看到我嘛/div
/template
scriptexport default{data(){return{//flag:true flag:false }}}
/script
3. v-else-if 顾名思义v-else-if提供的是相应于v-if的“else if区块”。它可以连续多次重复使用。
templatediv v-iftype A A /divdiv v-else-iftype B B /divdiv v-else-iftype C C /divdiv v-elseNot A/B/C/div
/template
scriptexport default{data(){return{type:D}}}
/script
4. v-show
另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样。
templatediv v-showflag你能看到我吗/div
/template
scriptexport default{data(){return{flag:false}}}
/script
5. v-if VS v-show v-if是“真实的”按条件渲染因为它确保了在切换时条件区块内的事件监听器和子组件都会被销毁与重建。 v-if也是惰性的如果在初次渲染时条件值为false则不会做任何事。条件区块只有当条件首次变为true时才被渲染。 相比之下v-show简单许多元素无论初始条件如何始终会被渲染只有CSS display属性会被切换。
总的来说v-if有更高的切换开销而v-show有更高的初始渲染开销。
因此如果需要频繁切换则使用v-show较好 如果在运行时绑定条件很少改变则v-if会更合适。 四、循环遍历指令 我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items形式的特殊语法 其中 items 是源数据的数组而 item 是迭代项的别名。
templateh1列表渲染/h1p v-foritem in names {{ item }} /p
/template
scriptexport default{data(){return{names:[计算机网络,计算机组成原理,数据结构与算法,操作系统]}}}
/script 1. 复杂数据 大多数情况我们渲染的数据源来源于网络请求也就是JSON格式
templateh1列表渲染/h1div v-foritem in resultp {{ item.title }} /pp {{ item.url }} /p/div
/template
scriptexport default{data(){return{result:[{id:1,title:河北大学成功获批国家社会科学基金重大项目,url:https://www.hbu.edu.cn/info/1167/20000.htm},{id:2,title:2024年河北省高校图书馆年会在河北大学举办,url:https://www.hbu.edu.cn/info/1167/20015.htm},{id:3,title:河北大学举办2025年研究生元旦晚会,url:https://www.hbu.edu.cn/info/1167/20023.htm}]}}}
/script v-for 也 支持使用可选的第二个参数表示当前项的位置索引。 templateh1列表渲染/h1p v-for(item,index) in names{{ index }}-{{ item }} /p
/template
scriptexport default{data(){return{names:[计算机网络,计算机组成原理,数据结构与算法,操作系统] }}}
/script 你也可以使用 of 作为分隔符来替代 in 这更接近JavaScript的迭代器语法 2. v-for 与对象
你也可以使用v-for来遍历一个对象的所有属性
templateh1列表渲染/h1p v-for(value,key,index) of userInfo{{ value }} - {{ key }} -{{ index }}/p/template
scriptexport default{data(){return{userInfo:{name:张三,age:20}}}}
/script
3. 通过key管理状态 Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时Vue不会随之移动DOM元素的顺序而是就地更新每个元素确保它们在原本指定的索引位置上渲染。 为了给Vue一个提示以便它可以跟踪每个节点的标识从而重用和重新排序现有的元素你需要为每个元素对应的块提供一个唯一的key
templateh1key属性添加到v-for当中/h1p v-for(item,index) in names :keyindex{{ item }}/p/template
scriptexport default{data(){return{names:[计算机网络,计算机组成原理,数据结构与算法,操作系统] }}}
/script 温馨提示 key在这里是一个通过v-bind绑定的特殊attribute 推荐在任何可行的时候为 v-for 提供一个key key绑定的值期望是一个基础类型的值例如字符串或number类型 4. Key的来源 请不要使用index作为key的值我们要确保每一条数据的唯一索引不会发生变化。
templateh1列表渲染/h1div v-for(item,index) in result :keyitem.id p {{ item.title }} /pp {{ item.url }} /p/div
/template
scriptexport default{data(){return{result:[{id:1,title:河北大学成功获批国家社会科学基金重大项目,url:https://www.hbu.edu.cn/info/1167/20000.htm},{id:2,title:2024年河北省高校图书馆年会在河北大学举办,url:https://www.hbu.edu.cn/info/1167/20015.htm},{id:3,title:河北大学举办2025年研究生元旦晚会,url:https://www.hbu.edu.cn/info/1167/20023.htm}]}}}
/script
