Vue基础-CSDN博客

本文链接：https://blog.csdn.net/qq_59081708/article/details/134054242

1 基础语法

0 async await axios.get 异步请求

1 基础语法

0 async await axios.get 异步请求

配置项

data:{}

computed:{计算属性}：

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

methods:{}：

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

v-text

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

v-html

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

v-on

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

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

v-show

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

注：也可以直接在式子中用bool式（如 <h2 v-show="age>18" v-text="star" > </h2> ）

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代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello world</title>
  </head>
  <body>
    <div id="app">
      <button @click="sub">
        -
      <button>
      <span>{{num}}</span>
      <button @click="add">
        +
      <button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
        el:"#app",
        data:{
          num:1
        },
        methods:{
          add:function(){
            if (this.num<10){
              this.num++
            }else
            alert("stop,no more")            
          },
          sub:function(){
            if (this.num>0){
              this.num--
            }else
            alert("stop,no smaller")
          }
        }

      })
    </script>
  </body>
</html>

2.2图片切换

2.2.1所用知识

列表数据用数组保存

2.2.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello chicken</title>
  </head>
  <body>
    <div id="mask">
      <h2 class="title">
        I K U N
      </h2>
      <img :src="imgArr[index]">
    
      <a href="javascript:void(0)" @click="prev" v-show="index>0" >
      <br>
      <input type="button" value="上一张">
      </a>
    
      <a href="javascript:void(0)" @click="next" v-show="index<imgArr.length -1" >
        <input type="button" value="下一张">
      </a>
    </div> 

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
    <script>
      var app=new Vue({
        el:"#mask",
        data:{
          index:0,
          imgArr:["https://img0.baidu.com/it/u=910898461,3729592231&fm=253&fmt=auto&app=120&f=JPEG?w=1174&h=733",
                  "https://img0.baidu.com/it/u=334282167,2599872929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                  "https://img1.baidu.com/it/u=182809259,608048952&fm=253&fmt=auto&app=120&f=JPEG?w=495&h=299",
                  "https://img0.baidu.com/it/u=3163905801,1801334695&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
                  "https://img0.baidu.com/it/u=2291712305,2704760041&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"],

        },
       methods:{
        prev:function(){
          this.index--
        },
        next:function(){
          this.index++
        }
        }
       }          
      )
    </script>
  </body>
</html>

2.3 网页记事本

2.3.1所用知识

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

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

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

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

5.列表没有数据时隐藏

2.3.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello world</title>
  </head>
  <body>
    <h1>记事本</h1>
    <section id ="app">
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务">
      <li v-for="(item,index) in list" >
        <div>
          <span>
          {{index+1}}
          </span>
          <label>
            {{item}}
          </label>
          <input type="button" value="删除" @click="remove(index)"></input>          
        </div>        
      </li>
      <input type="button" value="清空" @click="moveOut" v-show="list.length!=0" >
      <h2 v-if="list.length!=0">{{list.length}}个事件</h2>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app=new Vue({
        el:"#app",
        data:{
          list:["吃饭","睡觉","打豆豆"],
          inputValue:"听歌",
        },
        methods:{
          add:function(){
            this.list.push(this.inputValue)
          },
          remove:function(index){
            console.log(index)
            this.list.splice(index,1)
          },
          moveOut:function(){
            this.list=[]
          }          
        }
        }              
      )
    </script>
  </body>
</html>

2.4表单提交控制

2.4.1所用知识

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

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

2.4.2代码及结果展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello world</title>
  </head>
  <body>
    <div id ="app">
      <h3>收集表<h3><!--通过表单收集体会v-model对多种标签的绑定-->
        姓名：<input type="text" v-model="username"><br><br>
        是否单身：<input type="checkbox" v-model="isSingle"><br><br>
        <!--单选框加入name属性分组互斥-->
        性别：<input type="radio" v-model="gender" name="gender" value="1">男
              <input type="radio" v-model="gender" name="gender" value="2">女
              <br><br>
        所在城市：
        <select v-model="city">
          <option value="101">北京</option>
          <option value="102">广州</option>
          <option value="103">上海</option>
          <option value="104">深圳</option>
        </select>
        <br><br>
        自我描述：<textarea v-model="intro"></textarea>
        <br><br>
        <button>立即注册</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app =new Vue({
        el:"#app",
        data:{
          username:"",
          isSingle:"false",
          gender:"",
          city:"",
          intro:""
        },
       
      })
    </script>
  </body>
</html>