简单理解vue中el、template、replace元素


Posted in Javascript onOctober 27, 2016

本文实例为大家解析了vue中el、template、replace的元素,供大家参考,具体内容如下

api: http://cn.vuejs.org/api/#el

el

类型: String | HTMLElement | Function

限制: 在组件定义中只能是函数。

详细:

为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。注意元素只用作挂载点。如果提供了模板则元素被替换,除非 replace 为 false。元素可以用 vm.$el 访问。

用在 Vue.extend 中必须是函数值,这样所有实例不会共享元素。

如果在初始化时指定了这个选项,实例将立即进入编译过程。否则,需要调用 vm.$mount(),手动开始编译。

template

类型: String

详细:

实例模板。模板默认替换挂载元素。如果 replace 选项为 false,模板将插入挂载元素内。两种情况下,挂载元素的内容都将被忽略,除非模板有内容分发 slot。

如果值以 # 开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。

注意在一些情况下,例如如模板包含多个顶级元素,或只包含普通文本,实例将变成一个片断实例,管理多个节点而不是一个节点。片断实例的挂载元素上的非流程控制指令被忽略。

replace

类型: Boolean

默认值: true

限制: 只能与 template 选项一起用

详细:

决定是否用模板替换挂载元素。如果设为 true(这是默认值),模板将覆盖挂载元素,并合并挂载元素和模板根节点的 attributes。如果设为 false 模板将覆盖挂载元素的内容,不会替换挂载元素自身。

示例:

<div id="replace" class="foo"></div>

new Vue({
 el: '#replace',
 template: '<p class="bar">replaced</p>'
})

结果:

<p class="foo bar" id="replace">replaced</p>

replace 设为 false:

<div id="insert" class="foo"></div>

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">inserted</p>'
})

结果:

<div id="insert" class="foo">
 <p class="bar">inserted</p>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
深入理解JavaScript定时机制
Oct 27 #Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 #Javascript
js实现加载更多功能实例
Oct 27 #Javascript
Vue.js一个文件对应一个组件实践
Oct 27 #Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 #Javascript
node.js文件上传处理示例
Oct 27 #Javascript
Vue.js表单控件实践
Oct 27 #Javascript
You might like
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
BOM与DOM的区别分析
2010/10/26 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python类中super() 的使用解析
2019/12/19 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
Linux常见面试题
2013/03/18 面试题
房产代理公证处委托书
2014/04/04 职场文书
《雪儿》教学反思
2014/04/17 职场文书
灰雀教学反思
2014/04/28 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
新人入职感言
2015/07/31 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL