Vue 定义组件模板的七种方式(一般用单文件组件更好)
在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):
- 字符串
- 模板字面量
- x-template
- 内联模板
- render 函数
- JSF
- 单文件组件
在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。
1. 字符串
默认情况下,模板会被定义为一个字符串。我想我们的观点会达成一致:字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这种方法没有太多用处。
Vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
2. 模板字面量
ES6 模板字面量允许你使用多行定义模板,这在常规 JavaScript 字符串中是不被允许的。此方式阅读体验更佳,并在许多现代浏览器中得到支持,不过安全起见你还是需要把代码转换成 ES5 。
这种方法并不完美,我发现大多数 IDE 仍然会通过语法高亮、tab 格式化、换行符等地方的问题折磨着你。
Vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
3. x-template
使用此方法,你的模板被定义在例如 index.html 文件中的 script 标签里。此 script 标签使用 text/x-template 标记,并由组件定义的 id 引用。
我喜欢这种方法,它允许你使用适当的 HTML 标记编写你的 HTML,不过不好的一面是,它把模板和组件定义的其它部分分离开来。
Vue.component('my-checkbox', { template: '#checkbox-template', data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
<script type="text/x-template" id="checkbox-template"> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </script>
4. 内联模板
通过在组件中添加 inline-template 属性,你可以向 Vue 指示内部内容是其模板,而不是将其视为分布式内容(参考 slot 。
它与 x-templates 具有相同的缺点,不过一个优点是,内容在 HTML 模板的正确位置,因此可以在页面加载时呈现,而不是等到 JavaScript 运行。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });
<my-checkbox inline-template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </my-checkbox>
5. render 函数
render 函数需要你将模板定义为 JavaScript 对象,这显然是最详细和抽象的模板选项。
不过,优点是你的模板更接近编译器,并允许你使用完整的 JavaScript 功能,而不是指令提供的子集。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render(createElement) { return createElement( 'div', { attrs: { 'class': 'checkbox-wrapper' }, on: { click: this.check } }, [ createElement( 'div', { 'class': { checkbox: true, checked: this.checked } } ), createElement( 'div', { attrs: { 'class': 'title' } }, [ this.title ] ) ] ); } });
6. JSX
Vue 中最有争议的模板选项是 JSX,一些开发者认为它丑陋、不直观,是对 Vue 精神的背叛。JSX 需要你先编译,因为它不能被浏览器运行。
不过,如果你需要完整的 JavaScript 语言功能,又不太适应 render 函数过于抽象的写法,那么 JSX 是一种折衷的方式。
Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render() { return <div class="checkbox-wrapper" onClick={ this.check }> <div class={{ checkbox: true, checked: this.checked }}></div> <div class="title">{ this.title }</div> </div> } });
单文件组件
只要你把构建工具设置的很舒服,单文件组件就是模板选项中的王者。它允许你写 HTML 标签定义组件,并且将所有组件定义保留在一个文件中。
尽管它也有一些劣势:需要预编译,某些 IDE 不支持 .vue 文件的语法高亮,不过其地位依然难以被撼动。
<template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </template> <script> export default { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } } </script>
你还可以通过引入 pug 之类的预处理器,来获得模板定义的更多可能性。
转载于:https://www.cnblogs.com/hanguidong/p/9381830.html
Vue 定义组件模板的七种方式(一般用单文件组件更好)相关推荐
- Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式 在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render ...
- Vue.js 定义组件模板的 7 种方式
作者简介: 李中凯 八年多工作经验 前端负责人, 擅长JavaScript/Vue. 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b58006b1b8666/po ...
- Vue系列之单文件组件
文章目录 前言 一.什么是单文件组件? 二.单文件组件的结构 三.如何引入并使用单文件组件 1. B组件中需导出(export) 2. A组件中需导入并局部注册B(import) 前言 Vue应用的一 ...
- 非单文件组件和单文件组件区别
这里写自定义目录标题 非单文件组件和单文件组件区别 非单文件组件和单文件组件区别 在学vue组件时有这么两个概念:非单文件组件和单文件组件. 现在来总结一下这两种组件区别: 非单文件组件: 一个文件里 ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- 【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件 ...
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- [译]使用Webpack提高Vue.js应用程序的4种方式
[译]使用Webpack提高Vue.js应用程序的4种方式 原文地址 Webpack是开发Vue.js单页应用程序的重要工具.通过管理复杂的构建步骤,您可以更轻松地开发工作流程,并优化应用程序的大 ...
最新文章
- 爬取--- https://www.exploit-db.com/ 下载POC较完善的代码【2】
- HDU2141(二分查找)
- Docker容器启动自动化脚本(五)
- bstr java_BSTR详解一 -BSTR简介和内部结构
- Oracle逻辑空间管理
- 云炬随笔20171202
- Java8 時間API
- linux下的crontab
- php实现金币提现,PHP实现微信提现功能
- 解决vista/win7安装windows live messenger 2011找不到wlidcli.dll及错误800488eb .
- EMC测量的常用计量单位分贝(dB)及其换算
- 35 岁财务自由的小马哥,我想跟他学学!
- 人工智能目标检测模型总结(三)——yolov1模型(2)
- 理解证券行业“行业分类
- 面试真题:经典智力题最详汇总(上)
- data: function () { return {}} ——你不应该在一个子组件内部改变 prop
- 名词解释atm网络_名词解释(通信)
- TTL转RS485电路(自动收发)---分享原理图及参考资料
- Linux内核国内下载地址
- 2021年 第十二届蓝桥杯第二期校内模拟赛题解(Java版)