台州建设工程网站,东莞网络推广价格,企业建网站群,积极推进在线网站建设写在前面#xff1a; 前置内容 - vue配置 文章目录 插值表达式v-html条件渲染v-show和v-ifv-ifv-if的扩展标签复用组件 v-show v-on /事件v-bind /#xff1a;属性v-modelv-for 循环元素v-slotv-prev-cloak vue指令只的是带有v-前缀的特殊标签属性 插值表达式
插值表达式{… 写在前面 前置内容 - vue配置 文章目录 插值表达式v-html条件渲染v-show和v-ifv-ifv-if的扩展标签复用组件 v-show v-on /事件v-bind /属性v-modelv-for 循环元素v-slotv-prev-cloak vue指令只的是带有v-前缀的特殊标签属性 插值表达式
插值表达式{{}}是一种vue模板语法。 利用表达式进行差值渲染到页面。 表达式可以是被求值的代码js会计算 不能用差值表达式的
不存在的数据 {{data里面不存在的字段js关键字 {{if}}标签属性 span id“{{id}}”/
v-html
设置元素的innerHTML 可以动态的进行html的渲染虽然用的会少。
条件渲染v-show和v-if
v-show和v-if都是通过后面的表达式来判断是否显示,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 v-if
渲染分组 可以用一个大的元素配上v-if来进行 如
template v-ifokh1Title/h1pP1/ppP2/p
/templatev-if的扩展标签
v-else-if以及v-else 这个应该很好理解那就是v-if走不通就看一下v-else-if条件是否满足不满足在解析else
复用组件
Vue 会尽可能高效地渲染元素通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外还有其它一些好处。例如如果你允许用户在不同的登录方式之间切换
template v-ifloginType usernamelabelUsername/labelinput placeholderEnter your username
/template
template v-elselabelEmail/labelinput placeholderEnter your email address
/template那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素 不会被替换掉——仅仅是替换了它的 placeholder。
所以 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注意 元素仍然会被高效地复用因为它们没有添加 key attribute。
v-show
和if作用一样但是show只是不显示不会移除掉这个标签。而if是会移除掉的。 所以我们在这个组件如果会多次显示和隐藏转换我们选择show如果判断之后不会出现我们选择if直接就不加载了。 show底层用style的display用的是css样式 if底层是条件判断是否创建或移除 当 v-if 与 v-for 一起使用时v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。
v-on /事件
注册事件 v-on:事件名执行事件函数也可以直接写函数名字就可以了 这个也可以省写为click 点击一下 可以发现无论我按了多少下这个flag永远是1所以这的传参是按值传参。
v-bind /属性
动态绑定标签的属性如url,titlename等 格式v-bind属性名“” 或者属性“” 修饰符 .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。 .camel - 将 kebab-case attribute 名转换为 camelCase。 .sync 语法糖会扩展成一个更新父组件绑定值的 v-on 侦听器。 但是注意在表单元素中是不能动态绑定的用下面的mode
v-bind对样式控制做了增强 :class“{类名1布尔类名2布尔}”布尔为true才会添加对象 :class[类名1类名2]数组类型都会添加
对样式的加强 :style“{css属性:css属性,css样式2:css属性值}”对象因为属性名不支持-所以我们可以选择用’‘引号括起来样式或者用驼峰。如background-color可以写成’background-color’ 或者 backgroundColor
v-model
用于表单的双向绑定双向指的是视图和数据之间的双向一方改了另一方也会改。 修饰符 .lazy - 取代 input 监听 change 事件 .number - 输入字符串转为有效的数字 .trim - 输入首尾空格过滤
v-for 循环元素
多次渲染 语法v-for“(item,index) in 数组” item是数组的每一项index是对应的索引。
如果不需要index的时候可以不写直接v-for“item in 数组”
div v-for(item, index) in items/div
div v-for(val, key) in object/div
div v-for(val, name, index) in object/div为了确保它们在每个索引位置正确渲染v-for我们一般都需要指定一个key来作为唯一值来绑定。除非遍历输出的 DOM 内容非常简单或者是刻意依赖默认行为以获取性能上的提升。 就是如果是3个元素删除第一个没有加key就是只留下前2个然后把值赋给前2如果加key就是只删除指定那个
div v-foritem in items :keyitem/div 数组更新渲染只有在原始数组改变的方法才会进行同步像
push 加入元素到最后pop 删除最后一个shift 删除元素第一个unshift 添加到第一个splice 删除/替换sort 排序reverse 反转 像filter/concat/slice不改变原始数组而是产生了新数组就不会同步。
v-slot
插槽 可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选即只需要在为插槽传入 prop 的时候使用。 限用于 / template 组件 (对于一个单独的带 prop 的默认插槽)
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak
