详解.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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
javascript 原型继承介绍
Aug 30 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
javascript截取字符串小结
Apr 28 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python插入数据到列表的方法
2015/04/30 Python
python实现自动更换ip的方法
2015/05/05 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
django如何实现视图重定向
2019/07/24 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
金融事务专业毕业生求职信
2014/02/23 职场文书
端午节活动总结报告
2015/02/11 职场文书
小孩不笨观后感
2015/06/03 职场文书
二十年同学聚会感言
2015/07/30 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
Python基础之函数嵌套知识总结
2021/05/23 Python
Redis 常见使用场景
2021/08/30 Redis