vue2+vue3基础

最新推荐文章于 2025-01-14 20:30:27 发布

桃汁11

最新推荐文章于 2025-01-14 20:30:27 发布

阅读量229

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_55269913/article/details/133892924

版权

Day01

vue是一个用于构建用户界面的渐进式框架

构建用户界面：基于数据动语渲染页面

渐进式：需要渐进学习

框架：是一套完整的项目解决工具

vue的两种使用方式：1.vue核心包开发，适用于局部模块改造

2.vue核心包&vue插件工程化开发，适用于整站开发

首先创建一个vue实例

构建用户界面——>创建vue实例初始化渲染：1.准备容器 2.引入vue核心包(开发版本/生产版本) 3.创建一个vue实例 4.指定配置项，渲染数据

了解插值表达式，并且使用插值表达式

插值表达式{{}}是一种vue模板语法

作用：利用插值表达式进行插值，渲染到页面中

注意：使用的数据必须存在，仅支持表达式，而非语句，不能在标签属性中使用插值表达式

vue的核心特性：响应式

数据的响应式处理，数据变化，视图自动更新，data中的数据，最终会被添加到实例上

Vue指令

vue指令，vue会根据不同的指令，针对标签实现不同的功能

指令：带有v-前缀的特殊标签属性

v-show和v-if

v-show作用是控制元素显示或隐藏，原理是切换display：none控制显示或隐藏

适用于频繁切换显示隐藏的场景

v-if的作用和语法与v-show基本一致，不同于v-show，v-if的原理是基于条件判断，是否创建或移除元素节点，适用于要么显示要么隐藏的场景

<div id="app">
    <!-- v-show 本质上是控制css的display来控制显示隐藏 -->
    <div class="box" v-show="true">我是v-show控制的盒子</div>
    <div>ss</div>
    <!-- v-if底层原理是根据判断条件控制元素的创建和销毁（条件渲染） -->
    <div class="box" v-if="flag">我是v-if控制的盒子</div>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })

v-if和v-else和v-else-if

作用：辅助v-if进行判断渲染

语法：注意v-else和v-else-if=“表达式” 不可以单独使用，要紧挨着v-if使用

<div id="app">
    <p v-if="gender===1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score>=90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
      gender:1,
      score:100
      }
    })

v-on

作用：注册事件=添加监听+提供处理逻辑

语法：1.v-on：事件名=“内联语句”

2.v-on：事件名=“methods中的函数”

注意：v-on可以替换成@

第一种语法：

<div id="app">
    <button v-on:mouseenter="count--">-</button>
    <span>{{count}}</span>
    <!-- <button @click="count++">+</button> -->
    <button v-on:click="count++">+</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count:1
      }
    })

第二种语法：

<div id="app">
    <!-- <button @click="flag=!flag">切换显示隐藏</button> -->
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="flag">程序员</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag:false
      },
      methods: {
        fn(){
          //vue让提供的所有methods中的函数，this都指向当前的实例
          console.log(app===this);//true
          // console.log(1);
          app.flag = !app.flag
        }
      },
    })
  </script>

v-on函数传参

<div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="fn(5)">可乐5元</button>
      <button @click="fn(10)">咖啡10元</button>
      <button @click="fn(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{money}}元</p>
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money:1000
      },
      methods: {
        fn(a){
        this.money-=a
        // console.log(this.money);
        
        }
      },
    })
  </script>

v-bind

作用：动态设置html的标签属性

语法：v-bind：属性名=“表达式”、

简写：属性名=“表达式”

<div id="app">
    <button v-show="a" @click="a--">上一页</button>
    <div>
      <img :src="list[a]" alt="">
    </div>
    <button v-show="!(a===list.length-1)" @click="a++">下一页</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        a:0,
        
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      },
      
    })
  </script>

v-for

作用：基于数据循环，多次渲染整个元素

v-for中的key

作用：给元素添加唯一标识，便于vue进行列表项正确排序复用

注意：key的只能是字符串或者数字类型，key的值必须有唯一性，推荐id作为key的值，不推荐使用index

v-model

作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单内容

<div id="app">
    <!-- <1>数据变化，视图自动更新 -->
      <!-- <2>视图变化，数据自动更新 -->
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username:'',
        password:''
      },
      methods: {
        login(){
        console.log(this.username,this.password);
        },
        reset(){
        this.username = ""
        this.password = ""
        }
      },
    })
  </script>

练习

翻转世界

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

提示: 把字符串取反赋予回去

<div id="app">
        <input type="text" v-model="name">
        <input type="button" value="点击翻转" @click="dian">
    </div>
    


    <script src="./vue.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data:{
        name:''
        },
        methods: {
            dian(){
            // console.log(typeof this.name);
            this.name=this.name.split('').reverse().join('')
            }
        },
    })
    </script>

帅哥美女走一走

目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.

提示: 操作数组里的顺序, v-for就会重新渲染li

<div id="app">
        <ul>
            <li v-for="(item,index) in list">{{item}}</li>
        </ul>
        <button @click="dao">走一走</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                list:['帅哥','美女','程序员']
            },
            methods: {
                dao(){
                    // const arr = []
                    // for(let i = 0;i<this.list.length;i++){
                    //     arr.push(this.list[i+1])
                    // }
                    // arr[this.list.length-1]=this.list[0]
                    // // console.log(arr);
                    // this.list=arr
                    this.list.push(this.list[0])
                    this.list.shift()
                }
            },
        })
    </script>

练习2_改变数组顺序_影响vfor指令的标签

加加减减

目标: 点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

提示: 数组渲染列表, 生成和删除都围绕数组操作

<div id="app">
        <ul v-for="(item,index) in list" :key="index">
            <li>{{item}}<button @click="del(index)">删除</button></li>
        </ul>
        <button @click="add">生成</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                list:[1,5,10]
            },
            methods: {
                add(){
                    this.list.push(Math.floor(Math.random()*21))
                },
                del(a){
                    this.list.splice(a,1)
                }
            },
        })
    </script>

购物车

目标: 完成商品浏览和删除功能, 当无数据给用户提示

需求1: 根据给的初始数据, 把购物车页面铺设出来
需求2: 点击对应删除按钮, 删除对应数据
需求3: 当数据没有了, 显示一条提示消息

3.0_案例_购物车删除_干净了还有提示

<div id="app">
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <!-- 循环渲染的元素tr -->
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="4" v-show="list.length===0">没有数据咯~</td>
            </tr>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: "奔驰", time: "2020-08-01" },
                    { id: 2, name: "宝马", time: "2020-08-02" },
                    { id: 3, name: "奥迪", time: "2020-08-03" },
                ]
            },
            methods: {
                del(a){
                    this.list=this.list.filter((item) => item.id!=a)
                }
            },
        })
    </script>

愿我们都得偿所愿吧！