Vue2基本语法

原创已于 2025-08-11 17:25:54 修改 · 836 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2025-08-11 16:25:06 首次发布

Vue 专栏收录该内容

13 篇文章

订阅专栏

文档地址：介绍 — Vue.js

1、属性绑定 v-bind

<body>
<!--view层，模板-->
<div id="app">
    {{msg}}
    <div v-bind:title="msg">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //element对象，绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            msg: "hello vue!"
        }
    });
    //viewModel层，当通过页面控制台直接vm.msg="你好！"改变值变化时，页面展示的值也会随之变化，这就是双向绑定
</script>
</body>

v-bind 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title属性和 Vue 实例的 msg属性保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 vm.msg= '新消息'，就会再一次看到这个绑定了 title属性的 HTML 已经进行了更新。

1、HTML页面写法

需要现在head中引入vue.js <script src="js/vue.js"></script>

1、完整语法

<a v-bind:href="url">vue官网</a>

<!-- 完整语法 -->
<!--view层，模板-->
<div id="app">
    <a v-bind:href="url">vue官网</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //element对象，绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            url: "https://cn.vuejs.org/"
        }
    });
    //viewModel层，当通过页面控制台直接vm.msg="你好！"改变值变化时，页面展示的值也会随之变化，这就是双向绑定
</script>
</body>

2、缩写

<a :href="url">vue官网</a>

<!-- 缩写 -->
<!--view层，模板-->
<div id="app">
    <a :href="url">vue官网</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //element对象，绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            url: "https://cn.vuejs.org/"
        }
    });
    //viewModel层，当通过页面控制台直接vm.msg="你好！"改变值变化时，页面展示的值也会随之变化，这就是双向绑定
</script>
</body>

3、动态参数缩写 (2.6.0+支持)

<a :[key]="url">vue官网</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<body>
<!--view层，模板-->
<div id="app">
    <a :[key]="url">vue官网</a>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //element对象，绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            key: "href", // 动态参数
            url: "https://cn.vuejs.org/"
        }
    });
    //viewModel层，当通过页面控制台直接vm.msg="你好！"改变值变化时，页面展示的值也会随之变化，这就是双向绑定
</script>
</body>

2、vue组件写法

<template>
  <div>
    <a :[key]="url">Vue官网</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 'href', // 动态决定绑定哪个属性，可以是任意
      url: 'https://cn.vuejs.org/'
    };
  }
};
</script>

2、事件绑定 v-on

1、HTML页面写法

1、完整语法

 <button v-on:click="handleClick">点我</button>

2、缩写

 <button @click="handleClick">点我</button>

3、动态绑定完整语法

<button v-on:[event]="handleClick">点我</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <button v-on:[event]="handleClick">点我</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            event: "click" // 动态参数
        },
        methods: {
            handleClick: function () {  //绑定方法
                alert('按钮被点击了！');
            }
        }
    });
</script>
</body>
</html>

4、动态绑定缩写

<button @[event]="handleClick">点我</button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <button @[event]="handleClick">点我</button>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            event:"click" // 动态参数
        },
        methods: {
            handleClick: function () {  //绑定方法
                alert('按钮被点击了！');
            }
        }
    });
</script>
</body>
</html>

2、动态绑定vue组件写法

<template>
  <div>
    <button @[event]="handleClick">点我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      event: 'click', // 可以是 'click'、'mouseover' 等
    };
  },
  methods: {
    handleClick() {
      alert('点击按钮了！');
    }
  }
};
</script>

3、逻辑判断 v-if、v-else、v-else-if

1、v-if

v-if 指令用于条件性地渲染一块内容。判断值是否成立，完成不同的动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p v-if="show">展示数据</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            show: false  //默认不展示。show = true 展示
        }
    });
</script>
</body>
</html>

2、v-else

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p v-if="show">展示数据1</p>
    <p v-else>展示数据2</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            show: true  //默认展示数据1。show = false 展示数据2
        }
    });
</script>
</body>
</html>

3、v-else-if (2.1.0 新增)

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p v-if="flag === 1">展示数据1</p>
    <p v-else-if="flag === 2">展示数据2</p>
    <p v-else-if="flag === 3">展示数据3</p>
    <p v-else>其他展示数据</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            flag: 0  /根据flag不同值展示不同数据
        }
    });
</script>
</body>
</html>

4、展示隐藏 v-show

根据条件展示元素的选项是 v-show 指令。用法大致和v-if一样；

但是不同的是：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 中的 display属性。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p v-show="flag">展示数据1</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            flag: false  //默认不展示。flag = true 展示，等同于css中的display:none
        }
    });
</script>
</body>
</html>

5、v-if和v-show对比

1、基本语法对比

指令	示例	说明
v-if	`<div v-if="isVisible">内容</div>`	条件为真时渲染元素，为假时销毁/不渲染
v-show	`<div v-show="isVisible">内容</div>`	始终渲染元素，通过 CSS `display` 控制显示/隐藏

2、核心区别对比

对比	v-if	v-show
原理	条件性渲染（条件为 false 时，元素不会被渲染到 DOM 中）如果条件从 false 变为 true，会创建并挂载元素；反之则销毁并移除 DOM 节点	始终渲染到 DOM，只是通过 CSS 的 `display: none` 控制是否显示
DOM 是否存在	条件为 `false` 时，元素不会存在于 DOM 中	条件为 `false` 时，元素依然在 DOM 中，只是被隐藏（display: none）
初始渲染开销	较低（条件为 false 时不渲染）	较高（无论条件如何，都会先渲染）
切换开销	较高（销毁/重建组件和 DOM）	较低（只是切换 CSS 属性）
适用场景	运行时条件很少改变，适合“一次性”条件判断	频繁切换显示/隐藏状态，比如 tab 切换、动画控制等
**是否支持 `<template>`**	✅ 支持（比如多个元素一起控制）	❌ 不支持（v-show 不能用于 `<template>` 标签）
与 v-else / v-else-if 搭配	✅ 支持	❌ 不支持
对组件生命周期影响	切换时触发组件的创建 / 销毁 / 挂载 / 卸载生命周期	不会触发组件销毁，只是显示/隐藏

6、循环 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p v-for="item in items">{{item.msg}}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            items: [
                { msg: 'java' },
                { msg: 'php' },
                { msg: 'c#' }
            ]
        }
    });
</script>
</body>
</html>

7、双向绑定 v-model（重点）

1、什么是 `v-model`？

**v-model 是 Vue 提供的用于实现双向数据绑定的指令**，它主要用于表单输入元素（如 input、textarea、select 等），让视图（UI）和数据（Model）自动同步。

简单说就是：在页面上输入内容，数据会自动更新；修改了数据，页面上的输入框也会自动变化，两者保持同步。

2、v-model 的本质

**v-model 是语法糖！它本质上是对 value 属性 + input 事件（或其他表单元素对应事件）的简写组合。**

3、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <!-- 输入框 -->
    <input v-model="msg" placeholder="请输入内容" />

    <!-- 显示输入的内容 -->
    <p>你输入的内容是：{{ msg }}</p>
</div>

<script>
    var vm = new Vue({
        el: "#app",  //绑定的对象
        // model层：数据
        data: {  //要赋予的数据
            msg: ''  // 双向绑定的数据
        }
    });
</script>
</body>
</html>

4、常见 v-model 使用场景

1. 文本框 / 输入框（双向绑定）

<input v-model="text" />
<p>输入的内容：{{ text }}</p>

<script>
export default {
  data() {
    return {
      text : '' // 输入的内容
    };
  }
};
</script>

2、多行文本域（textarea）

<textarea v-model="description"></textarea>
<p>{{ description }}</p>

<script>
export default {
  data() {
    return {
      description : '' // 输入的内容
    };
  }
};
</script>

3、复选框（Checkbox）

1、单个复选框（绑定布尔值）：

<input type="checkbox" v-model="isChecked" />
<p>是否选中：{{ isChecked }}</p>  //isChecked 是 true / false

<script>
export default {
  data() {
    return {
      isChecked : false // 选中的值
    };
  }
};
</script>

2、多个复选框（绑定到同一个数组，选中多个值）：

<input type="checkbox" value="Apple" v-model="fruits" /> Apple<br/>
<input type="checkbox" value="Banana" v-model="fruits" /> Banana<br/>
<input type="checkbox" value="Orange" v-model="fruits" /> Orange<br/>

<p>你选择了：{{ fruits }}</p>

<script>
export default {
  data() {
    return {
      fruits: [] // 选中的值会以数组形式存储
    };
  }
};
</script>

4、单选框（Radio）

<input type="radio" value="Male" v-model="gender" /> 男<br/>
<input type="radio" value="Female" v-model="gender" /> 女<br/>

<p>你选择的性别是：{{ gender }}</p>  //gender 的值会是 "Male" 或 "Female"


<script>
export default {
  data() {
    return {
      gender : '' // 选中的值
    };
  }
};
</script>

5、下拉选择框（Select）

1、单选：

<select v-model="selected">
  <option value="" disabled>--请选择--</option>
  <option value="A">选项 A</option>
  <option value="B">选项 B</option>
</select>

<p>你选择了：{{ selected }}</p>

<script>
export default {
  data() {
    return {
      selected : '' // 选中的值
    };
  }
};
</script>

2、多选（需要加 multiple，绑定数组）：

<select v-model="selectedItems" multiple>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<p>选中的项：{{ selectedItems }}</p>


<script>
export default {
  data() {
    return {
      selectedItems: [] // 选中的值会以数组形式存储
    };
  }
};
</script>

5、v-model 的修饰符

修饰符	说明	示例
**`.lazy`**	将 `input` 事件改为 `change` 事件（失去焦点或回车时才更新）	`v-model.lazy="text"`
**`.number`**	将用户输入自动转为 Number 类型（避免字符串）	`v-model.number="age"`
**`.trim`**	自动去除用户输入的首尾空格	`v-model.trim="username"`

<input v-model.lazy="msg" placeholder="失去焦点才更新" />
<p>{{ msg }}</p>

<input v-model.number="age" type="number" placeholder="输入数字" />
<p>数字类型：{{ typeof age }}</p>

<input v-model.trim="name" placeholder="自动去除首尾空格" />
<p>姓名：'{{ name }}'</p>