练习 | vue12个指令600次练习

已于 2022-10-05 22:59:52 修改
阅读量198 收藏 1
点赞数
分类专栏： 练习 文章标签： vue.js
于 2022-01-12 18:21:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A123ppleQueen/article/details/122457958
版权

单项练习v-on

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>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
   <h2 @click="add">{{number}}</h2>
 </div>
 <script>
   new Vue({
     el:"#app",
     data:{
       number:4,
     },
     methods:{
     add:function(){
       this.number++
     }
     }
   })
 </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>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
   <h2 @click="add(80)">{{number}}</h2>
 </div>
 <script>
   new Vue({
     el:"#app",
     data:{
       number:4,
     },
     methods:{
     add:function(abc){
       this.number++
       console.log(abc);
     }
     }
   })
 </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>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
   <h2 @click="add($event)">{{number}}</h2>
 </div>
 <script>
   new Vue({
     el:"#app",
     data:{
       number:4,
     },
     methods:{
     add:function(){
       this.number++
       console.log(event);
     }
     }
   })
 </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>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
   <cpn></cpn>
   <cpn><span slot="center">我要暴富</span></cpn>
  </div>

  <template id="cpn">
    <div>
      <slot name="left"><span>左边</span></slot>
      <slot name="center"><span>中间</span></slot>
      <slot name="right"><span>右边</span></slot>
    </div>
  </template>

  <script>
    const cpn={
    template:"#cpn"
    }

    // 具名插槽
    new Vue({
      el:"#app",
      data:{

      },
      components:{
        cpn
      }
    })
  </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>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
  <cpn></cpn>
  <cpn>
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}}******</span>
    </template>
  </cpn>
  </div>

  <template id="cpn">
    <div>
      <slot :data="Language">
        <ul>
          <li v-for="item in Language">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

  <script>
    new Vue({
      el:"#app",
      data:{},
      components:{
        cpn:{
          template:"#cpn",
        data(){
          return{
            Language:["html","css","js","vue"]
          }
        }
        }
      }
    })
  </script>
</body>
</html>

6.作用域插槽具名插槽混合练习-----重点注意这些例子

<!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>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
  <h2 :data="message" v-for="item in message">{{item}}</h2>
  <h3 v-for="item in message">{{item}}</h3>
  <cpn></cpn>
  <cpn><span slot="left">你没有我可爱</span></cpn>
  <cpn>
    <template slot-scope="slot">
      <span v-for="item in slot.data">{{item}}</span>
    </template>
  </cpn>
  </div>
  <template id="cpn">
    <div>
      <slot name="left"><span>我最可爱</span></slot>
      <slot :data="cute">
        <ul>
          <li v-for="item in cute">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:["语文","数学","英语"]
      },
      components:{
        cpn:{
          template:"#cpn",
          data(){
            return{
              cute:["html","css","vue"]
            }
          }
        }
      }
    })
  </script>
</body>
</html>

v-bind

7.基础属性练习----不懂：data=cool的作用

<!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>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
  <a :href="ahref">新闻联播</a>
  <h2 :data="message">吃早饭了吗</h2>
  <h2 :data="cool" v-for="item in cool">{{item}}</h2>
  <h3  v-for="item in cool">{{item}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"你好",
        ahref:"http:www.baidu.com",
        cool:["cb","cv","cg"]
      }
    })
  </script>
</body>
</html>

8.v-bind动态绑定class样式对象语法-------:class=就是把新建立的属性添加到了class上

<!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>
  <script src="vue.js"></script>
  <style>
    .gree{
      color: green;
    }
    .gol{
      color:gold;
    }
  </style>
</head>
<body>
  <div id="app">
  <h2 :class="getClasses()">{{message}}</h2>
  <button @click="btnClick">按钮</button>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"吃早餐了啦",
        istrue:true,
      },
      methods:{
        btnClick(){
          this.istrue = !this.istrue
        },
        getClasses(){
          return {gree:true,gol:this.istrue}
        }
      }
    })
  </script>
</body>
</html>

9..v-bind动态绑定class数组语法

<!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>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
  <h2 >{{message}}</h2>
  <h2 :class="[active,dean]">{{message}}</h2>
  <h2 :class="getClasses()">{{message}}</h2>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"吃早餐了啦",
        active:"111",
        dean:"2222",
      },
      methods:{
        getClasses(){
          return [this.active,this.dean]
        }
      }
    })
  </script>
</body>
</html>

10.v-bind动态绑定style语法--对象 

<!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>
  <script src="vue.js"></script>
  <style>
    .active{
      color:red
    }
    .dean{
      color:green
    }
  </style>
</head>
<body>
  <div id="app">
  <h2 :style="{color:'green'}">{{message}}</h2>
  <p :style="{color:ccolor,fontsize:sizes+'px'}">{{message}}</p>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"我想要自己有很多金钱",
        sizes:64,
        ccolor:"red"
      },
      methods:{
      }
    })
  </script>
</body>
</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>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="getclasses()">{{message}}</h2>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"social",
        ccolor:"red",
        size:64,
      },
      methods:{
        getclasses(){
          return {color:this.ccolor,fontSize:this.size+"px"}
        }
      }
    })
  </script>
</body>
</html>

 11.v-bind动态绑定style数组语法

<!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>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <h2 :style="[style1,style2]">{{message}}</h2>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        message:"social",
        style1:{backgroundColor:"red"},
        style2:{fontsize:"64px"}
      },
    })
  </script>
</body>
</html>

12 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>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    输入的文本：<input type="text" v-model="message" value="hello">{{message}}
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        message:""
      }
    })
  </script>
</body>
</html>

 13 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>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
   单复选框：
   <input type="checkbox" id="checkbox" v-model="checked">
   &nbsp;&nbsp;
   <label for="checkbox">{{checked}}</label>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
      checked:false
      }
    })
  </script>
</body>
</html>

 14 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>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
   多复选框：
   <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
   &nbsp;&nbsp;
   <label for="jack">jack</label>

   <input type="checkbox" id="join" value="join" v-model="checkedNames">
   &nbsp;&nbsp;
   <label for="join">join</label>

   <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
   &nbsp;&nbsp;
   <label for="mike">mike</label>
   
   <span>选中的值{{checkedNames}}</span>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
      checkedNames:[]
      }
    })
  </script>
</body>
</html>

15. 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>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
   单选框按钮
   <input type="radio" id="one" value="One" v-model="picked">
   <label for="one">One</label>

   <input type="radio" id="two" value="Two" v-model="picked">
   <label for="two">Two</label>
   <br/>
   <span>选中的值{{picked}}</span>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
      picked:'Two'
      }
    })
  </script>
</body>
</html>

16 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>Document</title>
  <!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
   下拉框：
   <select v-model="pan">
    <option value="" disabled>----请选择------</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
   </select>
   <span>value:{{pan}}</span>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
      pan:"A"
      }
    })
  </script>
</body>
</html>

综合练习

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>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
 <div id="app">
   <h2 v-for="item in gh">{{item}}</h2>
   <button @click="scor">班上成绩高于79的有</button>
 </div>
 <script>
   new Vue({
     el:"#app",
     data:{
       math:[79,80,99,100],
       gh:null
     },
     methods:{
       scor:function(){
       this.gh=this.math.slice(1,4)
       }
     }
   })
 </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>Document</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
   <select v-model="model1" style="width:200px">
     <option v-for="item in citylist" :value="item.value" :key="item.value">{{item.value}}</option>
   </select>
   <select v-model="model2" style="width:200px">
    <option v-for="item in citylist" :value="item.eat" :key="item.eat">{{item.eat}}</option>
  </select>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
   citylist:[
    { value:"北京",
      eat:"hot"
    }, 
    { value:"天津",
      eat:"salty"
    }, 
    {value:"上海",
      eat:"sweet"
    }, 
    {value:"长沙",
      eat:"bitter"
    }, 
   ],
   model1:"",
   model2:"",
      }
    })
  </script>
</body>
</html>

一个练习用的vue网站
08-10
在"一个练习用的vue网站"项目中，我们可以看到它主要运用了Vue 2.0的核心技术，包括组件化、响应式数据绑定、虚拟DOM以及路由管理等。 1. **Vue 2.0核心概念**： - **组件化**：Vue的核心之一就是组件系统，允许...
Vue基础指令练习
marvintian518的博客
12-09 322
基础指令练习项目
vue指令练习
jinqianwang的博客
09-20 317
shopcar  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;scr
VUE 快速上手与基础指令（内附详细案例）
最新发布
HHX_01的博客
10-18 2764
前言 一、vue快速上手 1. vue是什么 2. 创建一个vue实例 3. 插值表达式 4. vue的响应式特性 5. 开发者工具安装 二、vue指令 1. v-html 2. v-if 和 v-show 3. v-else 和 v-else-if 4. v-on 5. v-bind 6. 案例-波仔的学习之
Vue练习题（带解析）
qq_60245590的博客
06-11 9678
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
Vue.js3.0练习题
CXLYYDS1124的博客
08-09 584
这是给各位分享的一点vue3的基础题目，后续会继续更新
VUE组件练习：VUE.rar
11-30
在"VUE.rar"这个压缩包中，我们有两个关键文件：vue.js 和 VUE08，它们分别代表Vue.js的核心库文件和一个可能是第八个练习的Vue组件。 首先，让我们深入了解Vue.js的核心特性： 1. **组件化**：Vue.js 的核心理念...
前端工程师--vue练习小项目
09-25
这个"前端工程师--vue练习小项目"旨在帮助初学者巩固Vue的基础知识，包括组件化开发、数据绑定、指令、生命周期等核心概念。在这个项目中，你可以看到两个实际的应用场景：网页记事本和网页天气预报，这些都是基于...
Vue小练习文章配套代码
01-20
这个“Vue小练习文章配套代码”应该是包含了一些与Vue.js相关的练习项目，旨在帮助学习者加深对Vue.js的理解和应用。 在前端开发中，Vue.js作为轻量级的框架，它提供了组件化开发模式，使得代码结构清晰，可复用性...
简单vue框架练习项目
10-08
本项目"简单vue框架练习项目"旨在帮助初学者理解和掌握Vue的基本概念和用法。 1. **安装与初始化** 在开始Vue项目之前，你需要先安装Node.js环境。然后，通过npm（Node Package Manager）全局安装Vue CLI（命令行...
按照vue1的官方教程练习的几十个demo
08-12
按照vue1的官方教程练习的几十个demo。
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
Vue练习题
subsistent的博客
03-25 742
2)通过接口代理的方式，在vue项目中创建一个vue.config.js，导入一个(__2__)，并配置里面的(__3__)选项即可。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。在webpack 4.x中，默认会将 src/index.js 作为默认的打包入口js文件，默认会将dist/main.js 作为默认的打包输出js文件，如果不想使用默认的入口/出口js文件我们如何设置？指令的参数可以是动态的。
Vue基础练习网站推荐
weixin_35751194的博客
01-07 723
好的，这里推荐几个 Vue 基础练习的网站： Vue.js 官网：https://cn.vuejs.org/ Vue.js 中文文档：https://vuejs.org.cn/ Vue.js 实战教程：https://www.vuemastery.com/courses/intro-to-vue-js/ Vue.js 中文社区：https://www.vue-js.com/ 这些网站都提供了大...
【vue指令的区别】
m0_72815229的博客
11-02 175
【代码】【vue指令的区别】
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
HushPlot的博客
11-04 762
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
Vue联系作业
PanHanJia的博客
09-19 416
1、总结一下v-text和v-html和插值表达式的差别 插值表达式——{{}} 语法为： <标签名>其他内容{{ 要显示的m中属性值 }}</标签名> 插值表达式写在标签内容中，不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。 v-text 语法为： <标签名 v-text=“要显示的m中属性值”>其他内容</标签名> v-...
vue添加答题功能
梧桐芊羽的博客
08-18 5295
前段时间项目要求添加一个答题功能，所以答题之前，要求创建答题题库。网上找了许多关于答题功能，最终，形成如下图所示答题要求，但适用于单选题和多选题，填空题不适用。 1.点击【新增答题类型】，创建答题选项，此处答题选项个数做了限制，不能超过8个。 2.根据正确答案选项个数决定该道题是否为多选题，若正确答案只有一个即为单选题，否则是多选题 3.可以根据需要删除对应的答题选项，添加新答题类型 本次答题选项的删除添加是个人最初比较头疼的地方。比如ABCD四个选项，删除c选项后，点击【新增答题类型】选项按钮，则默认创
Vue面试题：30道含答案和代码示例的练习题
三拾的博客
05-05 1629
这里使用v-model指令将用户输入的内容绑定到Vue实例的message属性上，然后使用v-on指令监听键盘输入事件，当用户按下“Enter”键时调用Vue实例的sendMessage方法。v-model指令会在表单元素上创建一个监听器，在用户输入时实时更新Vue实例的数据，并且在Vue实例数据变化时更新表单元素的值。Vue组件是可复用的Vue实例，具有自己的模板、状态和行为。mixins可以将多个组件之间的共享功能抽离出来，形成一个混入对象，在组件中引入该混入对象即可获得该对象的所有属性和方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值