当前位置：网站首页>黑马四小时入门学习记录-2|本地应用

黑马四小时入门学习记录-2|本地应用

2022-07-29 11:35:00 【echo_千】

用Vue开发网页效果
获取元素,操纵他们

1.内容绑定,事件绑定

v-text

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容【{ {}}这个是v-text的缩写】
内部支持写表达式

v-html

v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

v-on基础

v-on指令的作用是:为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

v-on补充

传递自定义参数,事件修饰符

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种

文档传送门：API — Vue.js

案例——计数器

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计数器</title>
  </head>
  
  <body>
    <!-- html结构 -->
    <div id="app">
      <!-- 计数器功能区域 -->
      <div>
        <button @click="sub">-</button>
        <span>{
  {num}}</span>
        <button @click="add">+</button>
      </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <!-- 编码 -->
    <script>
      // 创建Vue实例
      var app = new Vue({
        el: "#app",
        data: {
          num: 1,
        },
        methods: { //这里的方法要写methods不然会报错找不到这些方法
          add: function () {
            console.log("add");
            if (this.num < 10) {
              this.num++;
            }
            else {
              alert("不能再加啦！！")
            }
          },
          sub: function () {
            console.log("sub");
            
            if (this.num > 0) {
              this.num--;
            }
            else {
              alert("已经到最小值啦 ：）")
            }
          }
        }
      });
    </script>
    
  </body>
  
</html>

2.显示切换,属性绑定

v-show：广告、遮罩层

操作标签

v-show指令的作用是:根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容,最终都会解析为布尔值
值为true元素显示,值为false元素隐藏
数据改变之后,对应元素的显示状态会同步更新

v-if

v-if指令的作用是:根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小

操作DOM元素，反复操作消耗大。

v-bind：v-bind:属性名=表达式

v-bind指令的作用是:为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind,只保留:属性名
隔要动态的增删class建议使用对象的方式

【v-bind是绑定标签的属性，可以改变其中的属性。如：input标签的title，img标签的src、height、width等等。】

案例——图片切换

1.定义图片数组 imgArr:[]

⒉.添加图片索引

3.绑定src属性 v-on

4.图片切换逻辑

5.显示状态切换 v-show

列表数据使用数组保存
v-bind指令可以设置元素属性,，比如src
v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </head>
  
  <body>
    <!-- html结构 -->
    <div id="app">
      <!-- 图片切换功能区域 -->
      <!-- 左箭头 -->
      <a href="#" @click="prev" v-show="index>0"><img src="./img/prev.png"></a>
      <!-- 右箭头 -->
      <a href="#" @click="next" v-show="index<imgArr.length-1"><img src="./img/next.png"></a>
      <!-- 图片 -->
      <img :src="imgArr[index]">
    </div>
    <!-- 编码 -->
    <script>
      // 创建Vue实例
      var app = new Vue({
        el: "#app",
        data: {
          imgArr: [
            "./img/1.jpg", 
            "./img/2.jpg",
            "./img/3.jpg",
            "./img/4.jpg"
          ],    //1.定义图片数组
          index: 0      //2.添加图片索引
        },
        methods: {
          //4.图片切换逻辑
          prev() {
            this.index--;
          },
          next() {
            this.index++;
          }
        }
        
      });
    </script>
    
  </body>
  
</html>

3.列表循环,表单元素绑定

v-for

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据【in是固定的，item和index可以更换。】
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

【v-for是遍历数据，如果要显示出来需要结合v-text使用/{ {}}】

v-model

获取和设置表单元素的值(双向数据绑定)
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据←→表单元素的值双向绑定

案例——记事本

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制,比如.enter
v-on在绑定事件时可以传递自定义参数
通过v-model可以快速的设置和获取表单元素的值基于数据的开发方式

新增

流程

生成列表结构(v-for 数组)
获取用户输入(v-model)
回车,新增数据(v-on .enter 添加数据)

运用

1.v-for指令的作用

2.v-model指令的作用

3.v-on指令,事件修饰符

4.通过审查元素快速定位

删除

流程

点击删除指定内容(v-on splice 索引)

运用

1.数据改变,和数据绑定的元素同步改变

2.事件的自定义参数

3.splice方法的作用

统计

流程

统计信息个数(v-text length)

运用

1.基于数据的开发方式
2. v-text指令的作用

清空

流程

点击清除所有信息(v-on 清空数组)

运用

基于数据的开发方式

隐藏

流程

没有数据时,隐藏元素(v-show v-if 数组非空)

运用

原网站

版权声明
本文为[echo_千]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_46499784/article/details/126048474