vue入门基础2

最新推荐文章于 2022-11-23 08:17:38 发布
最新推荐文章于 2022-11-23 08:17:38 发布
阅读量257 收藏 3
点赞数 10
分类专栏： VUE 文章标签： fetch axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiningyn/article/details/99966640
版权

vue入门基础2

1. 生命周期之钩子函数

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同。这段话以及下方图解转自vue官网，可点击查看详情。

生命周期演示图
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。生命周期演示图
钩子函数案例（可帮助小白快速理解生命周期的过程，用现实生活解释）

    <div id="app">
        {{ count }}
        <button @click='count += 1'>点击</button>
        <button @click="destroyFn">销毁</button>
    </div>

    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        computed: {

        },
        watch: {

        },
        methods: {
            destroyFn() {
                this.$destroy()
            }
        },
        beforeCreate() { console.log('准备怀孕了') },
        created() { console.log('已经怀上了') },
        beforeMount() { console.log('马上生了') },
        mounted() { console.log('已经生下来了') },
        beforeUpdate() { console.log('改变前') },
        updated() { console.log('改变后') },
        beforeDestroy() { console.log('临死前') },
        destroyed() { console.log('game over') }
    })

作为小白来说，在阅读完官方文档后，也许还是不能理解生命周期，不过通过上述案例，大致了解生命周期流程的大致意思也是不错的。我们目前无法掌握全部，那么通过下面的案例，来认识一些重要部分的作用。

    <div id="app">
        {{ count }}
        <button @click='count += 1'>点击</button>
        <button @click="destroyFn">销毁</button>
    </div>

  new Vue({
    el: '#app',
    data: { count: 0 },
    computed: {},
    watch: {},
    methods: {
      destroyFn () {
        this.$destroy()
      }
    },
    // 数据请求  ---  给孩子起名字 / 教育（胎教、早教）
    created () {}, // 数据请求
    mounted () {}, // 数据请求 + 操作DOM(孩子的衣服生下来之后才能穿)
    updated () {}, // 操作DOM（不能一辈子穿一套衣服呀）
    destroyed () {} // 不可以操纵DOM
  })

2. vue中的数据请求

ajax — 数据请求 — 前后端分离（前后端耦合、不分离开发— 传统的系统架构）— 跨域
js 原生
XMLHttpRequest / ActiveXObject
jQuery $.ajax() / $.get() / $.post() / $.load() / $.getScript()
vue/react fetch / axios — 基于es6的promise

2.1 fetch

案例—fetch的mounted请求
html部分

    <div id="app">
    </div>

js部分

    new Vue({
        el:'#app',
        mounted(){
            fetch('https://www.daxunxun.com/banner')
            .then(res=>res.json())
            .then(data=>{
                console.log(data)
            })
        }
    })

fetch有两种请求，默认是get（可以省略），两种写法不同
js部分

//get方法
    new Vue({
        el:'#app',
        mounted(){
       	 //数据拼接在地址后方
            fetch('https://www.daxunxun.com/douban?start=40',{
                method:'get'
            }).then(res => res.json()).then(data =>{ console.log(data)})
        }
    })

//post方法
    new Vue({
        el:'#app',
        mounted(){
            // 注意有些接口不允许用post,且post有两种写法
            fetch('https://www.daxunxun.com/users/login',{
                method:'post',
                // body:JSON.stringify({
                //     username:'18813007814',
                //     password:'123456'
                // })
                body:'username=18813007814&password=123456'
            }).then(res => res.json()).then(data =>{ console.log(data)})
            //返回来一个-1，证明密码错误
        }
    })

2.2 axios

axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios的数据请求写法与fetch相比更加简单。使用前需要先下载相关文件并且引入。

js部分

    new Vue({
        el:'#app',
        mounted(){
            //更加方便，建议使用axios
            //get方法
            axios.get('https://www.daxunxun.com/banner').
            then(res => {console.log(res.data)}),
            //post方法
            axios.post('https://www.daxunxun.com/users/login',{
                username:'18813887814',
                password:'123456'
            }).then(res => {console.log(res.data)})
        }
    })

3. vue之组件初级部分

组件的应用大致可以分为三步：
1.先定义一个组件
2.注册一个组件
3.使用组件

3.1 全局组件

html部分

     <div id="app">
        <!-- 3.使用组件 -->
        <my-header></my-header>
    </div>

js部分

    //全局注册组件
    //1.定义组件
    const MyHeader={
        template:`<header>头部</header>`
    }
    //2.全局注册组件
    Vue.component('my-header',MyHeader)
    new Vue({
        el:'app'
    })

3.2 局部组件

html部分

     <div id="app">
        <!-- 3.使用组件 -->
        <my-header></my-header>
    </div>

js部分

    //1.定义组件
    const MyHeader={
        template:`<header>这是头部</header>`
    }

    new Vue({
        el:'#app',
        //2.局部注册组件
        compnents:{
            'my-header':MyHeader
        }
    })

3.3 多组件

html部分

     <div id="app">
        <!-- 3.使用组件 -->
        <my-header></my-header>
        <my-content></my-content>
        <my-footer></my-footer>
    </div>

js部分

    //1.定义组件
    const MyHeader={
        template:`<header>这是头部</header>`
    }
    const MyContent={
        template:`<div>内容部分</div>`
    }
    const MyFooter={
        template:`<footer>这是尾部</footer>`
    }

    new Vue({
        el:'#app',
        //2.局部注册组件
        components:{
            'my-header':MyHeader,
            'my-content':MyContent,
            'my-footer':MyFooter
        }
    })

3.4 嵌套组件

html部分

     <div id="app">
        <!-- 3.使用组件 -->
        <my-header></my-header>
        <my-content></my-content>
        <my-footer></my-footer>
    </div>

js部分

     //1.定义组件
    const myBanner={    //(1.定义子组件 ，在哪里用就在哪里注册组件
        template:`<div>这是轮播图</div>`
    }
    const myNav={    
        template:`<div>这是导航</div>`
    }
    const MyHeader={
        template:`<header>这是头部</header>`
    }
    const MyContent={ //(3.使用也要在content组件内部使用
        template:`<div class="con">
                        内容部分  
                        <my-banner></my-banner>
                        <my-nav></my-nav>
                 </div>`,
        components:{    //(2.因为要在content内使用组件，所以在content内部注册
            'my-banner':myBanner,
            'my-nav':myNav
        }
    }
    const MyFooter={
        template:`<footer>这是尾部</footer>`
    }
    new Vue({
        el:'#app',
        //2.局部注册组件
        components:{
            'my-header':MyHeader,
            'my-content':MyContent,
            'my-footer':MyFooter         
        }
    })

3.5 抽离组件的模块

以局部组件为例
html部分

     <div id="app">
        <!-- 3.使用组件 -->
        <my-header></my-header>
    </div>

需要在script标签上方插入template标签

<template id="header">
    <header>这是头部---{{ tip }}</header>
</template>

js部分

    //1.定义组件
    const MyHeader={
        template:`<header>这是头部</header>`
    }

    new Vue({
        el:'#app',
        //2.局部注册组件
        compnents:{
            'my-header':MyHeader
        }
    })

4. vue之组件进阶部分

4.1 父子组件之传值

父传子

父子组件之间，通过父组件向子组件传值的渠道多，传值类型多种多样。
如何传？
1.在父组件调用子组件的地方，添加一个自定义属性，属性的值就是父组件要传给子组件的值。（如果属性的值是number类型，boolean类型，或者是变量，需要使用到绑定属性）
2.在子组件定义的地方 给其添加一个选项props，props可以是数组或者对象

  • 2.1若是数组，元素则是父组件中自定义的属性名
  • 2.2若是对象，则有两种写法
    / 第一种：验证传递数据的有效性 ---- 在实际开发中，父子组件可能不是一个人写的，如果数据类型不对，会报出警告，可以及时调整。
    / 第二种：既要验证数据的类型，又要设定属性的默认值，如果默认值是对象或者是数组，值为一个函数。

推荐使用对象
看完讲解也许还是不好了解，那么请看下放代码，一定会让你明白！

html部分

     <div id="app">
     <!--1. 在父组件调用子组件的地方，添加一个自定义属性  test,count,flag,tips
           皆是自定义属性，且数据类型不同，有常量、数值、布尔、变量  -->
        <my-header test='父给子' :count='200' :flag="true" :tips='tips'/> 
    </div>

需要在script标签上方插入template标签

<template id="tou">
    <header>这是头部
        ---{{test}}---{{count}}---{{flag}}---{{tips}}
    </header>
    
</template>

该处案例的props是数组
js部分

      const Header={
        template:'#tou',
        //2.在子组件定义的地方 给其添加一个选项props，该处案例的props是数组
        props:['test','count','flag','tips']
    }
    new Vue({
        el:'#app',
        data:{
            tips:'小提示'
        },
        components:{
            'my-header':Header
        }
    })

该处案例的props是对象
js部分—写法一

    const Header={
        template:'#tou',
        props:{
            test:String,
            count:Number,
            flag:Boolean,
            tips:String
        }
    }
    new Vue({
        el:'#app',
        data:{
            tips:'小提示'
        },
        components:{
            'my-header':Header
        }
    })

js部分—写法二

    const Header={
        template:'#tou',
        props:{
            test:{
                type:String,
                default:'测试数据'
            },
            count:{
                type:Object,
                default:function(){
                    return {a:'11',b:'22'}
                }
            },
            tips:{
                type:Array,
                default:function(){
                    return [1,2,3]
                }
            }
            
        }
    }
    new Vue({
        el:'#app',
        data:{
            tips:'小提示'
        },
        components:{
            'my-header':Header
        }
    })

子传父

相较于父传子，子传父的方式就比较单一了，具体步骤如下。
1.在父组件调用子组件的地方，给其绑定一个自定义事件，注意事件不要加（）。
2.在父组件选项methods中实现此事件，默认参数为从子组件得到的值。
3.在子组件中，可以是生命周期钩子函数，也可以是组件自己的事件去触发父组件中的自定义事件。
html部分

     <div id="app">
     <!-- 绑定一个自定义事件 -->
        <my-header @myevent="getData"/> 
    </div>

需要在script标签上方插入template标签

<template id="tou">
    <header>
        这是头部  
    </header>   
</template>

js部分

     const Myoo={
        template:'#tou',
        mounted(){       //第二个参数为子传给父的值
            this.$emit('myevent',1000)
        }
    }

    new Vue({
        el:'#app',
        methods:{
            getData(val){
                console.log(val)
            }
        },
        components:{
            'my-header':Myoo
        }
    })

4.2非父子组件传值

非父子组件的传值—兄弟组件传值

  1. 先要确定中间联系人
    const bus = new Vue()
  1. 确保接受者的存在，在接收端通过
    bus.$on( ‘收信信号’，function（val){ })
  1. 在发送端通过
    bus.$emit(‘收信信号’，val)

html部分

     <div id="app">
        <my-lists></my-lists>
        <my-btn></my-btn>
    </div>

需要在script标签上方插入template标签

<template id="li">
    <ul>
        <li>11<button @click="add">+1</button></li>
        <li>22<button @click="add">+1</button></li>
        <li>33<button @click="add">+1</button></li>
        <li>44<button @click="add">+1</button></li>
        <li>55<button @click="add">+1</button></li>
    </ul>
</template>
<template id="btn">
    <div>
        总量是：{{num}}
    </div>
</template>

js部分

    //1.确定中间联系人
    const media = new Vue()   
    const Mylist={
        template:'#li',
        methods:{
            add(){
                 //3.在发送端以确认过的收信信号来发送相关内容
                media.$emit('love',2)
            }
        }
    }
    const Mybtn={
        template:'#btn',
        data(){
            return {
                num:0
            }
        },
        mounted(){
            //2.确保接收端可以接受，并且确定接收端的收信信号
            media.$on('love',(val)=>{
                this.num += val;
            })
        }
    }

4.3 组件间的动态传值

keep-alive保持组件的状态，避免组件的重新渲染
可以理解为手机打开软件后按了home键，再打开软件,数据仍然存在。
每个组件都会有两个生命周期钩子函数
activated（） 正在用的
deactivated（） 后台的
include可以只给部分组件保留状态，给需要定义的组件
添加name属性

html部分

 <div id="app">
        <button @click="tem = 'a-con'">AAA</button>
        <button @click="tem = 'b-con'">BBB</button>
        <button @click="tem = 'c-con'">CCC</button><br>

        <!-- keep-alive保持组件的状态，避免组件的重新渲染 -->
        <!-- 可以理解为手机打开软件后按了home键，再打开软件
              数据仍然存在
              每个组件都会有两个生命周期钩子函数
              activated（） 正在用的
              deactivated（） 后台的
             include可以只给部分组件保留状态，给需要定义的组件
            添加name属性-->
        <keep-alive include='a,b'>
             <!-- 只显示is后面的值 -->
            <component :is='tem'></component>
        </keep-alive>
      
    </div>

需要在script标签上方插入template标签

<template id="acon">
    <input type="text" placeholder="aaa">
</template>
<template id="bcon">
    <input type="text" placeholder="bbb">
</template>
<template id="ccon">
    <input type="text" placeholder="ccc">
</template>

js部分

      //定义组件时顺便定义名字
    const Acon = {
        name:'a',   
        template: '#acon',
        activated(){
            console.log('a11')
        },
        deactivated(){
            console.log('a22')
        }
    }
    const Bcon = {
        name:'b',
        template: '#bcon',
        activated(){
            console.log('b11')
        },
        deactivated(){
            console.log('b22')
        }
    }
    const Ccon = {
        template: '#ccon',
        activated(){
            console.log('c11')
        },
        deactivated(){
            console.log('c22')
        }
    }

    new Vue({
        el: '#app',
        data:{
           tem:'a-con' 
        },
        components: {
            'a-con': Acon,
            'b-con': Bcon,
            'c-con': Ccon
        }
    })
TD暴走小叮当
关注
  • 10
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue基础知识-菜鸟入门
01-03
vue基础
Vue基础入门
06-21
Vue是-个渐进式JavaScript框架，主要用于构建用户界面。它可以轻松创建功能强大的单页面应用程序，并在创建Web应用程序的视图层时实现其基本用途。 Vue、React、 angular可以说是当今前端中三足鼎立的三大框架，而Vue社区的发 展已经慢慢赶超angular以及React。Vue的优点是API齐全、灵活性高、极易. 上手、插件集成,在前端框架学习中,无疑Vue是第一选择。 本课程基于ES6来学习Vue的整个API，其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三 方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现登录注册、前端路由原理、为什么要用vuex、单页应用和多页应用的区别、以及项目实战:购物车项目。通过学完本课程，你可以独立开发任何一款单页应用程序项目。
vue中 fetch跨域请求
miaomiao博客
06-22 5779
fetch 是原生javaScript提供的，它可以当作全局变量使用，挂载在window对象身上的 fetch的get请求方法 简单基本的fetch请求（get） <div id="app"> <button @click="getData">get请求</button> </div> <script> 是原生javaScr...
Antd+Vue最详细的搭建流程（上篇之脚手架安装、常见基础配置和Antd安装）
qq_34027761的博客
09-07 1万+
一、搭建基础环境 1. 正常有两种使用vue的方式 （1）第一种直接在html中引入vue脚本使用（简单的代码书写,本人就不在展示了，有兴趣的看Vue直接引入js） （2）第二种使用webpack进行构建（可以书写复杂的代码，推荐） 2. 使用webpack构建环境准备 （1)本人环境 （2）按照下列顺序安装 node.js安装教程 npm使用介绍（安装后建议使用国内的淘宝镜像cnpm,当然cnpm有时安装会导致项目离奇的无法运行，现在推荐使用yarn进行一个安装，yarn安装教程） webpack安装教
Ant Design of Vue （3）Card 卡片动态加载后台数据
码侬人生
09-17 4617
一.首先来建一个vue静态页面 卡片 Card - Ant Design Vue (antdv.com) 来看看页面效果 二.接下修改Card 动态加载显示后台数据 1.这个是后台接口返回数据 2.接口有了，那接下来进行页面改造。 3.接口改造完成，接下来调用接口，加载数据。 获取后台数据的方式很多种，可以用自己拿手的方式进行数据获取，这里只是提供实现的思路，可能不是最挂的方式，各位可以积极指出。 4.数据加载出来了，让它自动刷新显示实时数据 参考...
Vue的三种网络请求方式
月光晒了很凉快的博客
09-06 9305
在进行 Vue 的网络请求之前，我们先写一些假数据：users.json： 1. 写法1：XMLHttpRequest发送请求 使用 XMLHttpRequest 请求 users.json 中的数据： 使用 fetch 请求 users.json 中的数据： 概述：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。优势：使用方法： 步骤1：使用初始化 node.js 配置文件步骤
160623、理解 Promise 的工作原理
weixin_30698527的博客
06-29 300
Javascript 采用回调函数(callback)来处理异步编程。从同步编程到异步回调编程有一个适应的过程，但是如果出现多层回调嵌套，也就是我们常说的厄运的回调金字塔(Pyramid of Doom)，绝对是一种糟糕的编程体验。于是便有了 CommonJS 的 Promises/A 规范，用于解决回调金字塔问题。本文先介绍 Promises 相关规范，然后再通过解读一个迷你的 Promises...
Vue 中的 Fetch 使用
在下魔王ii的博客
07-16 1086
废话不多说 ，直接上代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue component</title> <script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script&g
Vue中的fetch-post/get请求
YY的博客
11-23 1367
Vue中的fetch-post/get请求
Vue，axios，fetch的结合和关系
CherishTM的博客
12-31 468
mounted: function () { //当el元素加载完 就要发出axios请求到后台获取date和number axios.all([getdate(), getnumber(), getClientInfo(), this.getTotal()]).then( axios.spread((d1, d2, d3, d4) => { //spread 完成并发请求 即四个请求完成后 this.$data.time = d1.data..
在vue中created、mounted等方法使用小结
10-15
主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue基础入门及示例
08-22
此为学习Vue官网基础的示例代码
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue入门知识PPT
03-26
里面包含自己总结的一些vue入门知识，如果有需要的同学们 可以下载并看看，不足之处可以尽情提出来，本人第一次上传资源
Vue项目之登录注册
热门推荐
shiningyn的博客
08-31 3万+
Vue项目之登录注册1. 注册1.1 注册页面的布局 1. 注册 1.1 注册页面的布局 需要用到Vant的Field组件 1.views下新建一个注册页面 ，完成基本布局。引入Vue和Field并使用。 2.在官方文档中搜索，查看自己需要的内容，将其直接粘贴到页面中。 3.给注册页面添加一个单独的路由，注册页面不需要底部。（注意，相关样式需要引入不同的组件，请细心查看官方文档，按需拿取内容） 4...
JS合并数组对象中key相同的数据（将数组里某个属性相同的对象合并成一个数组）两种方案
shiningyn的博客
04-09 5698
将数组里某个属性相同的对象合并成一个数组 原数组如下 let resData = [ { "name": "住院医疗最高报销", "tagName": "医疗", "insuredAmount": "6000" }, { "name": "身故赔付", "tagName": "寿险"...
vue项目利用qrcodejs2依据后台返回地址生成二维码并下载
shiningyn的博客
04-09 2213
1.首先安装qrcodejs2 cnpm i qrcodejs2 -S 2.在组件内部直接引用 import QRCode from "qrcodejs2"; 3.html代码 4.script代码 （请不要被图中事件顺序误导），展示二维码（生成二维码前先清除二维码之前的二维码） 注：此文章参考多位前端开发者 ...
Vue项目之简易版
shiningyn的博客
08-24 1479
Vue项目之简易版1.生成一个vue项目2. 修改App.vue3. 开始抽离页面组件以及底部3.1 在views下新建四个vue页面，并写上相应的内容。3.2 在App.vue中删除相应的组件，用router-view标签代替。3.3 在router.js中配置路由4. 生成底部点击效果5. axios请求数据渲染页面5.1 安装axios5.2 抽离组件并请求数据5.3 父组件向子组件传值 ...
Vue项目之简易版后续2
shiningyn的博客
08-27 358
Vue项目之简易版后续21. 首页插入轮播图 1. 首页插入轮播图 1.利用Vant插入轮播图，首先安装vant 模块。 cnpm i vant -S 2.引入组件，按需引入（方式有很多种，详情请看官方文档） 安装插件 cnpm i babel-plugin-import -D 3.在第二步完成以后，会在文件夹中生成一个文件babel.config.js，添加一个新的选项plugins。 ...
vue2入门基础教程
最新发布
09-09
要学习Vue2的入门基础知识，您可以按照以下步骤进行： 1. 下载和安装Vue.js：您可以从官方网站上下载并引入Vue.js脚本文件，或者使用CDN链接进行引用。 2. 创建HTML文件：创建一个HTML文件，其中包含被Vue控制的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值