详解.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 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
php实现的在线人员函数库
2008/04/09 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python同时处理多个异常的方法
2020/07/28 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
幼儿园长自我鉴定
2013/10/17 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
催款律师函范文
2015/05/27 职场文书
单位证明范文
2015/06/18 职场文书
学习雷锋主题班会
2015/08/14 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Go归并排序算法的实现方法
2022/04/06 Golang
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL