vue之创建项目、定义并使用组件、elementui的使用、与后端交互
目录
昨日回顾
# 1 计算属性
-computed--->把方法变成属性---》延缓计算
-在页面中直接使用函数，页面只要刷新，函数就会重新运行，使用计算属性--》只有当前函数使用的变量发生变化时，才重新运算
# 2 监听属性
-watch:属性----》只要这个变量发生变化，就会执行方法
# 3 组件化开发
-局部组件:写在组件内部：Vue.components
-全局组件：Vue.component()
-组件有自己的html，css，js，相互不影响
-template 一定要放在一个标签中
-data必须是函数data(){retrun {} }
-各级组件的data数据是不共享的
# 4 组件间通信
-通过自定义属性：父传子---》自定义的属性写在自定义的组件上---》props:['自定义属性名']
-通过自定义事件：子传父---》子中调用this.$emit('自定义事件名',参数，参数)--》触发写在定义组件上的 @自定义事件名='函数'---》函数执行(父组件)
-ref属性：
放在普通标签---》通过this.$refs.属性值---》原生dom
放在组件上---》通过this.$refs.属性值---》当前组价对象---》拿到组件中的值，执行组件中的方法
# 5 动态组件
-多个组件切换，通过动态组件的is来决定显示哪个组件
-keep-alive：组件切换的时候不销毁
# 6 插槽
-<组件>写内容</组件>---》如果定义了插槽---》替换到插槽中
-具名插槽---》给插槽名名字---》使用的时候，指定替换哪个插槽的内容
今日内容
1 vue-cli创建项目
# 单文件组件-->一个文件,以 xx.vue 命名，就是一个组件
# vue-cli创建项目，webpack构建---》nodejs环境
-nodejs是一门后端语言--》javascript解释型语言，只能运行在解释器中---》浏览器中集成了js的解释器---》javascript只能运行在浏览器中---》谷歌浏览器的v8引擎---》运行在操作系统之上---》os，网络通信的模块，文件处理---》nodejs的解释器
-http://nodejs.cn/---》一路下一步---》cmd命令窗口下---》node命令(python)，npm命令(pip)
-以往版本：https://nodejs.org/zh-cn/download/releases/
# 在nodejs的环境上装vue-cli：vue脚手架
-npm install -g cnpm --registry=https://registry.npm.taobao.org
-以后使用cnpm替换掉npm即可：下载速度快
-cnpm install -g @vue/cli # 速度慢，淘宝写了工具 cnpm，完全替换npm的功能，使用cnpm回去淘宝镜像站下载，速度快
# 创建项目---》git上拉取
-方式一：命令行方式
-vue create myfirstvue
-方式二：图形化界面
-vue ui # 会启动一个服务，用浏览器访问创建vue项目
# GUI ：图形化界面， GUI编程---》图形化界面编程
# C#做win平台的图形化界面
# python写图形化界面：Tkinter
# pyqt: qt是个平台，可以使用c语言，使用python在平台写代码---》做图形化界面
2 vue项目目录介绍运行项目
# 运行项目方式一
在项目路径下:npm run serve
# 使用pycharm运行
-点击绿色箭头运行
# 目录介绍
-myfirstvue # 项目名字
-node_modules # 放着当前项目所有的依赖，可以删除，删除项目运行不了了,npm install 把该项目的依赖再装上，把项目发给别人，提交到git上，文件夹要删掉
-public # 文件夹
-favicon.icon # 小图标
-index.html # 单页面开发，整个项目就这一个页面，以后不要动
-src # 以后咱们都是在这里面写东西
-assets # 放静态资源，图片，js，css
-components # 组件，xx.vue组件，小组件，给页面组件用
-HelloWorld # 提供的默认组件，示例
-router # vue-router就会有这个文件夹
-index.js # vue-router的js代码
-store # vuex 就会有这个文件夹
-index.js # vuex 的js代码
-views # 组件，页面组件
-About
-Home # 默认提供了示例组件
-App.vue # 根组件
-main.js # 项目的入口于
-.gitignore # git的忽略文件
-babel.config.js # babel配置
-package.json # 项目的所有依赖，类似于 requirements.txt,不要删，npm install根据这个文件下载第三方模块
-vue.config.js # vue的配置
3 es6语法之导入导出
# js 模块化开发--》模块，包的概念
# 写了一个包，在其他js中导入使用
# 导入
# import 起个名字 from '路径'
# import Vue from 'vue' # 起了个名字叫Vue，vue在node_modules中了，直接写名字即可
// 演示代码--》导入使用--》拿到的就是导出的对象
import settings from '../assets/js/settings'
console.log(settings.name)
console.log(settings.printName())
# 导出
# export default 对象
let name = 'lqz'
function printName() {
console.log(name)
}
// 把对象导出
export default {name:name,printName:printName}
# 包的导出---》文件夹下新建index.js
# 包导入的时候，导到文件夹这一层即可
import lqz from '../lqz'
console.log(lqz.name)
4 定义并使用组件
# 新建一个 xx.vue,内部包含三块
-<template></template> # 写原来模板字符串`` html内容
-<script>
export default {
data(){retrun {
name:'lqz'
}},
methods:{},
}
</script>
-<style scoped> # scoped 样式只在当前组件中生效
</style>
# 自定义组件
<template>
<div>
<h1>{{name}}</h1>
<button @click="handleC">点我看美女</button>
</div>
</template>
<script>
export default {
name: "Lqz",
data(){
return {
name:"lqz is nb"
}
},
methods:{
handleC(){
alert('美女')
}
}
}
</script>
<style scoped>
h1 {
background: pink;
font-size: 60px;
text-align: center;
}
</style>
5 集成bootstrap，jQuery，elementui
# bootstrap---》ui---》后期一般不用bootstap
-第一步：下载
-cnpm install bootstrap@3 -S # -S表示把当前模块加入到package.json文件中
-cnpm install jquery
-第二步在main.js中配置
// bootstrap的配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
-第三步:vue.config.js中
const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack"); # 这句要加
module.exports = defineConfig({
transpileDependencies: true,
# 从这里开始复制
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
},
# 到这里结束
})
5.2 elementui
# 专门给vue的ui库--》写ui尽量用它
第一步：下载
cnpm install element-ui -S
第二步：main.js 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
6 与后端交互
第一步：安装
cnpm install axios -S
第二步：main.js 配置
import axios from 'axios'
Vue.prototype.$axios = axios;
第三步：使用
# 在任意组件中
# this.$axios 就是axios对象
this.$axios.get().then(res=>{})
第四步：如果没有第二步的配置
# 在任意组件中
import axios from 'axios'
axios.get('').then(res=>{})
# 后端起个flask项目，django(解决跨域)
# 写个电影的显示---》elemenui的样式做好看一些
