您的位置：首页 > 其它

动态组件 is属性 keep-alive组件

2019-04-27 09:39 288 查看
  1. 动态组件
  • 动态组件就是 component组件 ， 组件身上可以绑定一个is属性， 用来表示某一个组件
  1. is属性
  • 我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option table这类型标签
  • 不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性
<div id="app">
<table>
<tr>
<td>aa</td>
<td>bb</td>
<td>cc</td>
</tr>
<!-- is = 组件名称 -->
<tr is = 'my-table'></tr>
</table>
</div>
  1. keep-alive组件
    将组件的内容存在浏览器缓存中， 当我们需要重复渲染的时候， 就从浏览器缓存中去调用，这样可以减少性能消耗
<keep-alive>
<component is = "A"></component>
</keep-alive>
  1. 不常用指令
  • v-text vs v-html
  • 都是用来将数据插入DOM中， 但是v-html可以解析标签类型数据
  • v-cloak 解决 {{}} 语法短暂原样输出
  • v-pre 原样输出
  • v-once 只渲染一次
<body>
<div id="app">
<h3> v-text </h3>
<p> {{ msg }} </p>
<p v-text = "msg"></p>
<div v-text = "title"></div>
<h3> v-html </h3>
<div v-html = "title"></div>
<div v-html = "msg"></div>
<h3> v-pre </h3>
<p v-pre>
{{ msg }}
</p>
<h3> v-cloak </h3>
<p v-cloak>
{{ msg }}
</p>
<h3> v-once </h3>
<p v-once>
{{ msg }}
</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
title: '<h3> hello title </h3>'
}
})
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航