vue中插值表达式和14个vue指令详解 |
您所在的位置：网站首页 › vue的v-model三元运算 › vue中插值表达式和14个vue指令详解 |
|
在学习vue时，插值表达式和vue指令可谓是基础中的基础，这篇文章，就让你彻底了解怎么使用插值表达式和vue中所有指令的用法。 一、插值表达式：{{ }} 可以将vue中的数据填写在插值表达式中 {{ title }} const vm = new Vue({ el:"#app", data:{ title:"the first vue" } }) 也可以直接填写数值、数组、对象等。 {{ 123 }} 可以填写表达式，但是不能写流程语句。 {{ 100*2 }} {{ 1 + 1 === 2 ? "是的" : "不是" }} 注意：尽量中间加上空格，否则遇到一个对象的时候，会报错。也不能使用未声明的变量。 {{{a:1}}} //Error compiling template 二、vue中的指令 1、v-pre v-pre：不使用vue语法进行渲染，跳过元素和他的子元素的编译过成。 {{ title }} // {{ title }} 2、v-cloak v-cloak：当元素在编译时存在，当元素编译完成后，该指令消失。通常解决首屏闪烁。 [v-cloak] { display: none; } {{ title }} 3、v-once v-once：只渲染一次，之后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值，不再使用vm中的值，数据也就不再变化。 {{ title }} 4、v-htmlv-html：相当于 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译 。 注意：小心XXS攻击，在可信内容上使用v-html，拒绝用户交互下使用该指令 // the first vue {{ name }} const vm = new Vue({ el:"#app", data:{ title:"the first vue {{ name }}", name:"lkx" } }) 5、v-text v-text：相当于 textContent 。注意：v-text会替换元素中所有的文本，插值表达式只替换自己，不会清空元素。优先级比插值表达式高。 {{ title }}补充： dom.innerText和dom.textContent 设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉。innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。textContent 会获取所有元素的内容，包括 和 元素，但innerText不会 6、v-if 7、v-else-if 8、v-elsev-if：控制元素的显示和隐藏，通过对元素的添加和删除。可以作用在template上。 v-else-if：控制元素显示和隐藏。前一个兄弟元素必须有v-if v-else：前一个兄弟元素必须有v-if或v-else-if A B C Not A、B、C 9、v-show v-show：控制标签的显示和隐藏，通过操作display:none|block属性控制显示和隐藏，v-show对template标签不起作用，显而易见是因为template标签，没有任何意义，也不会渲染到页面中，只是为了方便填写指令出现的。 {{ title }} 注意：v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。v-show则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。v-if有更高的切换开销，v-show有更高的初始渲染开销，如果需要频繁切换，v-show比较好，如果改变少，则v-if更好。 10、v-bind v-bind：动态绑定一个或多个特性值，或用:缩写。:后面的时参数，例如：v-bind:src="imgSrc"，src就是参数 el:"#app", data:{ size: 30 } }) const vm = new Vue({ el:"#app", data:{ styleObject: { fontSize: '13px' } } }) 数组语法：可以将多个样式对象应用到同一个元素注意： 自动添加前缀。在绑定style时，使用需要添加浏览器引擎前缀的CSS属性时，Vue.js会自动侦测并添加相应的前缀。 CSS属性名可以用驼峰式或者短横线分隔来命名。但是使用短横线分隔时，要用引号括起来 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |