标签：vue 06days js --- 组件 import data 入门

案例回顾：

点击显示小电影案例
    - 按钮点击事件
    - 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项目方式：图形化界面　

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>

es6导入导出语法

以后，做了项目开发，肯定要导入某些模块使用
    -之前是使用<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代指就是导出的对象

标签：vue,06days,js,---,组件,import,data,入门
From： https://www.cnblogs.com/wzh366/p/17958729

vue入门——？？？06days

聊天室

后端

前端