• Vue基础

    目录

    1 基础语法

    0 async await axios.get 异步请求

    配置项

    v-text

    v-html

    v-on

    v-show

    v-if

    v-bind

    v-for

    v-model

     watch侦听器

    vue生命周期

    vue生命周期函数

    2 简单应用

    2.1 计数器

    2.1.1所用知识

    2.1.2代码及结果展示

    ​编辑

    2.2图片切换

    2.2.1所用知识

    2.2.2代码及结果展示

    2.3 网页记事本

    2.3.1所用知识

    2.3.2代码及结果展示

    2.4表单提交控制

    2.4.1所用知识

    2.4.2代码及结果展示

    1 基础语法

    0 async await axios.get 异步请求

    配置项

    data:{}

    computed:{计算属性}：

            封装对数据的处理，存在缓存属性提高性能，作为属性直接使用

    methods:{}：

            给实例提供业务逻辑，需要调用 -> this.方法名 @事件名="方法名"

    v-text

    设置标签的内容（要替换部分字符用差值表达式{{}}）

    v-html

    可以存放纯文本，内容中有html结构会被解析为标签

    v-on

    为元素绑定事件，事件名不需要写on,可以简写指令为@

    事件后跟上.修饰符可以对事件进行限制

    v-show

    根据真假切换元素的显示和隐藏，指令后面的内容会被解析为bool值

    注：也可以直接在式子中用bool式（如

    age>18" v-text="star" >

    ）

    v-if

    用法跟v-show一样，但是v-if修改的是dom元素（dom树中元素的移除/添加），对资源消耗较大

    v-bind

    设置元素的属性，可简写为 :属性

    v-for

    根据数据生成列表结构 ，数组常和v-for结合使用，语法一般为(i ,index) in 数据

    v-model

    获取和设置表单元素的值（双向数据绑定，同步更新值）

     watch侦听器

    监视数据变化（写成方法）

    监视对象的子属性

    额外配置项（写为对象）

    deep:true 深度监视

    immediate:true 初始化立刻执行一次handle

    vue生命周期

    创建阶段的最后（等待响应式数据准备完毕）时，开始发送初始化渲染请求；

    挂载阶段结束后可以操作dom

    vue生命周期函数

    vue的生命周期过程中会自动调用的一些函数（钩子函数）

    created：发送初始化渲染请求

    mounted：操作dom

    beforeDestory：卸载前用来将数据上传至后端 or 清除掉一些vue以外的资源占用（定时器、延时器，结合组件用）

    watch监听与updated钩子函数的区别：watch是监听的数据修改就触发 updated是整个组件的dom更新才触发

    2 简单应用

    2.1 计数器

    2.1.1所用知识

    （1）el(挂载点)，data(数据)，methods(方法)

    （2）v-on指令作为绑定事件，简写为@

    （3）通过this关键字获取data数据

    2.1.2代码及结果展示

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.     <title>hello world</title>
    7.   </head>
    8.   <body>
    9.     <div id="app">
    10.       <button @click="sub">
    11.         -
    12.       <button>
    13.       <span>{{num}}</span>
    14.       <button @click="add">
    15.         +
    16.       <button>
    17.     </div>
    18.     
    19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    20.     <script>
    21.       var app=new Vue({
    22.         el:"#app",
    23.         data:{
    24.           num:1
    25.         },
    26.         methods:{
    27.           add:function(){
    28.             if (this.num<10){
    29.               this.num++
    30.             }else
    31.             alert("stop,no more")            
    32.           },
    33.           sub:function(){
    34.             if (this.num>0){
    35.               this.num--
    36.             }else
    37.             alert("stop,no smaller")
    38.           }
    39.         }
    40.  
    41.       })
    42.     </script>
    43.   </body>
    44. </html>

    2.2图片切换

    2.2.1所用知识

    列表数据用数组保存

    2.2.2代码及结果展示

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.     <title>hello chicken</title>
    7.   </head>
    8.   <body>
    9.     <div id="mask">
    10.       <h2 class="title">
    11.         I K U N
    12.       </h2>
    13.       <img :src="imgArr[index]">
    14.     
    15.       <a href="javascript:void(0)" @click="prev" v-show="index>0" >
    16.       <br>
    17.       <input type="button" value="上一张">
    18.       </a>
    19.     
    20.       <a href="javascript:void(0)" @click="next" v-show="index >
    21.         <input type="button" value="下一张">
    22.       </a>
    23.     </div> 
    24.  
    25.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    26.    
    27.     <script>
    28.       var app=new Vue({
    29.         el:"#mask",
    30.         data:{
    31.           index:0,
    32.           imgArr:["https://img0.baidu.com/it/u=910898461,3729592231&fm=253&fmt=auto&app=120&f=JPEG?w=1174&h=733",
    33.                   "https://img0.baidu.com/it/u=334282167,2599872929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
    34.                   "https://img1.baidu.com/it/u=182809259,608048952&fm=253&fmt=auto&app=120&f=JPEG?w=495&h=299",
    35.                   "https://img0.baidu.com/it/u=3163905801,1801334695&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
    36.                   "https://img0.baidu.com/it/u=2291712305,2704760041&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"],
    37.  
    38.         },
    39.        methods:{
    40.         prev:function(){
    41.           this.index--
    42.         },
    43.         next:function(){
    44.           this.index++
    45.         }
    46.         }
    47.        }          
    48.       )
    49.     </script>
    50.   </body>
    51. </html>

    2.3 网页记事本

    2.3.1所用知识

    1.v-for将数组和列表进行关联，向数组中添加内容实现元素的新增

    2.索引结合事件传参实现删除

    3.数组的长度通过v-test相关指令渲染到页面上

    4.所绑定的数组消失，即为清空

    5.列表没有数据时隐藏

    2.3.2代码及结果展示

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.     <title>hello world</title>
    7.   </head>
    8.   <body>
    9.     <h1>记事本</h1>
    10.     <section id ="app">
    11.       <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
    12.       <li v-for="(item,index) in list" >
    13.         <div>
    14.           <span>
    15.           {{index+1}}
    16.           </span>
    17.           <label>
    18.             {{item}}
    19.           </label>
    20.           <input type="button" value="删除" @click="remove(index)"></input>          
    21.         </div>        
    22.       </li>
    23.       <input type="button" value="清空" @click="moveOut" v-show="list.length!=0" >
    24.       <h2 v-if="list.length!=0">{{list.length}}个事件</h2>
    25.     </section>
    26.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    27.     <script>
    28.       var app=new Vue({
    29.         el:"#app",
    30.         data:{
    31.           list:["吃饭","睡觉","打豆豆"],
    32.           inputValue:"听歌",
    33.         },
    34.         methods:{
    35.           add:function(){
    36.             this.list.push(this.inputValue)
    37.           },
    38.           remove:function(index){
    39.             console.log(index)
    40.             this.list.splice(index,1)
    41.           },
    42.           moveOut:function(){
    43.             this.list=[]
    44.           }          
    45.         }
    46.         }              
    47.       )
    48.     </script>
    49.   </body>
    50. </html>

    2.4表单提交控制

    2.4.1所用知识

    1.常见的表单元素都能用v-model绑定关联来快速获取或者设置表单元素的值，他能根据控件；欸行自动选取正确的方法来更新元素。

    2.单选框中加入同一个name属性来进行分组

    2.4.2代码及结果展示

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.     <title>hello world</title>
    7.   </head>
    8.   <body>
    9.     <div id ="app">
    10.       <h3>收集表<h3><!--通过表单收集体会v-model对多种标签的绑定-->
    11.         姓名：<input type="text" v-model="username"><br><br>
    12.         是否单身：<input type="checkbox" v-model="isSingle"><br><br>
    13.         <!--单选框加入name属性分组互斥-->
    14.         性别：<input type="radio" v-model="gender" name="gender" value="1">男
    15.               <input type="radio" v-model="gender" name="gender" value="2">女
    16.               <br><br>
    17.         所在城市：
    18.         <select v-model="city">
    19.           <option value="101">北京</option>
    20.           <option value="102">广州</option>
    21.           <option value="103">上海</option>
    22.           <option value="104">深圳</option>
    23.         </select>
    24.         <br><br>
    25.         自我描述：<textarea v-model="intro"></textarea>
    26.         <br><br>
    27.         <button>立即注册</button>
    28.     </div>
    29.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    30.     <script>
    31.       var app =new Vue({
    32.         el:"#app",
    33.         data:{
    34.           username:"",
    35.           isSingle:"false",
    36.           gender:"",
    37.           city:"",
    38.           intro:""
    39.         },
    40.        
    41.       })
    42.     </script>
    43.   </body>
    44. </html>

    3.Other

    3.1App.vue根组件

    3.2路由

    路径和组件的映射关系

    3.2.1 VueRouter 插件使用

    npm install vue-router@3.6.5

  • 相关阅读:
    拉美国家货币汇率走强 其后继上涨形势将持续？
    离谱！面试为啥都问Kafka？赶紧补一下
    Linux基本命令之修改主机名、用户名、密码
    Edge使用猴油脚本实战（实验室安全考试系统刷在线时长——网站永久自动刷新）
    揭开空白网页背景色的神秘面纱
    MBR主引导记录
    非计算机科班如何丝滑转码？
    python安装imblearn一直找不到包的解决方法
    新能源中期财报：有人上天入地有人还在苦苦挣扎
    计算机二级WPS 选择题（模拟和解析五）
  • 原文地址：https://blog.csdn.net/qq_59081708/article/details/134054242