详解.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 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
electron+vue实现div contenteditable截图功能
Jan 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中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
php中序列化与反序列化详解
2017/02/13 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
Python计算回文数的方法
2015/03/11 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
对python3新增的byte类型详解
2018/12/04 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python 两个数据库postgresql对比
2019/10/21 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
圣诞节开幕词
2015/01/29 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
python中filter,map,reduce的作用
2022/06/10 Python