详解.vue文件解析的实现


Posted in Javascript onJune 11, 2018

vue单文件

vue是现今非常流行的框架之一,整体给人的感觉就是优雅,小巧,最近开始学习着使用该框架做一些项目,学习,当然是从实践开始,在浏览了一遍官方文档之后,便开始用vue-cli脚手架来快速搭建一个vue项目,从实践中快速学习。在看了一遍项目文件结构后,对于.vue结尾的单文件却是有很多不解的地方,具体碰到的问题如下:

什么是<template/>标签

template是html5的一个新元素,主要用于保存客户端中的内容,表现为浏览器解析该内容但不渲染出来,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

关于单文件组件

vue的单文件相当于一个页面中的组件,包含了关于该组件的html-css-js文件集合,这么做的目的有利于项目的管理和整合,官方说法是有构建步骤。

在<template/>标签下只能有一个子节点元素,如果写多个如<div/>这样的标签则会报错,如下所示

<template>
 <div></div>
 <div></div>
</template>

//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue文件可包含html-css-js,webpack自动打包成三个文件?

在.vue文件中,dom结构可以写在<template/>标签下,而针对该dom结构的样式文件则作为<template/>标签的兄弟元素<style/>存在,同样的控制该dom结构的脚本程序写在另一个兄弟元素<script/>之中,这样一来,每个组件自己对应的结构样式都在同一个文件之中,便不会与其它的组件搞混了。

 详解.vue文件解析的实现

官方hello.vue实例

style标签有哪些属性?分别是什么意思?

<style/>标签包含scoped和module属性,分别表示css作用域和css模块,一般会写上scoped属性,表示样式仅对当前组件以及其子组件的模板部分生效

script标签中的export default是什么意思?

可以从全文仅有的一张图中看到,<script/>标签下第一行代码是export default {……},这是ES6新增的模块部分的语法,采用模块的方式,每个文件都自成一个模块,采用export和import来暴露和引用接口。一个文件或模块中,export 和 import可以有多个,但export default只能有一个,使用该命令之后别的模块引用时就可以不需要知道所要加载的模块变量名

export default下可以写哪些东西?

可以写很多东西,包括变量和方法,对象等,只要是想作为开放的接口都可以写,在.vue文件中一般写上data() {}以及method等,data指的是在该组件中定义的模板数据,而如果你对<template/>中的元素绑定了点击方法,如<button @click="login">,则可如下所示:

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 methods: {
   login: function() {
    console.log(this.username,this.password);
   }
  }
}
</script>

刚刚接触vue不久,相信学习最好的方法便是以战养战,不懂的一步步去弄懂相信会很有意思,如果上面出现一些错误希望能有人指出来,谢谢~

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

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
JS中判断null的方法分析
Nov 21 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
Node.js中的cluster模块深入解读
Jun 11 #Javascript
详解vue-router 初始化时做了什么
Jun 11 #Javascript
node中间层实现文件上传功能
Jun 11 #Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
nodejs基础应用
2017/02/03 NodeJs
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
利用python画出AUC曲线的实例
2020/02/28 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python和php学习哪个更有发展
2020/06/17 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
法学求职信
2014/06/22 职场文书
股东授权委托书范本
2014/09/13 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
实现GO语言对数组切片去重
2022/04/20 Golang