二，本地应用（v-text,v-html,v-on；v-show,v-if,*v-bind；v-for,v-model；v-cloak ；v-once； v-pre ；自定义指令）

白灵一

已于 2022-08-27 10:40:38 修改

阅读量184

点赞数

文章标签： html vue.js

于 2022-06-13 13:50:20 首次发布

本文链接：https://blog.csdn.net/m0_70190404/article/details/125241893

版权

经常使用 v-bind；v-for,v-model

二、本地应用

用vue的方式来开发常见的网页效果。

（一）、内容绑定，事件绑定

1、插值表达式{{}}

{{}}可以在改变部分内容时用，不会解析标签

2、v-text

设置标签的文本值，它同{{}}一样可以改变文本内容。但是不同的是它将直接替换标签的innerText 。 innerText（不标准）和innerHtml 的含义 JavaScript （二）（ DOM（元素的操作）,BOM（windows对象的常见事件），PC 端网页特效异度（动画函数...））_白灵一的博客-CSDN博客

3、v-html

设置标签的innerhtml，有HTML结构的text将被解析出来

<div id="app">
    <!-- 插值表达式  {{}} -->
    <h2> {{ message+'!' }}nihao</h2>
    <h2 v-text="message+'!'">nihao</h2>
    <p v-text="content">nihao</p>
    <p v-html="content">nihao</p>
    <p>{{content}}</p>
    
</div>

<script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello world',
        content: "<a href='http://www.baidu.com'>去百度</a>",
      }
    })
  </script>

4、v-on

为元素绑定事件，v-on:click/mouseenter/dblclick或者简写@click/mouseenter/dblclick="定义的事件"

<div id="app">  
    <input type="button" value="单击事件" v-on:click="doIt" />
    <input type="button" value="双击事件" @dblclick="doIt" />
    <p @mouseenter="changesong">{{ song }}</p>
  </div>

var app = new Vue({
      el: '#app',
      data: {
        song: "樱花草"
      },
      methods: {
        doIt: function () {
          alert('做IT');
        },
        changesong: function () {
          this.song += "nice";
        },

      },
   })

例题：计数器

<!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>Document</title>
  </head>
  <body>
    <div id="app">
        <!-- 计数器功能实现 -->
      <div class="input-num">
        <button @click="mult_counter">
            -
        </button>
        <span>{{counter}}</span>
        <button @click="add_counter">
            +
        </button>
      </div>
    </div>
    <script src = './js/vue.js'></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          counter: 1,
        },
        methods: {
          add_counter: function () {
            if (this.counter < 10) {
               this.counter += 1;
            }else{
                alert('数量不可以超过10');
            }
          },
          mult_counter: function () {
            if (this.counter > 1) {
              this.counter -= 1
            }else{
                alert('数量不可以小于1')
            }
          },
        },
      })
    </script>
  </body>
</html>

（二）、显示切换（条件渲染），属性绑定

1、v-show

表达式的真假（解析值为bool值即可），切换元素的显示和隐藏（原理：修改display）

2、v-if

v-if 同v-show但是它的原理是直接操作dom数 （直接删除标签）

还有： v-eles-if v-else

使用 template 不用 div 的原因是 template 可以起到作用将下面的标签框起来的作用，但是后面会自动将其去掉。不想div 一样一直存在！

3、*v-bind

设置元素的属性的值(将属性的值设在methods或者data中）（属性内容置为空）

v-bind:scr/class等简写:src/class

v-bind 关注的是属性的值，所有当其值是数字或者表达式等都会以相应的格式展示出来。而不是字符串！

例题：

<!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>Document</title>
    <style>
        .active{
            border: 4px solid red;
        }
    </style>
  </head>
  <body>
    <div id="app">
      <button v-show="19>17">取消v-show</button>
      <!-- 点击图片添加样式 -->
      <img :src="imageSrc" :title="imageTitle+'!'" :class="{active:isActive}" @click="toggleActive"/>

      <button v-if="!isshow">取消v-if</button>

    </div>
    <script src="./js/vue.js"></script>
    <script>
      var app = new Vue({
          el:"#app", //#指id选择器
          data:{
              isshow:false,
              imageSrc:"./shitang/zhengjiao.png",
              imageTitle:"蒸饺",
              isActive:true,
          },
          methods:{
              toggleActive:function(){
                  this.isActive =!this.isActive;
              }
          }
      })
    </script>
  </body>
</html>

v-bind 的用途：

1、可以动态绑定class 属性

给class加上v-bind ，可以动态的决定绑定哪一个属性。

此处通过点击按钮来取反，动态的改变class 的取值

2、可以动态的更新属性，使用于一些需要动态的更新的data，或者methods等。此外使用它后可以被解析为表达式而不单单的字符串！！！

（1）、全部为true时：

（2）、全部为false时：

注意：

（三）、列表循环，事件修改符，表单元素绑定

1、v-for

根据数据生成列表结构 （item，index） in 数据 （item，index名字可以自由改动），

数据：可以是 数组（常用），对象，字符串，次数

当只有一个参数是，指的是项，在本例中是item；

当有两个参数是，第一个指的是项，第二个指的是索引；

没有三个或者三个以上的参数。

对比（Diff）算法：

当 key值对比发现与初始的一致，则顺延向后对比，如果与之前的内容一致，则使用之前内容，反之如果与之前的不一致，则用新的内容，相互比较直至下一个key ；

当 key值与之前的key 不一样就用新的，之后一直到下一个key 对比，该过程中间的所有内容都不再对比直接用新的！

不写默认将key值用索引代替。

key作用： 增加了节点的复用率，提高了效率

1、列表过滤（常用计算属性）

计算属性和监听属性实现列表过滤

filter(p) 方法指的是将p中的符合方法里面条件的一些内容过滤掉，返回符合条件的内容。

2、列表排序

先筛选，再排序sort

<!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="./js/vue.js"></script>

</head>

<body>
    <div id="app">

        <input placeholder="输入姓名" v-model="keyWord">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序</button>

        <ul>
            <li v-for="(item,index) in filPersons">
                {{item.name}} - {{item.age}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                keyWord: '',
                persons: [
                    { id: '1', name: 'LiMing', age: 18 },
                    { id: '2', name: '李华', age: 28 },
                    { id: '3', name: '王华', age: 19 },
                    { id: '3', name: '小李', age: 20 },
                ],
                sortType: 0,  // 0原序列，1降序 2升序
            },
            computed: {
                filPersons() {
                    // 先过滤
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) != -1;
                    })
                    // 再排序
                    if (this.sortType) {
                        // 这里 a，b 指的是 arr中的两个元素
                        arr.sort((a, b) => {
                            if (this.sortType === 1)
                                return b.age - a.age;  //降序
                            else
                                return a.age -b.age;  //升序
                        })
                    }
                        return arr;
                },
            }
        })
    </script>
</body>

</html>

2、v-on

补充传递自由参数，事件修改符（事件的后面跟上.修饰符可以对事件进行限制，如.enter回车触发）如：@keyup.enter="sayHai" 当enter键触发事件鼠标弹起时触发函数sayhai（）；

事件修饰符：

修饰符可以联合使用

按键修饰符：

1、

2、

key 和 keyCode 不一样，两个组合的键需要分别小写且用 ' - ' 来连接

3、

4、

3、v-model

获取和设置表单元素（如输入框等）的值（双向数据绑定）（获取后的值和设定的值实现了同步）

<!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>Temole3</title>
  </head>
  <body>
    <div id="app">
      
      <input type="button" value="添加数据" @click="add" />
      <input type="button" value="删除数据" @click="remove" />
      <ul>
        <li v-for="(item,index) in arr" >
          {{index+1}}. 数字有：{{item}}
        </li>
      </ul>
      <h2 v-for="(item,index) in objArr" >
        名字有：{{item.name}}
      </h2>
      <!-- 点击下传递的参数显示在控制台   -->
      <input type="button" value="点击" @click="change('李明','王华')" />
      <!--text：输入框； keyup：键盘事件，默认每输入一个触发一次；enter：回车时触发 -->
      <input type="text" @keyup.enter="sayHai">
       <!-- message的值和输入框里的值实现了同步 提示框中显示修改后的message值 -->
      <input type="text" v-model="message" @keyup.enter="getM">
      

    </div>
    <script src="./js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
            message:"警告",
          arr: [1, 2, 3],
          objArr: [{ name: 'jack' }, 
          { name: 'liMing' }],
        },
        methods: {
          add: function () {
            this.objArr.push({ name: '李华' })
          },
          remove: function () {
            this.objArr.shift()
          },
          change:function(p1,p2){
            // 显示在控制台  
            console.log(p1,p2);
          },
          sayHai:function(){
              alert("你好");
          },
          getM:function(){
              alert(this.message);
          }

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

（1）、v-for 列表循环展示数字

（2）、v-on 事件修饰 @keyup.enter="sayHai"

（3）、v-model 表单元素双向绑定，可以这表单赋值，也可以将表单值取出来

4、v-cloak 指令

解决网速慢时，vue 没有解析成功，页面上出现一些没有引入vue 的一些情况，如：{{}}

5、v-once 指令

获取初始值

6、 v-pre 指令

vue跳过不编译，提高了效率

7、自定义指令

调用的时间： 1、指令与元素成功绑定（自定义成功）2、指令所在的模板被从新解析时。

1、函数式的

写在Vue 实例里

directives:{

                big(element,binding){

                    element.style.color = 'red';

                    element.innerText = binding.value * 10;

                }

            }

<!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="./js/vue.js"></script>

</head>
<body>
    <div id="root">
        数字n: <h1 v-text="n"></h1>
        数字n变红: <h1 v-big="n"></h1><br/>
        <button @click="n++">n自增</button>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                n:1,
            },
            // 自定义指令-函数式 调用的时间：  1、指令与元素成功绑定（自定义成功） 
            // 2、指令所在的 模板 被从新解析时。
            // 这里自定义指令时 取v-changeRabig 时不能定义directive ？
            directives:{
                big(element,binding){
                    element.style.color = 'red';
                    element.innerText = binding.value * 10;
                }
            }
        })
    </script>
    
</body>
</html>

2、对象式的

获取焦点，拿父元素等；此时函数式的不能满足条件，需要对象式的

<!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="./js/vue.js"></script>

</head>
<body>
    <div id="root">

        <!-- 第一次刷新页面时 输入框自动聚焦 -->
        获取n: <h1 v-text="n"></h1>
        <button @click="n++" >n自增</button><br>
        <input type="text" v-fbind="n">
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                n:1,
            },
            
            directives:{

                // 自定义指令-对象式，里面常用的三种方法 bind、inserted、update 它们都有两种参数
                // 函数式 里面 没有 inserted() 

                fbind:{
                    // 指令与元素成功绑定时调用
                    bind(element,binding){
                        element.value = binding.value;

                        console.log("bind...")
                    },
                    // 指令所在元素被插入页面时调用
                    inserted(element,binding){
                        element.focus();
                        console.log("指令所在元素被插入页面")
                    },
                    // 指令所在模板被重新解析
                    update(element,binding) {
                        element.value = binding.value;
                        console.log("指令所在模板被重新解析")
                    },
                }
            }
        })
    </script>
    
</body>
</html>