• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > 简单理解vue中el、template、replace元素

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue template,vue.js template,vue中的template,vue template标签,vue x template等相关知识,希望在学习及工作中可以帮助到您

本文实例为大家解析了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>'
})
</div>

结果:

<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>

结果:

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

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

</div>

您可能想查找下面的文章:

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

相关文章

  • 2017-05-30浅析vue数据绑定
  • 2017-09-27Vue 搭建脚手架
  • 2017-08-14vuejs怎么在服务器上发布部署
  • 2017-05-30详解Vue-基本标签和自定义控件
  • 2017-09-05vue有关路由跳转,初始路由设置
  • 2017-05-30Vue.js -- 过滤器使用总结
  • 2018-11-02VUE 移动端适配:VUE-CLI 3 添加 flexible 及 px2rem
  • 2017-05-30详解Vue.js动态绑定class
  • 2017-05-30vue.js之vue-cli脚手架的搭建详解
  • 2017-05-30Vue数据驱动模拟实现3

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue form 表单提交+ajax异步请求+分页效果
    • Vue.js每天必学之指令系统与自定义指令
    • 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
    • Vue.js 2.0窥探之Virtual DOM到底是什么?
    • vue.js初学入门教程(2)
    • Vue.js双向绑定操作技巧(初级入门)
    • vue.js入门教程之基础语法小结
    • Vue-cli proxyTable 解决开发环境的跨域问题详解
    • vue.js初学入门教程(1)
    • vue.js中mint-ui框架的使用方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有