当前位置：网站首页>黑马四小时入门学习记录-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>