Vue的基本语法

最新推荐文章于 2025-06-15 09:55:55 发布

cssl-虞老师

最新推荐文章于 2025-06-15 09:55:55 发布

阅读量1k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： VUE入门文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/shark1978/article/details/135600883

VUE入门专栏收录该内容

16 篇文章

订阅专栏

本文围绕Vue页面开发展开，介绍了前置准备，需在script、style、template标签中写入相应代码。还阐述了数据绑定方式，如插值运算符、v-html、v-model等，以及属性绑定v-bind和事件绑定v-on的使用方法，包括完整语法和缩写形式。

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

1.前置准备

在vue页面的 script 标签中写入

export default {
       name: 'Test1',
       data () {
       return {
       key: '测试1--OK',
           ins: "<p style='color:red;'>welcome</p>",
           num1: 20,
           colorShow:'blue',
           times: '2023-06-01 23:23:23',
           msg: 'welcome to china'
       }
       }

}

在 vue页面的 style 标签中写入

   .red{
       background-color: red;
   }

   .blue{
       background-color: blue;
   }

在vue页面的 template 标签中写入

</div>

2.插值运算符 {{ }}

vue 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

比如：在 class='main' 的 div 中加入

表示把 data 中的 key 和 ins 数据绑定到页面上。

结果如下：

注意：{{ }} 并不会考虑 html 的语法的效果只是显示纯文本。

3. v-html 会显示 html语法对应的效果

比如：在 class='main' 的 div 中加入

结果如下：

4. 双向绑定： v-model

修饰符.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：也就是敲 enter 键才触发改变

比如：在 class='main' 的 div 中加入

可以让 data 中的msg 属性随着文本的输入改变而改变

5.v-bind用于绑定属性和数据

v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id == :id

比如：在 class='main' 的 div 中加入

表示显示蓝色的数字，因为 :class="colorShow" 表示 class='blue'

6. v-on 用于绑定触发事件

完整事件处理语法

缩写

比如：在 class='main' 的 div 中加入

在 script 标签中加入：

methods: {
           changeBg(){
               if( this.colorShow == 'blue'){
                   this.colorShow = 'red';
               }else{
                   this.colorShow = 'blue';
               }
           }
       }

表示：添加一个按钮 ‘改变背景’，绑定1个鼠标单击事件，点一下变红再点一下变蓝。