ES6 默认导出(只能一次)与默认导入

默认导出:

	// 当前文件模块为 test.js
// 定义私有成员 a 和 c
let a = 10
let c = 20
// 外界访问不到变量 d ,因为它没有被暴露出去
let d = 30
function show() {} // 将本模块中的私有成员暴露出去,供其它模块使用
export default {
a,
c,
show
} 默认导入:
import test from "./test.js"

按需导出(可以多次)与按需导入

按需导出语法 export let s1 = 10
按需导入语法 import { s1 } from './test.js' export let s1 = 'aaa' export let s2 = 'ccc' export function say = function() {} //同时导入默认导出的成员以及按需导入的成员
import test,{ s1, s2, say } from "./test.js"

直接导入

直接导入并执行代码:
import "./test.js"

Vue 单文件组件

单文件组件的组成结构:

	template 组件的模板区域

	script 业务逻辑区域

	style 样式区域

<template>
<!-- 这里用于定义Vue组件的模板内容 -->
</template> <script>
// 这里用于定义Vue组件的业务逻辑
export default {
data: () { return {} }, //私有数据
methods: {} //处理函数
// ... 其它业务逻辑
}
</script> <style>
/* 这里用于定义组件的样式 */
</style>

Vue 脚手架

安装 3.x 版本的 Vue 脚手架:

	npm install -g @vue/cli

基于脚手架创建项目:
// 1. 基于 交互式命令行 的方式,创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式,创建 新版 vue 项目
vue ui
// 3. 基于 2.x 的旧模板,创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project

Vue.js(七)的更多相关文章

  1. 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  2. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  3. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  4. vue.js在windows本地下搭建环境和创建项目

    Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vu ...

  5. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  6. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  7. 用Vue.js和Webpack开发Web在线钢琴

    缘起 由于童心未泯,之前在手机上玩过钢琴模拟App,但是手机屏幕太小,始终觉得不过瘾.其实对于我这个连基本乐理都不懂的"乐盲"来说,就算给我一台真正的钢琴,我也玩不转.不过是图个新 ...

  8. vue.js 常用语法总结(一)

    作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加 ...

  9. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  10. 关于 vue.js 运行环境的搭建(mac)

    由于本人使用的是mac系统,因此在vue.js 的环境搭建上遇到许许多多的坑.感谢 showonne.yubang 技术指导,最终成功解决.下面是个人的搭建过程,权当是做个笔记吧. 由于mac非常人性 ...

随机推荐

  1. C# 创建日志

    public void Log(string message) { try { string logFileName = "c:\\log\\LogName" + DateTime ...

  2. linux的块设备层

    ll_rw_block()是块设备驱动层,向上提供按block读写块设备到某个内存地址的(是以page为目标单位)方法. bread()是块设备缓冲层,磁盘上的block用页缓存.先从这个缓存里找,找 ...

  3. Vue学习笔记-插槽基本使用

    为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...

  4. appium介绍和工作原理

    导读 Appium这个听起来既生疏也熟悉的自动化测试工具,比起原生的UiAutomator可能是异常的不起眼,可是却是有自身独当一面的能力,可以完成许多高难度作业,完成UiAutomator不可能完成 ...

  5. LDD快速参考

    第二章 快速参考 本节中出现的条目会以它们在文中出现的顺序列出: insmod modprobe rmmod 用来装载模块到正运行的内核和移除模块的用户空间工具: #include <linux ...

  6. 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 GSM Base Station Identification (点在多边形内模板)

    In the Personal Communication Service systems such as GSM (Global System for Mobile Communications), ...

  7. 早日选择一门自己喜欢的,然后瞄准目标,不达目的誓不罢休。像文章的作者一样成为一名成功的IT人士。

    hawk的奋斗历程. 来自:LinuxForum  :http://www3.linuxforum.net/ 原址:http://www.linuxforum.net/forum/gshowflat. ...

  8. [ZJOI2019]开关

    以下的方案数默认是带权方案数.设\(P=\sum_{i=1}^np_i\). 设\(F(x)\)为按\(i\)次开关后到达终止态的方案数的EGF,\(f\)为\(F\)的OGF,显然\(F(x)=\p ...

  9. BZOJ 2281: [Sdoi2011]黑白棋(dp+博弈论)

    传送门 解题思路 首先发现可以把相邻的黑白棋子之间的距离看成一堆棋子,那么这个就可以抽象成\(Nim\)游戏每次可以取\(d\)堆这个游戏,而这个游戏的\(SG\)值为\(x\%(d+1)\),那么题 ...

  10. UIStakView的添加与移除

    subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...