新网网站建设资料,网站开发报告书,制作音乐网站实验报告,做吉祥物设计看什么网站#x1f996;我是Sam9029#xff0c;一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **#x1f431;#x1f409;#x1f431;#x1f409;恭喜你#xff0c;若此文你认为写的不错#xff0c;不要吝啬你的赞扬#xff0c;求… 我是Sam9029一个前端 Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主 **恭喜你若此文你认为写的不错不要吝啬你的赞扬求收藏求评论求一个大大的赞** 文章目录 [toc]基础指令条件与循环条件-[v-if](https://v2.cn.vuejs.org/v2/api/#v-if)[用 key 管理可复用的元素](https://v2.cn.vuejs.org/v2/guide/conditional.html#用-key-管理可复用的元素)-建议直接看文档 循环-[v-for](https://v2.cn.vuejs.org/v2/api/#v-for)使用v-for时注意绑定 key循环-渲染数组循环-渲染对象 **注意 不推荐同时使用**
本来说为了这个Vue系列同时写一个可运行的vue代码项目模板的最近隔一周有怠惰了上次001都是周一周二的事今天都周日了
欸
目前看来vue代码项目模板 要往后放一放了系列才写到002
基础指令
在vue框架中提供了许多的基础指令其作用类似与在原生的html元素的身上写属性值或者绑定事件同时也做了扩展
以下是一些常用指令 v-show 作用类似与 css 属性 display 控制隐现 v-if 作用是 控制元素节点的渲染与否 v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好。 v-else 一定配合 v-if 使用 v-else-if 一定配合 v-if 使用 v-for 循环渲染元素节点 v-on 事件绑定 可缩写为 div v-on:clickhandleClick/div
div clickhandleClick/divv-bind 数据变量绑定 可缩写为 : img v-bind:srcurl/img //在data中定义url
img :srcurl/imgv-model 注意一般实在 表单元素input、select、、、身上 实现双向数据响应 input v-modelinputVal/input
// data 中定义的 inputVal 将会实时的获得 页面 input 元素中输入的值关于v-model 的用法是需要特别注意的不同的表单元素绑定时其变量类型是不一样的详情参阅文档表单输入绑定-基础用法
不常用 v-slot (写组件的时候会常常用到) v-text 更新元素的 textContent。如果要更新部分的 textContent需要使用 {{ Mustache }} 插值。 span v-textmsg/span
!-- 和下面的一样 --
span{{msg}}/spanv-html 更新元素的 innerHTML。注意内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板可以重新考虑是否通过使用组件来替代。 v-pre (感觉可用于优化) 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 说的太官方了大概使用场景就是解决页面初始渲染时 的元素闪动 v-once 只渲染元素和组件一次。随后的重新渲染元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
条件与循环
很好理解编程语言的思维来处理HTML标签
条件比如在符合条件的情况下才渲染某一个节点
循环比如需要的创建多个重复的html标签元素只是标签中的内容节点展示的值不一样时就可以使用循环
实现上诉效果的指令如下
v-ifv-elsev-else-ifv-for
条件-v-if
h1 v-ifawesomeVue is awesome!/h1 // data中定义awesome
h1 v-elseOh no /h1// awesome 为 真值 truthy 时渲染 h1Vue is awesome!/h1
// awesome 为 假值 false 时渲染 h1 v-elseOh no /h1用 key 管理可复用的元素-建议直接看文档
Vue 会尽可能高效地渲染元素通常会复用已有元素而不是从头开始渲染。这样也不总是符合实际需求所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的不要复用它们”。只需添加一个具有唯一值的 key attribute 即可
template v-ifloginType usernamelabelUsername/labelinput placeholderEnter your username keyusername-input
/template
template v-elselabelEmail/labelinput placeholderEnter your email address keyemail-input
/template循环-v-for
比如我们需要很多个 li 元素时
ul idexample-1li v-foritem in 10 :keyitem.message // 将渲染10个 li元素{{ item.message }}/li
/ul使用v-for时注意绑定 key 建议尽可能在使用 v-for 时提供 key attribute除非遍历输出的 DOM 内容非常简单或者是刻意依赖默认行为以获取性能上的提升。 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 循环-渲染数组
第二个的参数为 每个属性的值第三个参数作为索引
ul idexample-2li v-for(item, index) in items{{ parentMessage }} - {{ index }} - {{ item.message }}/li
/ulitems: [{ message: Foo },{ message: Bar }
]循环-渲染对象
第二个的参数为 每个属性的值第二个的参数为 property 名称 (也就是键名)第三个参数作为索引
ul idv-for-object classdemoli v-forvalue in object{{ value }}/li
/ulobject: {title: How to do lists in Vue,author: Jane Doe,publishedAt: 2016-04-10
}注意 不推荐同时使用
不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时v-for 具有比 v-if 更高的优先级。 我是Sam9029一个前端 文章若有错误敬请指正 **恭喜你都看到这了求收藏求评论求一个大大的赞不过分吧** 注意 不推荐同时使用**
不推荐同时在一个元素上使用 v-if 和 v-for。但是当 v-if 与 v-for 一起使用时v-for 具有比 v-if 更高的优先级。 我是Sam9029一个前端 文章若有错误敬请指正 **恭喜你都看到这了求收藏求评论求一个大大的赞不过分吧** Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主
