首页 > 其他分享 >vue框架4

vue框架4

时间：2023-02-19 12:55:57浏览次数：36  
标签：el vue console name 框架 res data log

购物车案例

v-model进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>lazy:等待input框的数据绑定时区焦点之后再变化</h1>
    <input type="text" v-model.lazy="myText"> {{ myText }}
    <h1>number:数字开头，只保留数字，字母不保留，字母开头都会保留</h1>
    <input type="text" v-model.number="myNumber"> {{ myNumber }}
    <h1>trim:去除首位的空格</h1>
    <input type="text" v-model.trim="myTrim"> {{ myTrim }}
</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            myText:'',
            myNumber:'',
            myTrim:'',
        },
    })
</script>
</body>
</html>

vue与后端交互

# 1.跨域问题
    - 只要向不是地址栏中的域名[地址和端口]发送请求，拿的数据，浏览器就会拦截下来，所以无法实现交互

# 2.处理跨域问题
    - 通过后端的代码处理，在响应头中加入允许即可

使用jquery跟后端交互

<!--前端代码-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="app">
    <h1>点击加载用户信息</h1>
    <button @click = "handleClick">点击我</button>
    <div v-if="age!=0">
        <p>用户名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>性别:{{gender}}</p>
    </div>
    <div v-else>
        没有用户信息
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            name:'',
            age:0,
            gender:'未知'
        },
        methods:{
            handleClick(){
               $.ajax({
                   url:'http://127.0.0.1:8000/',
                   type:'get',
                   success:data => {
                       this.name = data.name
                       this.age = data.age
                       this.gender = data.gender
                   }
               })
            }
        }
    })
</script>
</html>
# 1.使用django框架后端代码

# urls.py
from app01 import views

urlpatterns = [
    path('',views.index)
]


# views.py
from django.http import JsonResponse,HttpResponse

def index(request):
    print('执行了')
    res = JsonResponse({'name':'彭于晏','age':'19','gender':'male'})
    res.headers['Access-Control-Allow-Origin'] ='*'
    # 把这个key和value加入到响应头，就没有跨域问题了
    return res


# 2.使用flask框架后端代码
from flask import Flask, jsonify, make_response

app = Flask(__name__)

@app.route('/')
def index():
    print('执行了')
    res = make_response(jsonify({'name': '彭于晏', 'age': 19, 'gender': 'male'}))
    res.headers['Access-Control-Allow-Origin'] = '*'  # 把这个key和value加入到响应头，就没有跨域问题了
    return res

if __name__ == '__main__':
    app.run()

fetch发送ajax

# 1.fetch提供了一个JavaScript接口：用于访问和操做HTTP的一些东西，例如请求与响应。
    - fetch是一个新的发送ajax的接口
    - 用起来很方便
    - 支持promise写法【最新的异步写法】
    - 解决了原生XMLHttpRequest兼容性的问题
    - fetch不是所有浏览器都支持
    - 现在主流是使用axios[第三方]发送请求，不是f使用etch。

# 2.XMLHttpRequest： 原生js提供的
    - 比较老，不同浏览器需要做一些兼容性的处理，写起来比较麻烦
    - jQuery就是基于XMLHttpRequest做了封装

# 3.发送ajax请求代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
    <h1>点击加载用户信息</h1>
    <button @click = "handleClick">点击我</button>
    <div v-if="age!=0">
        <p>用户名:{{name}}</p>
        <p>年龄:{{age}}</p>
        <p>性别:{{gender}}</p>
    </div>
    <div v-else>
        没有用户信息
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            name:'',
            age:0,
            gender:'未知'
        },
        methods:{
            handleClick(){
                fetch('http://127.0.0.1:8000/').then(response =>response.json()).then(res => {
                    console.log(res)
                    this.name = res.name
                    this.age = res.age
                    this.gender = res.gender
                })
            }
        }
    })
</script>
</html>  
# 1.使用django框架后端代码

# urls.py
from app01 import views

urlpatterns = [
    path('',views.index)
]


# views.py
from django.http import JsonResponse,HttpResponse

def index(request):
    print('执行了')
    res = HttpResponse(JsonResponse({'name':'彭于晏','age':'19','gender':'male'}))
    res.headers['Access-Control-Allow-Origin'] ='*'
    # 把这个key和value加入到响应头，就没有跨域问题了
    return res


# 2.使用flask框架后端代码
from flask import Flask, jsonify, make_response

app = Flask(__name__)

@app.route('/')
def index():
    print('执行了')
    res = make_response(jsonify({'name': '彭于晏', 'age': 19, 'gender': 'male'}))
    res.headers['Access-Control-Allow-Origin'] = '*'  # 把这个key和value加入到响应头，就没有跨域问题了
    return res

if __name__ == '__main__':
    app.run()

axios发送ajax

# 1.以后都用它，是vue上的一个第三方模块
# 2.Axios是一个基于promise的HTTP库，还是基于XMLHttpRequest封装的

# 3.代码示例  ： 后端代码与fatch相同
<!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 class="app">
    <h1>点击加载用户信息</h1>
    <button @click="handleClick">点我</button>
    <div v-if="age!=0">
        <p>用户名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{gender}}</p>
    </div>
    <div v-else>
        无用户信息
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: '',
            age: 0,
            gender: '未知'
        },
        methods: {
            handleClick() {
                //1  axios
                axios.get('http://127.0.0.1:5000/').then(res => {
                    // res是对象，有点特殊,真正的数据(想要body体内容),在res.data中
                    console.log(res)
                    this.name = res.data.data.name
                    this.age = res.data.data.age
                    this.gender = res.data.data.gender
                })
            }
        }
    })
</script>
</html>

 

电影实例操作

# 前端代码
<!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 class="app">
    <h1>热映电影</h1>
    <button @click="handleClick">点我</button>
    <ul>
        <li v-for="item in dataList">
            <h2>名字:{{ item.name }}</h2>
            <h3>导演:{{ item.director }}</h3>
            <img src=" item.poster" alt="" height="300px" width="200px">
        </li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            dataList:[],
        },
        methods:{
            handleClick(){
               axios.get('http://127.0.0.1:8000/film/').then(res=>{
                   this.dataList=res.data.data.films
               })
            }
    }
    })
</script>
</html>
# 后端代码
# 路由
path('film/',views.film)


# views.py
import json
from django.http import JsonResponse
def film(request):
    with open('./js/film.json','r',encoding='utf-8') as f:
        res_dict = json.load(f)
        res = JsonResponse(res_dict)
        res.headers['Access-Control-Allow-Origin'] = '*'
        # 把这个key和value加入到响应头，就没有跨域问题了
        return res

 

前后端交互数据格式

# 1. 一般前后端交互都是以json格式传输的
# 2. 有些会在传输时对敏感数据加密，传到后端再去解密
# 3. 最开始使用的是XML格式，然后主要使用json格式

# 目前出现了比json，更安全，高效，节约空间的编码格式，可能会在未来大放异彩

vue生命周期

# 1. vue实例创建开始，到实例被销毁，一共经历了8个生命周期钩子函数
   - 钩子：反序列化校验 --->  钩子函数
   - 学名：OOP  ---> 面向对象编程

# 2. 8个生命周期钩子函数
beforeCreate       创建Vue实例之前调用
created               创建Vue实例成功之后调用(可以在此发送异步请求后端数据)
beforeMount        渲染DOM之前调用
mounted             渲染DOM之后调用
beforeUpdate      重新渲染之前调用（执行数据更新操作时，控制DOM重新渲染）
Updated              重新渲染完成之后调用
beforeDestory      销毁之前调用
destroyed            销毁之后调用

# 3.重点钩子
 - 1. 用的最多的，created 发送ajax请求(有的人会将ajax放到mounted中加载)
 - 2. beforeDestroy
       - 组件一创建，created中启动一个定时器
       - 组件被销毁，beforeDestroy销毁定时器


# 3.实时聊天
    - 轮询：                    定时器+ajax            http
          ---> http版本的区别
    - 长轮询：                 定时器+ajax            http
    - wedsocket协议：     服务端主动推送消息
          ---> 网址：https://zhuanlan.zhihu.com/p/371500343

vue生命周期流程图

 

 

vue钩子函数使用代码示例

<!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">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate">删除子组件</button>
    <button @click="reborn">显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
            }
        },
        beforeCreate() {
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        created() {
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeMount() {
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        mounted() {
            console.group('当前状态：mounted')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeUpdate() {
            console.group('当前状态：beforeUpdate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        updated() {
            console.group('当前状态：updated')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeDestroy() {
            console.group('当前状态：beforeDestroy')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        destroyed() {
            console.group('当前状态：destroyed')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },


    })
    let vm = new Vue({
        el: '#app',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
                this.isShow = false
            },
            reborn() {
                this.isShow = true
            }
        }
    })
</script>
</html>

vue组件

# 组件化开发的好处：重用代码
# 组件分类
    - 全局组件：在任意组件中都可以使用
    - 局部组件：只能在当前组件中使用

定义全局组件

Vue.component('child', {
    template: `
      <div>
      <button>后退</button>
      <span style="font-size: 40px">首页--{{ name }}</span>
      <button @click="handleFor">前进</button>
      <lqz1></lqz1>
      </div>`,// 里面写html内容，必须包在一个标签中
    data() {              // data必须是方法，返回对象
        return {
            name: '彭于晏',
            t: null
        }
    },
    methods: {
        handleFor() {
            this.name = 'lqz'
        }
    },
    components: {
        'lqz1': {
            template: `
              <div>
              <h1>局部组件---{{ age }}</h1>
              </div>`,
            data() {
                return {
                    age: 19
                }
            }
        },
    }
})

定义局部组件

    var foo={
        template: `
            <div>
            <h1>局部组件---{{ age }}</h1>
            </div>`,
        data() {
            return {
                age: 19
                    }
                }
            }
    var vm = new Vue({
          ...
        components: {
            foo
        }
    })

内容补充

# python
     - 不可变类型：数字，字符串，元组
     - 可变类型：列表，字典，集合
     """
     python中没有值类型和引用类型的叫法----【因为python一切皆对象，对象都是地址都是引用】
     """
     - 可变类型当参数传到函数中，在函数中修改会影响原来的
     - 不可变类型当参数传到函数中，在函数中修改不会影响原来的    
# python 函数参数传递是值传递还是引用传递？ 这个问题不应该有
# js 传入了item 对象，在函数中修改，影响了原来的
     - js 的对象是引用类型
# 跨域问题
    - 浏览器的原因，只要向不是地址栏中的【域：地址和端口】发送请求，拿的数据，浏览器就给拦截了
# 处理跨域问题
   - 后端代码处理------》只需要在响应头中加入允许即可

 

标签：el,vue,console,name,框架,res,data,log
From： https://www.cnblogs.com/juzijunjun/p/17128446.html

相关文章

  • vue这些原理你都知道吗？(面试版)
    前言在之前面试的时候我自己也经常会遇到一些vue原理的问题,我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来,欢迎大家一起学习交流,有更好的方法......
  • 社招前端经典vue面试题（附答案）
    Vuex页面刷新数据丢失怎么解决体验可以从localStorage中获取作为状态初始值：conststore=createStore({state(){return{count:localStorage.getIt......
  • 利用php爬虫querylist框架 监听CSDN 关注博主的文章，并发送邮件php爬虫Demo
    有时候挺喜欢一个人的csdn里面的文章，但是又想第一时间知道更新了什么，新鲜内容。所以做了一个极其简单的，爬ssdn网站的小工具，能实现功能即可。后面可以新增规则，监听官方网站的......
  • vueday5
    上节课回顾#0checkboxv-model只针对于input，做双向数据绑定 -单选：选中或不选中选中就是true，不选中就是false-多选：数组，选了多个，把选中的value值放到数......
  • solon框架AopContext 接口详解
    AopContext接口beanMake(Class<?>clz)使用场景：在开发插件（或在一些特殊条件下），自动扫描组件没有被扫描到，一般是因为要注册的组件没有在启动类的包下。//启动类所在包为......
  • jmeter-dubbo微信服务框架协议
    1、dubbo微信服务框架协议远程rpc服务调用，server服务+注册中心+消费者把server部署到3台机器====3server（10个方法[adduser]）------注册到注册中心zookeeper（3台机器ip......
  • 从零入门Vue.js！六步学习路线和知识体系盘点详解！
    Vue.js是一款流行的JavaScript前端框架，它允许开发者轻松地构建交互性强的用户界面。学习这个阶段的时候有一定门槛，并不是属于零基础就能入门学习的，在学习vue.js的时候可以......
  • 【IMX6ULL学习笔记】十九、Pinctrl、GPIO驱动驱动框架
    一、I.MX6ULL的pinctrl(IOMUXC)子系统1、设备树中PIN配置信息详解打开imx6ull.dtsi文件，找到一个叫做iomuxc的节点，如下所示：iomuxc:iomuxc@020e0000{compati......
  • uniapp nvue和vue 全局变量 国际化多语言开发 computed data globalData i18n undefin
    uni-app全局变量的几种实现方式1.公共模块定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue......
  • 【IMX6ULL学习笔记】十八、Platform 驱动框架
    一、platform驱动Linux提出了platform这个虚拟总线，相应的就有platform_driver和platform_device。platform驱动使用platform_driver结构体表示，此结构体定义在......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99