Vue学习Day2——本地应用

最新推荐文章于 2024-06-03 13:13:30 发布

阿波茨地额佛鸽

最新推荐文章于 2024-06-03 13:13:30 发布

阅读量95

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43199798/article/details/116534025

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

核心:

通过Vue实现常见的网页效果
学习Vue指令，以案例巩固知识点
Vue指令指的是，以v-开头的一组特殊语法

一、巩固基础语法学习，学习三个案例

根据案例中所涉及的知识点，可以将其分为三个部分
1、内容绑定，事件绑定
2、显示切换，属性绑定
3、列表循环，表单元素绑定

二、内容绑定，事件绑定

（一）v-text

设置标签的文本值（textContent）

方法一：

语法：

<div id="app">
  <h2 v-text="message"></h2>
</div>

var app=new Vue({
    el:"#app",
    data:{
      message:"Hello Vue!"
     }
   })

直接将message的值替换到h2的标签内部，但是这么做有一个缺点：message中有什么内容就会全部都被替换掉，如果我们只想要设置部分的内容，可以使用另外一种写法。
具体实例：
实例1：

<!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>v-test指令</title>
</head>
     <div id="app">
       <h2 v-text="message"></h2>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 message:"Hello Vue!!!",
             }
         
        })
     </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>v-test指令</title>
</head>
     <div id="app">
       <h2 v-text="message"></h2>
       <h2 v-text="info"></h2>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 message:"Hello Vue!!!",
                 info:"前端与移动教育部"
             }
         
        })
     </script>
</body>
</html>

运行效果：
在这里插入图片描述

方法二：（差值表达式）

使用两个大括号的方式{{ }}，在标签的内部进行设置，这种写法也叫做cha值表达式。使用这种写法，只有大括号内部的值被替换，其他部分的内容都会原封不动的被保留。如果想涉及到一些逻辑代码。
语法：

<div id="app">
  <h2 v-text="message"></h2>
  <h2 >深圳{{message}}</h2>
</div>

var app=new Vue({
    el:"#app",
    data:{
      message:"Hello Vue!"
     }
   })

具体实例：

<!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>v-test指令</title>
</head>
     <div id="app">
       <h2 v-text="message">深圳</h2>
       <h2 v-text="info">深圳</h2>
       <h2>{{message}}深圳</h2>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 message:"Hello Vue!!!",
                 info:"前端与移动教育部"
             }
         
        })
     </script>
</body>
</html>

运行效果：
在这里插入图片描述

如果想涉及到一些逻辑代码，还支持写表达式。
比如：字符串的拼接：拼接一个"!"
在插值表达式中，单引号和双引号都支持使用，如果两边用了双引号了，就要用单引号了。
语法：

<div id="app">
  <h2 v-text="message+'!'"></h2>
  <h2 >深圳{{message+'!'}}</h2>
</div>

具体实例：

<!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>v-test指令</title>
</head>
     <div id="app">
       <h2 v-text="message+'!'">深圳</h2>
       <h2 v-text="info+'!'">深圳</h2>
       <h2>{{message+'!'}}深圳</h2>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                 message:"Hello Vue!!!",
                 info:"前端与移动教育部"
             }
         
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
总结

v-text指令的作用是：设置标签的内容（textContent）
默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
内部支持写表达式

（二）v-text

设置标签的innerHTML
语法：

<div id="app">
  <p v-html="content"></p>
</div>

var app=new Vue({
    el:"#app",
    data:{
      //content:"Hello Vue!"  --和v-text效果没有区别
      content:"<a href='#'>Hello Vue!</a>"
     }
   })

具体实例：

<!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>v-html指令</title>
</head>
     <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                content:"Hello Vue!"
             }
         
        })
     </script>
</body>
</html>

运行效果：
在这里插入图片描述
运行效果发现：这样写v-text和v-html显示没有区别
具体实例：

<!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>v-html指令</title>
</head>
     <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
     </div>
<body>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                //content:"Hello Vue!"
                content:"<a href='https://www.baidu.com/'>Hello Vue!</a>"
             }
         
        })
     </script>
</body>
</html>

运行效果：
在这里插入图片描述
点击Hello Vue！，可进行页面跳转
从上面这个实例就看出v-text和v-html的区别了。
总结

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

（三）v-on

为元素绑定事件
语法：

<div id="app">
  <input type="button" value="事件绑定" v-on:事件名="方法">
  <!--点击事件-->
  <input type="button" value="事件绑定" v-on:click="dolt">
  <!--鼠标移动事件-->
  <input type="button" value="事件绑定" v-on:mouseenter="dolt">
  <!--双击事件-->
  <input type="button" value="事件绑定" v-on:dblclick="dolt">
  <input type="button" value="事件绑定" @dblclick="dolt">
</div>

var app=new Vue({
    el:"#app",
    methods:{
     doIt:funtion(){
       //逻辑
      }
     },
   })

具体实例1：

<!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>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(){
                   alert("做It");
               }
             },
        })
     </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>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(){
                   alert("做It");
               }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述

两种方式都可以，简写方式代码量少一点，使用频率更高一点。
具体实例3：

<!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>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(){
                   alert("做It");
               }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
双击“双击事件”按钮后：

具体实例4：

<!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>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  food:"西兰花炒蛋"
             },
             methods: {
               doIt:function(){
                   alert("做It");
               },
               changeFood:function(){
                  //console.log(this.food);
                  this.food+="好好吃！"
               }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
点几下西兰花蛋炒饭，就出现几个好好吃
总结

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

（四）实例：计数器

步骤分析：
1、data中定义数据：比如num
2、methods中添加两个方法：比如add（递增），sub（递减）
3、使用v-text将num设置给span标签
4、使用v-on将add,sub分别绑定给+，-按钮
5、累加的逻辑：小于10累加，否则提示
6、递减的逻辑：大于0递减，否则提示

 var app=new Vue({
             el:"#app",
             data:{
                  num:1
             },
             methods: {
               add:function(){},
               sub:function(){}
             },
        })

<div id="app">
   <button @click="sub"></button>
   <span>{{num}}</span>
   <button @click="add"></button>
</div>

具体代码：

<!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>
    <div id="app">
        <button   @click="sub">
        -
        </button>
        <span>{{num}}</span>
        <button  type="+" @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(){
                  //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>

运行结果：
在这里插入图片描述

总结

创建Vue示例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事件，简写为@
方法中通过this，关键字获取data中的数据
v-text指令的作用是：设置元素的文本值，简写为{{}}
v-html指令的作用是：设置元素的innerHTML

二、显示切换，属性绑定

（一）v-show

根据表达值的真假，切换元素的显示和隐藏：
true：显示
false：隐藏
语法：

<div id="app">
      <!-- src="地址" -->
      <img src="地址" v-show="true">
      <img src="地址" v-show="isShow">
      <img src="地址" v-show="age>=18">
    </div>

 var app=new Vue({
             el:"#app",
             data:{
                  isShow:false,
                  age:16
             }
        })

具体实例1：

<!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>v-show指令</title>
</head>
<body>
    <div id="app">
      <!-- src="地址" -->
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="true">
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="isShow">
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="age>=18">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  isShow:false,
                  age:16
             }
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
本来显示3张照片，但是后两张为false，隐藏了。
具体实例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>v-show指令</title>
</head>
<body>
    <div id="app">
      <!-- src="地址" -->
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="isShow">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  isShow:false,
                  age:16
             },
             methods:{
                 changeIsShow:function(){
                     this.isShow=!this.isShow;
                 }
             }
        })
     </script>
</body>
</html>

运行结果：

点击按钮后：
在这里插入图片描述
具体实例3：

<!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>v-show指令</title>
</head>
<body>
    <div id="app">
      <!-- src="地址" -->
      <input type="button" value="切换显示状态" @click="changeIsShow">
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="isShow">
      <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg" v-show="age>=18">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  isShow:false,
                  age:18
             },
             methods:{
                 changeIsShow:function(){
                     this.isShow=!this.isShow;
                 }
             }
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
点击按钮后：

总是显示的是逻辑是age>=18的那张图片
总结

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

（二）v-if

根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）
语法：

<div id="app">
        <p v-if="true">我是一个p标签</p>
        <p v-if="isShow">我是一个p标签</p>
        <p v-if="表达式">我是一个p标签</p>
    </div>

var app=new Vue({
             el:"#app",
             data:{
                isShow:"false"
             }
        })

具体实例1：

<!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>v-if指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">我是一个p标签</p>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                isShow:false
             },
             methods:{
                 toggleIsShow:function(){
                     this.isShow=! this.isShow;
                 }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
点击按钮后：

具体实例2：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>v-if指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">我是一个p标签</p>
        <p v-show="isShow">我是一个p标签-v-show修饰</p>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                isShow:false
             },
             methods:{
                 toggleIsShow:function(){
                     this.isShow=! this.isShow;
                 }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
点击按钮后：

区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置dom元素的display样式，block为显示，none为隐藏；频繁切换的元素用v-show，反之用v-if。

具体实例3:表达式

<!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>v-if指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">我是一个p标签</p>
        <p v-show="isShow">我是一个p标签-v-show修饰</p>
        <h2 v-if=" temperature>=35">热死啦</h2>
    </div>
     <!-- 开发环境版本，包含了有帮temperature助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                isShow:false,
                temperature:40
             },
             methods:{
                 toggleIsShow:function(){
                     this.isShow=! this.isShow;
                 }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
总结

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

（三）v-bind

设置元素的属性（比如：src,title,class）
v-bind:属性名=表达式
语法：

<div id="app">
       <!-- 第一种写法：src属性 -->
        <img v-bind:src="imgSrc">
        <!-- 第二种写法：src属性简写 -->
        <img :src="imgSrc">
        
        <!--title属性-->
        <img v-bind:title=" imgTitle+'!!!">
        
        <!-- 第一种写法 -->
        <img v-bind:class="active?'active':''">
        <!-- 第二种写法 效果同第一种相同-->
        <img v-bind:class="{active:?isActive}">
    </div>

var app=new Vue({
             el:"#app",
             data:{
                  imgSrc:"图片地址",
                  imgTitle:"Hello Vue!",
                  isActive:false
             }
        })

具体实例1：

<!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>v-bind指令</title>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  imgSrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg",
                  imgTitle:"Hello Vue!",
                  isActive:false
             }
        })
     </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>v-bind指令</title>
</head>
<body>
    <div id="app">
        <!-- 第一种写法 -->
        <img v-bind:src="imgSrc">
        <!-- 第二种写法：简写，更为常用  -->
        <img :src="imgSrc">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  imgSrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg",
                  imgTitle:"Hello Vue!",
                  isActive:false
             }
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
具体实例3：

<!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>v-bind指令</title>
</head>
<body>
    <div id="app">
        <!-- 第一种写法 -->
        <img v-bind:src="imgSrc" >
        <!-- 第二种写法：简写，更为常用 -->
        <img :src="imgSrc" :title="imgTitle+'!!!'">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  imgSrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg",
                  imgTitle:"Hello Vue!",
                  isActive:false
             }
        })
     </script>
</body>
</html>

运行效果：
第一张图片没有加title,所以没有效果，第二张图片加了title,所以有效果，具体效果见第二张图片的中的白色框中的内容。
在这里插入图片描述

在这里插入图片描述
先暂时跳过

三、列表循环，表单元素绑定

（一）v-for

根据数据生成列表结构
语法

<div id="app">
       <ul>
           <li v-for="(item,index)in arr" :title="item">
            {{index}}{{item}}
           </li>
           <li v-for="(item,index)in objArr">
            {{item.name}}
           </li>
       </ul>
    </div>

item是元素名称，可以任意起

var app=new Vue({
             el:"#app",
             data:{
                  arr:[1,2,3,4,5],
                  objArr:[
                      {name:"jack"},
                      {name:"rose"}
                  ]
             },
        })

具体实例1：

<!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>v-for指令</title>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="item in arr" >
            大城市：{{item}}
           </li>
           <!-- <li v-for="(item,index)in objArr">
            {{item.name}}
           </li> -->
       </ul>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  arr:["北京","上海","广州","深圳"],
                
             },
        })
     </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>v-for指令</title>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="(item,index) in arr">
            {{index}}大城市：{{item}}
           </li>
       </ul>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  arr:["北京","上海","广州","深圳"]
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
具体实例3：index+1

<!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>v-for指令</title>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="(item,index) in arr">
            {{index+1}}大城市：{{item}}
           </li>
       </ul>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  arr:["北京","上海","广州","深圳"]
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
具体实例4：

<!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>v-for指令</title>
</head>
<body>
    <div id="app">
       <ul>
           <li v-for="(item,index) in arr">
            {{index+1}}大城市：{{item}}
           </li>
       </ul>
       <h2 v-for="item in vegetables" v-bind:title="item.name">
           {{item.name}}
       </h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  arr:["北京","上海","广州","深圳"],
                  vegetables:[
                      {name:"西兰花炒蛋"},
                      {name:"蛋炒西兰花"}
                  ]
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
具体实例5：

<!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>v-for指令</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 in vegetables" v-bind:title="item.name">
           {{item.name}}
       </h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                  arr:["北京","上海","广州","深圳"],
                  vegetables:[
                      {name:"西兰花炒蛋"},
                      {name:"蛋炒西兰花"}
                  ]
             },
             methods:{
                 add:function(){
                     this.vegetables.push({name:"花菜炒蛋"});
                 },
                 remove:function(){
                    this.vegetables.shift();
                 }
             }
        })
     </script>
</body>
</html>

在这里插入图片描述
添加数据：

移除数据：

总结

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

（二）v-on补充

传递自定义参数，事件修饰符
语法：

<div id="app">
        <input type="button" @click="doIt(p1,p2)"/>
        <input type="text" @keyup.enter="sayHi">
    </div>

var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(p1,p2){},
               sayHi:function(){}
             },
        })

具体实例1：

<!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>v-on指令补充</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(p1,p2){
                  console.log(p1);
                  console.log(p2);
               },
        })
     </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>v-on指令补充</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             methods: {
               doIt:function(p1,p2){
                  console.log(p1);
                  console.log(p2);
               },
               sayHi:function(){
                  alert("吃了没");
               }
             },
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
.enter是“回车”（事件修饰符）
总结

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

（三）v-model

获取和设置表单元素的值（双向数据绑定）
具体实例1：

<!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>v-modle指令</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message"/>
        <h2>{{message}}</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                message:"Hello Vue!"
             },
        })
     </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>v-modle指令</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                message:"Hello Vue!"
             },
             methods:{
                 getM:function(){
                     alert(this.message);
                 }
             }
        })
     </script>
</body>
</html>

运行结果：
文本框输入后，点击回车
在这里插入图片描述
当你改变了表单元素的值，message值也同步改变。
具体实例3：

<!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>v-modle指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message"  @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script>
         var app=new Vue({
             el:"#app",
             data:{
                message:"Hello Vue!"
             },
             methods:{
                 getM:function(){
                     alert(this.message);
                 },
                 setM:function(){
                     this.message="继续努力"
                 }
             }
        })
     </script>
</body>
</html>

运行结果：
在这里插入图片描述
点击“修改message”按钮后，

总结

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<—>表单元素的值

阿波茨地额佛鸽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习Day2——本地应用

核心:通过Vue实现常见的网页效果学习Vue指令，以案例巩固知识点Vue指令指的是，以v-开头的一组特殊语法一、巩固基础语法学习，学习三个案例根据案例中所涉及的知识点，可以将其分为三个部分1、内容绑定，事件绑定2、显示切换，属性绑定3、列表循环，表单元素绑定二、内容绑定，事件绑定（一）v-text设置标签的文本值（textContent）方法一：语法：<div id="app"> <h2 v-text="message"></h2>
复制链接

扫一扫