案例回顾：
点击显示小电影案例 - 按钮点击事件 - axios.get().then(res=>{ res.data # 响应体的内容 }) - v-for循环---》div # 2 计算属性 -必须要有返回值，返回值当做属性的值 -方法当属性用 -computed中 -它依赖的变量发生变化，它才重新运算 -普通函数只要页面刷新，就会重新运算 -首字母转大写 -1 直接在插值中写：{{name.substring(0, 1).toUpperCase() + name.substring(1)}} -2 函数方式： -3 计算属性 -重写过滤案例 -1 监听输入框的 input事件，定义了变量newData -2 把newData： -变成了属性---》v-for循环它 -它依赖的变量只要发生变化，它就会重新计算---》不需要监听input事件了 # 3 监听属性 -只要属性发生变化--》就会触发某个函数执行 # 4 生命周期 -vue组件从创建开始---》到销毁 -8个生命周期钩子 钩子函数 描述 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） updated 重新渲染完成之后调用 beforeDestroy 销毁之前调用 destroyed 销毁之后调用 -在组件中写了8个生命周期钩子 -created：data中变量有数据---》向后端发送请求---》获取到数据---》赋值给data中得变量 -定时任务和延迟任务 -setTimeout -setInterval(()=>{},3000) -clearInterval(this.t) # 清除定时任务 # 5 组件 -组件就是：扩展 HTML 元素，封装可重用的代码，目的是复用，有自己独立的html，js，css，事件，变量 -跟父组件不共享 -全局组件和局部组件 全局组件：Vue.component(名字,{}) 局部组件要写在某个组价内部：components{'组件名字':{}} # 6 组件间通信 -父传子：自定义属性 # 在父组件的html中写 <Child :name='父组件中得变量'></Child> # 在子组件中接收 props:['name'] 在子组件的html中直接使用：插值，指令 -子传父：自定事件 # 在父组件中 <Child @事件名='父组件中得方法'></Child> # 在子组件中，触发自定义事件执行 this.$emit('事件名',参数)
聊天室
后端
from .models import Chat from rest_framework.decorators import action from .serializer import ChatSerializer from rest_framework.viewsets import GenericViewSet from rest_framework.response import Response class ChatView(GenericViewSet): queryset = Chat.objects.all() serializer_class = ChatSerializer # 127.0.0.1:8000/chat/send/ ---get @action(methods=['GET'], detail=False) def send(self, request): from_user = request.query_params.get('from_user') content = request.query_params.get('content') Chat.objects.create(from_user=from_user, content=content) return Response({'code': 100, 'msg': '发送成功'},headers={'Access-Control-Allow-Origin':'*'}) # 127.0.0.1:8000/chat/--- get def list(self, request): qs = self.get_queryset() ser = self.get_serializer(instance=qs, many=True) return Response({'code': 100, 'msg': '查询成功', 'results': ser.data},headers={'Access-Control-Allow-Origin':'*'})
序列化
from rest_framework import serializers from .models import Chat class ChatSerializer(serializers.ModelSerializer): class Meta: model = Chat fields = '__all__'
模型表
class Chat(models.Model): from_user = models.CharField(max_length=32, verbose_name='发送者') content = models.CharField(max_length=256, verbose_name='发送内容') ctime = models.DateTimeField(auto_now_add=True)
路由、
from django.contrib import admin from django.urls import path from rest_framework.routers import SimpleRouter from app01.views import ChatView router=SimpleRouter() router.register('chat',ChatView,'chat') urlpatterns = [ path('admin/', admin.site.urls), ] urlpatterns+=router.urls
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="./js/axios.js"></script> </head> <body> <div id="app"> <h1>聊天室</h1> <button @click="handleShow">打开/关闭聊天室</button> <hr> <Child v-if="show"></Child> <hr> </div> </body> <script> Vue.component('Child', { template: ` <div> <h3>聊天室</h3> <p v-for="item in chatList">{{ item.from_user }}说：{{ item.content }}</p> <hr> 姓名： <input type="text" v-model="name"> <input type="text" v-model="content"> <button @click="handleSend">发送</button> </div>`, data() { return { t: null, chatList: [ ], name: '', content: '' } }, methods: { handleSend() { //发送ajax请求，到后端， axios.get(`http://127.0.0.1:8000/chat/send/?from_user=${this.name}&content=${this.content}`).then(res => { if (res.data.code == 100) { alert(this.data.msg) } else { alert(this.data.msg) } }) } }, created() { // 创建定时器 this.t = setInterval(() => { // 发送ajax请求 axios.get('http://127.0.0.1:8000/chat/').then(res => { console.log(res.data) this.chatList=res.data.results }) }, 3000) }, beforeDestroy() { clearInterval(this.t) // 销毁定时器 this.t = null } }) var vm = new Vue({ el: '#app', data: { show: true }, methods: { handleShow() { this.show = !this.show } } }) </script> </html>
今日内容：
oref属性（组件间通信）
# 1 ref属性放在普通标签上
<input type="text" v-model="name" ref="myinput">
通过 this.$refs['myinput'] 拿到的是 原生dom对象
操作dom对象：改值，换属性。。。
2 ref属性放在 组件上
<Child ref="mychild"></Child>
通过 this.$refs['mychild'] 拿到的是 组件对象
组件对象.属性
组件对象.方法
实现父子间通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="./js/axios.js"></script> </head> <body> <div id="app"> <h1>ref属性</h1> <input type="text" v-model="name" ref="myinput"> <img src="./img/3.png" alt="" ref="myimg"> <button @click="handleClick">点我执行代码</button> <div style="background-color: aquamarine"> <Child ref="mychild"></Child> </div> </div> </body> <script> Vue.component('Child', { template: ` <div> <img :src="url" alt="" height="300px" width="200px"> <button @click="handleClick('子组件传入的')">点我弹窗</button> </div>`, data() { return { url: './img/1.png' } }, methods: { handleClick(name) { alert(name) } } }) var vm = new Vue({ el: '#app', data: { name: '' }, methods: { handleClick() { console.log(this.$refs) // 1 根据ref指定的名字，取出原生dom对象 // var i = this.$refs['myinput'] // console.log(i) // i.value = "你好" // 2 改图片 // var i = this.$refs['myimg'] // i.src='./img/6.png' // 3 操作组件对象-->实现组件间通信 var i = this.$refs['mychild'] console.log(i.url) // 改图片 i.url = './img/2.png' // 执行方法 i.handleClick('lqz') } } }) </script> </html>
动态组件
小案例：点击按钮，切换组件
使用 v-if控制组件显示与否
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>点击按钮切换组件</h1> <button @click="who='home'">首页</button> <button @click="who='goods'">商品</button> <button @click="who='order'">订单</button> <Home v-if="who=='home'"></Home> <Goods v-else-if="who=='goods'"></Goods> <Order v-else></Order> </div> </body> <script> var vm = new Vue({ el: '#app', data: { who: 'home', }, components: { Home: { template: ` <div> <h3>我是首页</h3> </div> ` }, Goods: { template: ` <div> <h3 style="background-color: aquamarine">我是商品页面</h3> </div> ` }, Order: { template: ` <div> <h3 style="background-color: red">我是订单</h3> </div> ` }, } }) </script> </html>
通过动态组件控制组件显示谁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>点击按钮切换组件</h1> <button @click="who='Home'">首页</button> <button @click="who='Goods'">商品</button> <button @click="who='Order'">订单</button> <keep-alive> <component :is="who"></component> </keep-alive> </div> </body> <script> var vm = new Vue({ el: '#app', data: { who: 'Home', }, components: { Home: { template: ` <div> <h3>我是首页</h3> </div> ` }, Goods: { template: ` <div> <h3 style="background-color: aquamarine">我是商品页面</h3> </div> ` }, Order: { template: ` <div> <h3 style="background-color: red">我是订单</h3> <input type="text" v-model="search"> </div> `, data() { return { search: '' } } }, } }) </script> </html>
keep-alive的使用--组件缓存
<keep-alive>
<component :is="who"></component>
</keep-alive>
插槽
一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在的组件标签中添加内容
基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>插槽使用</h1> <div style="background-color: aquamarine"> <Home> <div> <img src="./img/1.png" alt="" width="200px" height="300px"> </div> </Home> </div> <hr> <div style="background-color: pink"> <Home> <a href="">点我看美女</a> </Home> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { who: 'Home', }, components: { Home: { template: ` <div> <h3>我是首页</h3> <slot></slot> <h3>结束了</h3> </div> ` }, } }) </script> </html>
具名插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <h1>具名插槽使用</h1> <div style="background-color: aquamarine"> <Home> <div slot="foot"> <img src="./img/1.png" alt="" width="200px" height="300px"> </div> <div slot="middle"> <a href="">点我看美女</a> </div> </Home> </div> <hr> </div> </body> <script> var vm = new Vue({ el: '#app', data: { who: 'Home', }, components: { Home: { template: ` <div> <h3>我是首页</h3> <slot name="middle"></slot> <h3>结束了</h3> <slot name="foot"></slot> </div> ` }, } }) </script> </html>
vue-dic创建项目
创建vue项目，需要借助……
- nodejs：
-javascript只能运行在浏览器中
-把谷歌浏览器的js解释环境---》使用c重写，--》能够运行在操作之上
-使用js的语法，就可以写后端了：c写了网络，文件操作，数据库操作
-js的语法，运行在操作系统上的一个解释型后端语言
-vue-cli：vue脚手架 是node的一个模块
----------------- 安装node环境
-官网下载安装包：node-v18.16.1-x64.msi 一路下一步安装
-node---》python的python命令
-npm---》python的pip命令
-下载模块，去国外，很慢
-加速下载第三方模块：（用来替换npm命令的)
npm install -g cnpm --registry=https://registry.npm.taobao.org
-安装模块使用：npm install
-现在使用 cnpm install 速度快
# 安装vue脚手架
cnpm install -g @vue/cli
安装完就会释放 vue 令 #装完django 释放了django-admin一样，用来创建项目
# 使用vue脚手架，创建vue项目
vue create 项目名
另一种创建vue项目方式：图形化界面
# 使用pycharm开发 # 运行vue项目的两种方式 -使用名：npm run dev -使用pycharm运行：绿色箭头 # 目录结构 first_vue #项目名 -node_modules # 项目有很多依赖都放在这，等同python的 .venv文件夹，可以删掉，非常多小文件，复制很慢，如果没了，执行 cnpm install 就可以在装上，装完项目可以运行 -public # 文件夹（一般不动） favicon.ico # 网站小图标 index.html # spa：单页面应用---》整个vue项目其实就这一个html页面，以后都是组件切换 -src # 开发重点，以后代码几乎都是写在这里 -assets # 放一些静态资源：图片，css，js -logo.png # 组件中使用的图片 -components # 放组件：小组件 -HelloWorld.vue # 默认提供给咱们的 -views # 放组件：页面组件 HomeView.vue # 首页 AboutView.vue#关于 -router # 装了vue-router就会有这个文件夹，后面讲 -index.js -store # 装 vuex 就会有这个文件夹，后面讲 -index.js -main.js # 整个项目的入口 -App.vue #根组件 -.gitignore # 使用了git，忽略文件 -babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法 -package.json # 放了项目的依赖 -package-lock.json # 锁定文件--》锁定依赖的版本 -README.md #介绍文件 -vue.config.js # vue配置文件 一般不动
大致看文件中的内容
index.html 单页面应用，全局只有一个html -不能禁用js，否则，vue项目执行不力 -div id是app，跟咱们之前写的一样 # HelloWorld.vue 组件化开发，开发阶段，以后再vue项目中，写组件 写 xx.vue template：在这里写 html内容 script：在这里写js style：在这里写样式 之前写组件 #组件名字就是：HelloWorld 文件名 # template：template内写的内容 # data(){} :在script中 <script> export default { data(){ return {} }, methods:{} } </script> # 之前不能写独立的css，以后都写在 style中 #总结：之前定义组件，写起来很麻烦，现在定义组件，只要创建一个 xx.vue,在固定的位置，写固定的代码即可 # main.js--》控制 index.html 使用哪个跟组件 ---App.vue -import store from './store' # 导入语法 - 在这里 new 了vue实例 new Vue({ render: h => h(App) }).$mount('#app') # package.json 里面有项目依赖
vue项目开发规范
以后做vue开发，只需要创建 组件 xx.vue # 会有三部分 ##第一部分### 写html，插值，事件绑定 <template> </template> ##第二部分### data，methods，watch，created <script> export default { } </script> ##第三部分### 写样式 <style scoped> </style>
以后，做了项目开发，肯定要导入某些模块使用 -之前是使用<script src=""></script> -以后再项目中：import App from './App.vue' 语法引入 # 默认导出和默认导入的使用 #在utils.js中 ，导出 var NAME = '彭于晏' function add(a, b) { return a + b } export default { #导出 add, NAME } # 在想用的位置导入 import lqz from './lqz/utils' # 以后使用lqz代指就是导出的对象