详解.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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
jquery.validate使用详解
Jun 02 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
laravel 数据验证规则详解
2019/10/23 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
优质的学校老师推荐信
2013/10/28 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
求职信的正确写法
2014/07/10 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
大学生个人学年总结
2015/02/15 职场文书
离婚被告代理词
2015/05/23 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB