Vue基本语法篇（一）

最新推荐文章于 2025-03-06 22:51:49 发布

奈何故里无故人

最新推荐文章于 2025-03-06 22:51:49 发布

阅读量575

点赞数 1

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46910841/article/details/107832738

版权

本文介绍了Vue框架的基础知识，包括Vue的定义、基本语法如数据绑定、属性绑定、循环渲染、条件判断、事件处理和事件修饰符等。通过实例展示了Vue如何实现视图和数据的联动，帮助读者理解Vue的渐进式开发思想。

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

一、什么是Vue

Vue是一套用于构建用户界面的渐进式框架；

它只关注视图层，采用自底向上增量开发的设计；

它的目标是通过尽可能的简单API实现响应的数据绑定和组合的视图组件；

二、Vue基本语法

（注意Vue每次写完语法，都要保存网页才可以加载出来快捷键为Ctrl+s）

1、数据绑定

第一种数据绑定为一组花括号{{}}，但是这里一组指的是两个{}，为单向数据绑定。

网页图：

第二种数据绑定为v-text，v-html

网页图：

2、属性绑定

网页图：

2.1 绑定class


<template>
  <div id="app">
   <div v-bind:class="name"></div>

   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name:"car"
    }
  }
}
</script>

<style>
.car{
  width:150px;
  height:100px;
  border:1px solid greenyellow;
}
</style>

网页图

2.2 多个类进行绑定


<template>
  <div id="app">
   <!-- 绑定class -->
   <div v-bind:class="name"></div>
   <!-- 多个类进行绑定 -->
   <div v-bind:class="{'box1':t2,'box2':t1}"></div>
   

   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name:"car",
      t1:true,
      t2:false

    }
  }
}
</script>

<style>
.car{
  width:150px;
  height:100px;
  border:1px solid greenyellow
}
.box1{
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
.box2{
  width: 200px;
  height: 150px;
  border: 1px solid blue;
}

</style>

网页图：

2.3 样式绑定


<template>
  <div id="app">
   <!-- 样式绑定 -->
   <div v-bind:style="style"></div>
   <!-- 多个样式绑定 -->
   <div v-bind:style="{'width':w,'height':h,'backgroundColor':bgcolor}"></div>
   

   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      style:{
        width:"120px",
        height:"90px",
        border:"1px solid orange"
      },
      w:"123px",
      h:"66px",
      bgcolor:"cyan"

    }
  }
}
</script>

<style>

</style>

网页图：

注：v-bind可以缩写为：效果一样

<template>
  <div id="app">
   <!-- 样式绑定 -->
   <div v-bind:style="style"></div>
   <!-- 多个样式绑定 -->
   <div v-bind:style="{'width':w,'height':h,'backgroundColor':bgcolor}"></div>
   <!-- v-bind缩写为： -->
   <div :class="pdd"></div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      style:{
        width:"120px",
        height:"90px",
        border:"1px solid orange"
      },
      w:"123px",
      h:"66px",
      bgcolor:"cyan",
      pdd:"fat"
    }
  }
}
</script>

<style>
.fat{
  width: 180px;
  height: 150px;
  background-color: pink;
}
</style>

网页图：

2.4 对象值直接进行绑定

<template>
  <div id="app">
   <!-- 样式绑定 -->
   <div v-bind:style="style"></div>
   <!-- 多个样式绑定 -->
   <div v-bind:style="{'width':w,'height':h,'backgroundColor':bgcolor}"></div>
   <!-- v-bind缩写为： -->
   <div :class="pdd"></div>
   <!-- 对象值直接进行绑定 -->
   <h4>{{obj.name}}</h4>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      style:{
        width:"120px",
        height:"90px",
        border:"1px solid orange"
      },
      w:"123px",
      h:"66px",
      bgcolor:"cyan",
      pdd:"fat",
      obj:{
        name:"奈何故里无故人"
      }
    }
  }
}
</script>

<style>
.fat{
  width: 180px;
  height: 150px;
  background-color: pink;
}
</style>

网页图：

3、数据的循环渲染

<template>
  <div id="app">
   <!-- 数据的循环渲染 v-for    :key -->
   <ul>
     <li v-for="(item,index) in stu" :key="index">
       {{item.name+"-"+item.sex}}
     </li>
     
   </ul>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     stu:[
       {name:"张三",sex:"女"},
       {name:"李四",sex:"男"},
       {name:"王五",sex:"女"}
     ]
    }
  }
}
</script>

<style>

</style>

网页图：

3.1 嵌套遍历

<template>
  <div id="app">
   <!-- 数据的循环渲染 v-for    :key -->
   <!-- 嵌套遍历 -->
   <ul>
     <li v-for="(item,index) in stus" :key="index">
       <h5>{{item.name}}</h5>
       <h5>{{item.sex}}</h5>
       爱好：
       <span v-for="(it,cindex) in item.hobby" :key="cindex">
      {{it}}
       </span>    
     </li>
   </ul>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     stus:[
       {name:"张三",sex:"女",hobby:['踢毽子','跳皮筋']},
       {name:"李四",sex:"男",hobby:['打篮球','踢足球']},
       {name:"王五",sex:"女",hobby:['踢毽子','跳皮筋']}
     ]
    }
  }
}
</script>

<style>

</style>

网页图：

4、元素的显示隐藏

<template>
  <div id="app">
 <!-- 元素的显示隐藏 v-show -->
 <div class="list" v-show="isshow"></div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     isshow:false
    }
  }
}
</script>

<style>
.list{
  width: 200px;
  height:150px;
  background-color: powderblue;

}
</style>

网页图：

5、v-if、v-else

<template>
  <div id="app">
 <!-- v-if   v-else-->
 <p v-if="see">好久不见</p>
 <p v-else>是啊，好久不见</p>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     see:false
    }
  }
}
</script>

<style>

</style>

网页图：

6、数据双向

（表单元素标签可以使用）

<template>
  <div id="app">
 <!-- v-model 数据双向  表单元素标签可以使用-->
 <input v-model="text">
 <p>{{text}}</p>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     text:"疾风亦有归途"
    }
  }
}
</script>

<style>

</style>

网页图：

7、事件绑定

<template>
  <div id="app">
 <!--vue 事件绑定  v-on   事件执行的方法可带（），也可以不带，无影响-->
 <button v-on:click="change">点击切换</button>
  <div class="btn" v-show="display"></div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     display:true
    }
  },
  methods:{
    //这个里面写的是当前组件执行的方法区域
    change(){
      //在vue里this指向的是当前组件对象
     this.display=!this.display
    }
  } 
}
</script>

<style>
.btn{
  width:150px;
  height:100px;
  background-color: seagreen;
}
</style>

网页图：点击切换可以控制显示隐藏这里截图不太明显，就这样吧

8、事件执行的参数

<template>
  <div id="app">
 <!--vue 事件绑定  v-on   事件执行的方法可带（），也可以不带，无影响
 vue事件的执行参数    
 
 -->
 <button v-on:click="change">点击切换</button>
  <div class="btn" v-show="display"></div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     display:true
    }
  },
  methods:{
    //这个里面写的是当前组件执行的方法区域
    change(e){
      //在vue里this指向的是当前组件对象
     this.display=!this.display
     //获取当前点击对象，类似于原生js的事件参数
     console.log(e.target)
    }
  } 
}
</script>

<style>
.btn{
  width:150px;
  height:100px;
  background-color: seagreen;
}
</style>

网页图：

9、事件执行的修饰符

vue事件的修饰符是冒泡、捕获等等修饰符

9.1 事件的冒泡

下列事件的冒泡是本想触发button里的事件的，而div里的事件也被触发了，所以阻止事件的冒泡

<template>
  <div id="app">
<!-- vue事件的修饰符 冒泡，捕获等等修饰符
阻止冒泡的修饰符是  .stop
调整事件为捕获   .capture
 -->
<div v-on:click="maopao(1)" class="box">
  <button v-on:click.stop="maopao(2)" class="btn">按钮</button>
</div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     
    }
  },
  methods:{
    maopao(index){
     console.log(index)
    }

  }
 
}
</script>

<style>
.box{
  width: 180px;
  height:110px;
  border:1px solid #000;
}
.btn{
   border: 1px solid red;
}
</style>

网页图：

9.2 事件的捕获

让事件由外向里输出

<template>
  <div id="app">
<!-- vue事件的修饰符 冒泡，捕获等等修饰符
阻止冒泡的修饰符是  .stop
调整事件为捕获   .capture
 -->
<div v-on:click.capture="maopao(1)" class="box">
  <button v-on:click="maopao(2)" class="btn">按钮</button>
</div>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     
    }
  },
  methods:{
    maopao(index){
     console.log(index)
    }

  }
 
}
</script>

<style>
.box{
  width: 180px;
  height:110px;
  border:1px solid #000;
}
.btn{
   border: 1px solid red;
}
</style>

网页图：

9.3 阻止事件的默认行为以及绑定一次事件

阻止事件的默认行为即为鼠标移动无法将文字拖出阴影

一次事件即为只有一次

<template>
  <div id="app">
<!-- 阻止事件的默认行为 prevent
绑定一次事件 .once修饰符
-->
<div class ="box" v-on:mousemove.prevent>
  <span>文字</span>
</div>
<button v-on:click.once="sing">一次事件</button>
   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
     
    }
  },
  methods:{
    sing(){
    console.log("六月的雨")
    }
  }

 
}
</script>

<style>
.box{
  width: 180px;
  height:110px;
  border:1px solid #000;
}

</style>

网页图：图中文字选中拖不出阴影，一次事件在点击一次以后，无论再怎么点击都不会在输出。