上节内容回顾
# 1 计算属性
-属性放在data配置项中,方法放在methods中
-computed:{
方法名(){}
}
-把它当属性用，缓存：只有当该计算属性使用的变量发生变化时，它才重新运算
# 2 重写过滤案例
# 3 监听属性
-当属性发生变化时，触发某个函数的执行
-watch:{
page(){
}
}
# 4 组件：有自己的html，css，js，以后相用，直接注册使用即可
-全局，局部
-var child={template:``,data(){return {}},methods:{}}
-组件中注册：components:{child}
# 5 组件间通信-组件间数据，方法都是隔离的
-父传子：自定义属性
<child :myname='lqz'></child>
-在子组件中：props:['myname']
-子传父：自定义事件
-子组件中某种情况下把子组件的数据传给父组件
<child @myevnet='handleClick'></child>
-点击事件函数内部：this.$emit('自定义事件名字',name)
-ref属性：
-放在普通标签上： this.$refs.标签上的名字 原生dom对象
-放在组件上：this.$refs.组件上的名字 组件对象 它有变量，方法
# 6 动态组件
-不确定显示的组件是什么，动态变化的
<component :is='变量'></component>
-<keep-alive></keep-alive>
# 7 插槽
-写了组件，组件内部，空一个位置 <slot></slot>
-<child > <div></div> </child>
-默认插槽
-具名插槽：挖多个坑，给每个坑命个名
<slot name="b"></slot>
<child > <div slot="b"></div> </child>
<child > <div v-slot:b></div> </child>
# 8 vue-cli
-对比djagno，创建djagno项目需要怎么做？
-装python解释器，安装模块django，django-admin创建项目
-nodejs，安装模块vue-cli
-npm install @vue/cli -g
-vue 可执行文件
-vue create项目名
-bable
-vuex
-vue-router
-编辑器选择
-jetbrains公司：Pycharm，goland，phpstorm，IDEA，webstorm
-pycharm+vue插件 开发前端
-vscode：微软出的，轻量级，免费
-eclipse my eclipse
-谷歌买了jetbrains授权， AndroidStadio
-sublime Text
-vim+插件
-vue项目运行的两种方式
-命令行中执行：npm run serve
-pycharm的绿色箭头运行
vue项目目录介绍
myfirstvue // 项目名字
node_modules // 文件夹 内部有很多依赖的模块，打包时一定要删除
public // 存放公共文件的文件夹
-favicon.ico // 网站小图标
-index.html // spa: 单页面应用
src // 以后写代码 全在这个目录下面
assets // 静态资源js、css、图片 类似于static文件夹
-logo.png // 静态资源的图片
components // 组件（小组件），用在大组件(页面组件)中
-HelloWorld.vue // 默认装有一个hello world组件
router // 装了vue-router之后自动生成的，路由文件夹
-index.js // vue-router的配置
store // 装了vuex自动生成的
-index.js // vuex的配置
views // 里面放了一堆页面组件
-AboutView.vue // 自带的关于页面(页面组件)
-HomeView.vue // 自带的首页(页面组件)
-App.vue // 根组件
-main.js // 整个项目的启动入口
.gitignore // git的忽略文件
-babel.config.js // babel的配置
-jsconfig.json //
-package.json // 重要 类似于python项目中的requements.txt 表示当前项目的依赖，node_modules文件夹删除之后就靠它来下载依赖
-package-lock.json // 锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本
-README.md // 项目介绍
-vue.config.js // vue项目下的配置文件
es6的导入导出语法
在导入之前必须要先导出
// 默认导入和导出：
1.写一个js，在js中可以定义变量、函数、最后使用export default导出
export default {
name: '彭于晏',
printName () {
console.log(this.name)
}
}
2.在想使用的js文件中，导入
import 随便起个名字 from '路径'
// 命名导入和导出
1.写一个js，在js中定义变量、函数、最后试用export导出
export const name = 'lqz'
export const printName = () => {
console.log('xxx')
}
2.在想使用的js中导入
import {printName} from './lqz/utils'
注意：在包下可以建立一个名为index.js的文件，以后导入的时候会默认找它
对比python中的__init__.py
vue项目开发规范
以后写的组件全是单页面组件(xx.vue), 分为页面组件和小组件
每一个组件内部都有三部分：
-<template></template> # html内容写在里面
-<script></script> # 写js内容
-<style></style> # 写css样式
main.js是项目的入口
1 把App.vue根组件导入了，
2 使用new Vue({render: h => h(App)}).$mount('#app') 把App.vue组件中得数据和模板，插入到了index.html的id为app的div中了
3 以后，只要在每个组件的export default {} 写之前学过的所有js的东西
4 以后，只要在每个组件的template，写模板，插值语法，指令。。
5 以后，只要在每个组件的style，写样式
vue项目集成axios
1.安装axios
-npm install axios --S
2.导入使用
import axios from 'axios'
3.朝后端发送请求
axios.get('http:127.0.0.1:8000/books/').then(res=>{
this.bookList=res.data
})
4.在django后端解决跨域问题
1 pip3 install django-cors-headers
2 app中注册：
INSTALLED_APPS = (
...
'corsheaders',
...
)
3 中间件注册
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]
4 把下面的复制到配置文件中
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
props配置项
接受父传子自定义的属性
// 普通适用
props: ['msg'],
// 属性验证
props: {msg: String},
// 指定类型，必填和默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
},
混入
mixin(混入) 可以把多个组件共用的配置提取成一个混入对象，把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用。
使用步骤：
1.写一个mixin/index.js
export const hunhe = {
data() {
return {
name: '彭于晏'
}
},
methods: {
handlePrintName() {
alert(this.name)
}
},
}
2.局部导入(在组件中)
import {hunhe} from "@/mixin";
mixins:[hunhe,]
3.全局使用(在main.js中，以后所有组件都可以用)
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)
插件
功能：用于增强vue 本质：包含install方法的一个对象。 install方法的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
使用步骤：
1. 写一个 plugins/index.js
import Vue from "vue";
import axios from "axios";
import {hunhe} from '@/mixin'
export default {
install(miVue) {
// console.log(miVue)
// 1 vue 实例上放个变量
// Vue.prototype.$name = 'lqz' // 类比python，在类上放了一个属性，所有对象都能取到
// Vue.prototype.$ajax = axios
// 2 使用插件，加入混入
// 全局使用混入
// Vue.mixin(hunhe)
// 3 定义全局组件
// 4 定义自定义指令 v-lqz
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
}
}
2. 在main.js中使用插件
import plugins from '@/plugins'
Vue.use(plugins) // 使用use，会自动触发插件对象中得install
3. 以后在组件中可以直接用插件中写的样式
scoped样式
在style上写<style scoped> </style>，以后只针对于当前组件生效
localStorage、sessionStorage和cookie
如果想在浏览器中存储数据
localStorage: 永久存储
sessionStorage: 关闭页面就没了(临时存储)
cookie: 设定一个时间，到时间就过期
# 补充：序列化和反序列化
// 对象转json字符串
// JSON.stringify(person)
// json字符串转对象
// JSON.parse()
<template>
<div id="app">
<h1>localStorage操作</h1>
<button @click="saveStorage">点我向localStorage放数据</button>
<button @click="getStorage">点我获取localStorage数据</button>
<button @click="removeStorage">点我删除localStorage放数据</button>
<h1>sessionStorage操作</h1>
<button @click="saveSessionStorage">点我向sessionStorage放数据</button>
<button @click="getSessionStorage">点我获取sessionStorage数据</button>
<button @click="removeSessionStorage">点我删除sessionStorage放数据</button>
<h1>cookie操作</h1>
<button @click="saveCookie">点我向cookie放数据</button>
<button @click="getCookie">点我获取cookie数据</button>
<button @click="removeCookie">点我删除cookie放数据</button>
</div>
</template>
<script>
import cookies from 'vue-cookies'
export default {
name: 'App',
data() {
return {}
},
methods: {
saveStorage() {
var person = {
name: '彭于晏',
age: 38
}
localStorage.setItem('userinfo', JSON.stringify(person))
},
getStorage() {
let userinfo = localStorage.getItem('userinfo')
console.log(userinfo)
console.log(typeof userinfo)
},
removeStorage() {
// localStorage.clear()
localStorage.removeItem('userinfo')
},
saveSessionStorage() {
var person = {
name: '彭于晏',
age: 38
}
sessionStorage.setItem('userinfo', JSON.stringify(person))
},
getSessionStorage() {
let userinfo = sessionStorage.getItem('userinfo')
console.log(userinfo)
console.log(typeof userinfo)
},
removeSessionStorage() {
// localStorage.clear()
sessionStorage.removeItem('userinfo')
},
saveCookie() {
cookies.set('name','lqz','7d') // 按秒计
},
getCookie() {
console.log(cookies.get('name'))
},
removeCookie() {
cookies.remove('name')
}
}
}
</script>
<style scoped>
h1 {
background-color: aqua;
}
</style>
集成elementui
安装：npm i element-ui -S
在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
1 使用elementui写登录 注册 显示所有图书
2 elementui做比较好的不布局
-----------
3 uni-app写个安卓app，打包好
-HBuilderX
-远端打包
