详解.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 相关文章推荐
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JavaScript闭包原理与用法学习笔记
May 29 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
js闭包的9个使用场景
Dec 29 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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
用PHP读注册表
2006/10/09 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
angular2使用简单介绍
2016/03/01 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS实现图片手风琴效果
2020/04/17 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python中的__init__作用是什么
2020/06/09 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
机关门卫岗位职责
2013/12/30 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers