Vue 框架 学习--1、常见的基本指令以及语法

本文详细介绍了Vue.js中五个核心指令的功能与用法,包括v-bind用于动态绑定属性,v-for实现列表渲染,v-if控制元素的条件性显示,v-model实现表单输入的双向数据绑定,以及v-on绑定事件监听器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 前言,此文为vue初学者提供技术总结,所有代码都需要vue.js支持,或者通过cdn方法引入

一、Vue框架中的基本指令

1、v-bind

v-bind是动态绑定数据的指令,例如

<a v-bind:href="url">...</a>

那么,我就可以通过vue修改url的值从而达到切换不同href的目的。

<script>

new vue({

    el:(你的div的id),

    data:function(){

return{

    url:'www.csdn.com'

}

}

})

</script>

2、v-for

v-for循环的与大致为 x in y,例如

  <div id="box">
      <ul>
          <!--ng-repeat-->
          <li v-for="item in arr">   //这里的item是形参可以进行修改
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
          </li>
      </ul>
  </div>
 <script type="text/javascript">
     new Vue({
         el:'#box',
         data(){
             return{
 //                arr:['module','views','controlle','aaaaa']
                 arr:[
                     {"name":"xiaohong1","age":12},
                     {"name":"xiaohong2","age":12},
                     {"name":"xiaohong3","age":12},
                     {"name":"xiaohong4","age":12}
                 ]
             }
         }
     })
 </script>

3、v-if

v-if与v-show的不同之处就是v-if是通过vue中的参数觉得是否插入该元素,二v-show则为是否展示该元素

<p v-if="seen">现在你看到我了</p>
<p v-show="seen">现在你看到我了</p>

在seen为false时,源代码中不存在

<p v-if="seen">现在你看到我了</p>

4、v-model

v-model是极为重要的指令,他与v-bind有些相似,但他是双向的,例如

<template>
<div class="PI">
<form id="personal_info">
    <ul>
        <li><span>姓名:</span><input v-model:value="perName"></li>
        <li><span>邮件:</span><input v-model:value="perEmail"></li>
        <li><span>电话:</span><input v-model:value="perPhone"></li>
        <li><span>即时通讯工具:</span><input v-model:value="perComun"></li>
        <li><span>网站:</span><input v-model:value="perWeb"></li>
    </ul>
    <ul>
        <li><span>职位:</span><input v-model:value="perJob"></li>
        <li><span>部门:</span><input v-model:value="perDepatment"></li>
        <li><span>位置:</span><input v-model:value="perPosition"></li>
    </ul>
    <button v-on:click="postPI" class="PIbutton"><p>修改个人信息</p></button>
</form>
</div>
</template>
  
<script> 
export default{
    name:'PI',
    data:function(){
        return{
            perName:'aaa',
            perEmail:"aaaaa@qq.com",
            perPhone:'131aaaaaaaa7',
            perComun:'5aaaaaaaaa8',
            perWeb:'null',
            perJob:'student',
            perDepatment:'信息学院',
            perPosition:'aaaa',

        }
    },
    methods:{
        postPI:function(){
            if(this.perName==''){
                return alert("姓名不得为空");
            }
            if(this.perEmail==''){
                return alert("邮箱不得为空");
            }
            if(this.perPhone==''){
                return alert("电话不得为空");
            }
            if(this.perComun==''){
                return alert("即时通讯工具不得为空");
            }
            if(this.perWeb==''){
                return alert("网站不得为空");
            }
            if(this.perJob==''){
                return alert("职位不得为空");
            }
            if(this.perDepatment==''){
                return alert("部门不得为空");
            }
            if(this.perPosition==''){
                return alert("位置不得为空");
            }
            var data = new FormData(document.getElementById('personal_info'));
            
        }
    }
}
</script> 

我在网页中改变input中的值,vue中的值也会改变,从而可以实现实时判断input中的值来达到某些效果

5、v-on

v-on为事件定义的指令,在上面的例子中定义了v-on:click="postPI',那我就可以在vue中定义postPI的具体方法。

当然也可以是v-on:mouseover等等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值