1.VUE组件插槽:
<!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><div id="app"><child-a><!-- 具名插槽 --><button slot="gy">我是底部bottom按钮</button><h1>我是标题内容</h1><child-a/></div><template id="childa"><div><!-- 匿名插槽 --><slot></slot><h1>我是默认中间内容</h1><slot name="gy"></slot></div></template><script src="./vue.js"></script><script>new Vue({el:"#app",/* 注册组件的命名是首字母大写 使用组件的时候中间要使用-分割 */components:{ChildA:{template:"#childa"}}})/* 有一个模态框组件child 需要显示的是标题内容和底部的bottom *//* 默认只有中间的内容 需要使用child的时候 插入标题和底部bottom */</script></body></html>
2.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);</script></body></html>
JS文件:
/* 默认导出一个对象 */export default{name:"youyuxi"}
3.脚手架安装:
1. npm i -g @vue/cli
2.vue -V(检查版本号)
3.vue create 名称
4.cd 名称(进入该项目目录)
5.npm run serve(启动)