1.ES6多种导入导出方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 本地使用es6导入script必须添加上type="module"
必须使用live server 启动一个域名端口打开 -->
<script src="./vue.js"></script>
<script type="module">
/* 导入一个对象 */
import obj from './1.js'
console.log(obj);
/* 命名式导入必须要使用{}里面变量名字必须要保持一致 */
import{a,obj,fn} from './2.js'
console.log(a);
console.log(obj);
fn();
import{a,arr,fn} from './1.1.js'
console.log(a);
console.log(arr);
fn()
fn1()
/* export 和export default 区别
export可以导出多个变量 导出的变量必须要导入的保持一致还需要加上{}
export default只能导出一个对象 不需要加上{} 导入的名字可以自定义*/
/* 用两种方式导入导出分别导出一个数字 数组对象 和箭头函数表示的方法 */
/* 在导入的时候修改名字 */
import{fn as handler} from './1.1.js'
handler()
/* 使用 * as 变量名 导入多个变量 */
import * as all from './3.js'
/* all是一个模块化对象 */
console.log(all.str);
console.log(all.obj);
all.fn();
/* 在导出的时候修改变量 str='我爱紫金山' 修改为 str2 并在页面显示出来
在导入的时候修改变量 fn 修改为 fn2 并在页面上执行方法 打印出str的内容
导出多个变量 使用 *as 的方法把所有变量的值打印在页面上*/
import{fn as fn2} from './4.js'
fn2()
import * as all from './4.js'
/* 导入同一个js多次只会执行一遍 */
console.log(all.str);
all.fn()
</script>
</body>
</html>
2.脚手架父子孙子之间传值：
父文件：
<template>
<!-- vue2 所有vue文件都需要一个div包裹 -->
<div id="app">
<!-- 在assets里面的文件 在img中是可以正常使用的 -->
<!-- <img src="./assets/下载.jpg" alt=""> -->
<!-- 使用style的方式使用background 是不能解析里面的路径的 -->
<!-- 解决方式1 把图片放根目录public下 使用 /表示pulic根目录 -->
<!-- <div class="bg" style="background:url(/imgs/下载.jpg) no-repeat"> -->
<!-- 使用require 方法把原来不解析的路径 手动解析一遍 -->
<div class="bg" :style="{background:'url('+require('./assets/下载.jpg')+') no-repeat'}">
</div>
<!-- 使用div 使用style方式 引入一张背景图片两种方式实现 -->
<div :style="{background:'url('+require('./assets/下载.jpg')+') no-repeat'}"></div>
<div style="background:url(/imgs/下载.jpg) no-repeat">
<h1>kw47 冲冲冲</h1>
<h1 @click="changeStr">下面是我的组件</h1>
<ChildA :msg="msg" @handler="handler" />
<!-- 图片打包后的路径和开发写的路径不一样
因为打包后的图片路径是经过打包工具处理的 -->
<!-- <img alt="Vue logo" src="./assets/下载.jpg">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- 在你的app.vue文件下写一句话并下载一张图片应用到页面上，注意观察图片的路径是否和app.vue文件上写的一致 -->
</div>
</template>
<script>
/* 默认导入了一个HelloWorld组件 */
/* import HelloWorld from './components/HelloWorld.vue' */
/* 第一步导入组件 */
/* import ChildA from './components/childA.vue' */
/* @就代表src文件夹 */
import ChildA from '@/components/childA.vue'
export default {
name: 'App',
/* 第二部注册组件 */
/* 在components注册了一下 */
components: {
/* HelloWorld */
ChildA
},
/* 爷爷级通过provide把data中的属性给到sunMsg */
/* provide 里面的数据是可以向下传递给子级使用包括(儿子级孙子级) */
provide:{
/* 传固定值可以用此方式 */
/* sunMsg:'大别墅',
sssMsg:'富强 民主 和谐 自由 平等 公正' */
},
/* 传动态的值需要用函数方式 */
provide:function(){
return{
/* 如果爷爷是后台是返回的动态数据要使用箭头函数的方式定义 */
/* sunMsg是一个函数 在使用的时候需要调用 */
sunMsg:()=>this.yeye,
mm:"好好学习VUE"
}
},
/* 父组件使用this.$children必须再mounted子组件加载完毕的时候,不能再created钩子函数的时候
执行因为子组件还没有加载完毕 */
mounted(){
/* 使用this.$children也可以获取子组件的属性和方法 */
/* 子组件的方法可以通过点击事件来调用不能再生命周期函数里面执行,因为当你执行
的时候子组件还没加载出来 */
/* this.$children 是一个数组 */
console.log(this.$children[0].childStr);
this.$children[0].childStr()
},
data:function(){
return{
msg:'我是父组件App派来的',
str:'我是父组件没传的属性',
yeye:'大别墅'
}
},
methods: {
handler:function(){
this.msg = '子改父'
},
changeStr:function(){
this.str = '123'
}
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
img{
width: 200px;
height: 200px;
}
/* 这种方式也可以 */
.bg{
background: url(./);
}
</style>
子文件：
<template>
<div>
<!-- <h1 @click="change">{{msg}}</h1>
<h1>{{$parent.str}}</h1> -->
<!-- <h1>{{childStr}}</h1> -->
</div>
</template>
<script>
/* 忽略eslint语法规范 */
/* eslint-disable */
import SunZi from '@/components/SunZi.vue'
export default {
name:'childB',
components:{
SunZi
},
/* 儿子级也可以使用父级传过来的sunMsg数据 */
inject:['sunMsg'],
props:['msg'],
created(){
/* 使用this.$parent可以获取父组件没传的属性和方法 */
/* 使用this.$parent可以在子组件调用父组件方法 */
this.$parent.changeStr()
console.log(this.$parent.str);
},
data:function(){
return {
childStr:'childStr'
}
},
methods:{
change:function(){
this.$emit('handler')
},
changeStr:function(){
this.childStr='parentStr'
}
}
}
</script>
<style>
</style>
孙子文件：
<template>
<div>
<h1>我是孙子组件</h1>
<h1>{{sunMsg}}</h1>
<h1>{{mm}}</h1>
</div>
</template>
<script>
export default {
name:"SunZi",
/* 孙子级可以使用inject获取爷爷传来的数据 */
inject:['sssMsg','mm'],
}
</script>
<style>
</style>
3.显示背景三种方法：
<div id="app">
<!-- 在assets里面的文件 在img中是可以正常使用的 -->
<!-- <img src="./assets/下载.jpg" alt=""> -->
<!-- 使用style的方式使用background 是不能解析里面的路径的 -->
<!-- 解决方式1 把图片放根目录public下 使用 /表示pulic根目录 -->
<!-- <div class="bg" style="background:url(/imgs/下载.jpg) no-repeat"> -->
<!--解决方法2 使用require 方法把原来不解析的路径 手动解析一遍 -->
<div class="bg" :style="{background:'url('+require('./assets/下载.jpg')+') no-repeat'}">
</div>
/* 解决方法3 直接在style里面设置 */
.bg{
background: url(./);
}
附件：
左侧脚手架文件列表：
