昨日回顾
# 1 计算属性
computed：写函数，函数名就可以当变量使用
以后页面再刷新，只有该函数内部使用值变化，函数才重新运算
# 组件
-局部和全局
-以后每一个组件就是一个 xx.vue
-自己的html，css，js
# 组件间通信
-自定义属性：父传子
props
-自定义事件：子传父
this.$emit(事件名,参数)
-ref属性：
-普通标签
-放在组件上
this.$refs.名字 # 组件对象
# 动态组件
动态保存
<keep-alive>
<component :is="who"></component>
</keep-alive>
今日内容
1 插槽
# 在定义组件是，预留一个地方使用标签 <slot></slot> 占位，写在template里面
# 以后在父组件中的子组件的标签内部写 内容，html内容 就会被替换到<slot></slot>中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!-- 正常‘我是迪迦’不会显示-->
<child>我是迪迦</child>
<ccc>我是局部迪迦</ccc>
</div>
</body>
<script>
Vue.component('child', {
// 加了这个相当于占位，
template: `
<div>
<button>点我</button>
<slot></slot>
<button>别点我</button>
</div>
`,
data() {
return {}
}
})
var vm = new Vue({
el: '.app',
data: {},
components: {
'ccc': {
template: `
<div>
<button>局部点我</button>
<slot></slot>
<button>局部别点我</button>
</div>
`,
}
}
})
</script>
</html>
2 vue-cli创建vue项目
# 创建vue项目，需要使用vue-cli ，vue脚手架：程序项目的骨架，只需要在固定位置写代码即可
# vue-cli需要基于nodejs，安装
# python node
python 解释器 pip安装模块 node命令（解释器） npm安装第三方模块
# node是一个后端语言：解释型---》解释器
# 浏览器中有js的解释器
# Chrome V8 引擎 + 底层库(c:网络操作，文件操作，数据库操作。。。)
######## vue-cli环境搭建
# node下载地址，一路下一步
https://nodejs.org/zh-cn/download/
# 安装完成，会自动加入环境变量，释放两个可执行文件 node npm
npm命令安装模块，可能会很慢，就想pip install 很慢（国外），pip换源
npm换源：阿里写了一个npm命令替换的命令 cnpm
# 安装vue-cli
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架：以后使用cnpm替换npm即可
cnpm install -g @vue/cli
- 清空缓存处理（安装失败时候执行）
npm cache clean --force
# 使用vue-cli创建vue项目
-方式一:命令行
-vue create myfirstvue
-看下图
-方式二：图形化界面
-vue ui # 启动了一个服务，使用浏览器就能范围这个服务，在浏览器中创建项目
3.使用vue-cli创建vue项目
3.1方式一:命令行方式
3.1.1创建项目
3.1.2 选择版本
3.1.3选择属性
3.1.4用哪个版本选哪个
3.1.5第三方依赖
3.1.6 之前记录是否保存
3.1.7 保存成什么东西
3.1.8看到如下即为成功
3.2方式二：图形化界面
vue ui #启动一个服务 在浏览器就可以创建项目 和命令行基本一样
4 vue项目目录结构
# 使用编辑器打开----》pycharm
# 使用vue-cli创建的项目其实是从远程（git）拉下一个空项目
# 目录结构
myfirstvue # 项目名字
node_modules # 该项目的依赖包，类似于python venv文件夹，可以删掉（再安装），把项目给别人时，这个要删掉，小文件太多，copy特别慢，
public # 文件夹，不要改
-favicon.ico # 小图标，网站图片
-index.html # 以后不会动，单页面开发的html页面
src # 以后写代码的地方#####（重要）
-assets # 静态资源，图片，js，css，都放在这
-components # 组件，以后写的非页面组件，放在这
-HelloWorld.vue # 官方提供的一个组件
router # 第三方模块路由，就会创建出一个文件夹，index.js
-index.js
store # 第三方模块vuex ，就会有
-index.js
views # 页面组件
-About.vue # 页面组件
-Home.vue
App.vue # 根组件，基本不动
main.js # 整个项目的入口
.gitignore # 忽略：git的忽略文件
babel.config.js # 高版本语法转换
package.json # 存放使用的第三方模块的文件，不要删除
package-lock.json
README.md # 关于项目的介绍文档
5 vue项目的启动与停止
# 方式一，在项目路径下 cmd下启动 使用node起了一个web服务，监听8080端口，开发阶段这么用
-npm run serve
-访问：http://192.168.12.34:8080/
-ctrl+c 停止
# 方式二：使用编辑器
配置npm
配置npm后，点击绿色箭头启动
6 es6之导入导出语法
# 以后再写组件，如何写
- 创建一个 xx.vue
-创建完有三部分
-<template>写原来用反引号引起来的 html</template>
-<script>写js的代码</script>
export default {
name: "Login",
data(){
return {}
},
methods:{}
}
-<style>写css的类</style>
# 导入导出语法
-导出语法
一个key 一个value
export default {'showName': showName, 'name': name}
-导入：
import 起一个名字 from '../zhang' // zhang代指的就是导出的对象，以后使用zhang. 调用即可
-文件夹下如果有index.js 导入的时候，就不需要写 index.js,导到包这一层就可以了
# 页面组件中使用子组件
-编写一个xx.vue ,写好html，css，js
-在要使用的地方，导入，注册 局部组件
import Header from "../components/Header";
components:{
Header
}
-在templates标签中之间根据名字使用即可
7 vue项目中axios的使用
# 步骤
-安装 cnpm install -S axios
-在组件中导入
import ajax from 'axios'
-使用
created() {
//因为起名字叫做ajax了 所以使用ajax
ajax.get('http://127.0.0.1:5000/').then(res => {
console.log(res.data)
})
},
8 vue项目中elementui的使用
# 步骤
-安装 npm i element-ui -S
-配置main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
-在组件中使用
复制好看的代码过来即可
