Vue.js 学习指南

前言

在学习 Vue.js 之前，请确保你已经掌握了 HTML、CSS、JavaScript 和 AJAX。我们将使用 Visual Studio Code 作为开发工具，并建议安装 Live Server 插件来实现浏览器的实时预览。

你可以通过以下方式引入 Vue 和 Axios：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

提示：建议提前下载这些库，以便在没有网络的情况下仍能使用。

一、Vue 基础

1.1、Vue 基础示例

以下是一个基本的 Vue 示例代码：

<body>
   <div id="app">
      {{ message }}
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
      var app = new Vue({
         el: "#app",
         data: {
            message: "hello Vue!"
         }
      });
   </script>
</body>

效果如下：示例效果

a）HTML 部分

在 HTML 中使用 {{ }} 插值表达式，可以直接引入 data 中的数据。

b）Script 部分

在 Script 中创建 Vue 对象，其格式类似于 AJAX 的构造方式：

el（挂载点）：类似于 JavaScript 中的选择器，Vue 实例管理 el 选项命中的元素及其子元素。注意，el 不能是 <html> 和 <body>。
data（数据对象）：用于定义 Vue 中所需的数据，可以是数组、对象等，遵循 JavaScript 语法。

示例代码：

<body>
   <div id="container">
      <h1>{{ title }}</h1>
      <p>{{ desc.username }}</p>
      <p>{{ desc.password }}</p>
      <div>
         {{ arr[0] }} {{ arr[1] }} {{ arr[2] }}
      </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
      var app = new Vue({
         el: "#container",
         data: {
            title: "登录",
            desc: {
               username: "账号：cyk",
               password: "密码：111"
            },
            arr: ["性别", "年龄", "学号"]
         }
      });
   </script>
</body>

效果如下：效果图

二、本地应用

1.1、内容绑定，事件绑定

1.1.1、v-text 设置标签文本值

v-text 可以将 data 中的数据直接插入到 HTML 标签中，替换标签内的全部内容。还可以使用表达式进行字符串拼接。

示例代码：

<div id="app">
   <h1 v-text="message + '~'"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         message: "你好"
      }
   });
</script>

效果如下：效果图

1.1.2、v-html 设置标签的 innerHTML

v-html 可以将内容中的 HTML 解析为标签，而不是简单文本。

示例代码：

<div id="app">
   <h1 v-html="message"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         message: '<a href="https://www.baidu.com">百度</a>'
      }
   });
</script>

效果如下：效果图

1.1.3、v-on 为元素绑定事件

a）基本用法

v-on 为元素绑定事件，简写为 @。绑定的方法需要在 methods 属性中定义，并通过 this 访问数据。

常用事件如：

v-on:click="方法"：点击事件
@dblclick="方法"：双击事件

示例代码：

<div id="app">
   <input type="button" value="v-on指令" v-on:click="study">
   <input type="button" value="双击事件" @dblclick="changeFood">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         food: "鸡蛋炒米饭"
      },
      methods: {
         study: function () {
            alert("学习 Java!");
         },
         changeFood() {
            this.food += " 超级好吃！";
         }
      }
   });
</script>

效果如下： a）点击按钮点击按钮效果

b）双击按钮双击效果

b）事件修饰符

可以使用事件修饰符来添加额外的逻辑，如 .stop、.prevent 等。

.stop：阻止事件继续传播。
.prevent：阻止浏览器的默认行为。

c）按键修饰符

用于处理键盘事件。如 .enter、.delete 等。

示例代码：

<div id="app">
   <input type="button" value="按我有惊喜~" @click="doIt('java', 666)">
   <input type="text" @keyup.enter="doEnter">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      methods: {
         doIt: function (p1, p2) {
            alert("学习" + p1 + "真是" + p2);
         },
         doEnter: function () {
            alert("按下了回车");
         }
      }
   });
</script>

效果如下： a）点击按钮点击效果

b）输入框按 Enter 键回车效果

1.1.4、computed 计算属性

computed 用于在 Vue 实例中进行复杂计算，提升运算性能，结果会被缓存，避免不必要的重复计算。

示例代码：

<div id="app">
   <div>{{ mTest() }}</div>
   <div>{{ cTest }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         result: 0
      },
      methods: {
         mTest() {
            console.log("执行了 methods!");
            return 1;
         }
      },
      computed: {
         cTest() {
            console.log("执行了 computed");
            return 2;
         }
      }
   });
</script>

效果如下：计算属性效果

1.1.5、案例：实现一个计数器

需求：

点击 “加1” 按钮，计数器增加。
点击 “减1” 按钮，计数器减少。
计数器限制在 0 到 10。

代码示例：

<div id="app">
   <input type="button" value="减1" @click="sub">
   <input type="button" value="加1" @click="add">
   <input type="button" value="双击归零" @dblclick="ret">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         num: 0
      },
      methods: {
         sub() {
            if (this.num > 0) {
               this.num--;
            } else {
               alert("Reached minimum value!");
            }
         },
         add() {
            if (this.num < 10) {
               this.num++;
            } else {
               alert("Reached maximum value!");
            }
         },
         ret() {
            this.num = 0;
         }
      }
   });
</script>

效果如下：计数器效果

1.2、显示切换，属性绑定

1.2.1、v-show 元素的显示和隐藏

v-show 根据布尔值控制元素的显示状态，底层通过修改元素的 display 属性来实现。

示例代码：

<div id="app">
   <input type="button" value="图标展示开关" @click="show">
   <div v-show="isShow">我可以显示或隐藏</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         isShow: true
      },
      methods: {
         show() {
            this.isShow = !this.isShow;
         }
      }
   });
</script>

效果如下： v-show效果

1.2.2、v-if 切换显示和隐藏

v-if 根据布尔值决定元素是否添加到 DOM 树中，适合不频繁的显示和隐藏操作。

示例代码：

<div id="app">
   <input type="button" value="切换显示状态" @click="changeShow">
   <div v-if="isShow">我是 v-if！ 我出来啦！</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         isShow: false
      },
      methods: {
         changeShow() {
            this.isShow = !this.isShow;
         }
      }
   });
</script>

效果如下： v-if效果

1.2.3、v-bind 设置元素属性

v-bind 用来为元素绑定属性，例如 src、title、class 等。

示例代码：

<div id="app">
   <img :src="imgSrc">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         imgSrc: "../img/Vue.png"
      }
   });
</script>

效果如下： v-bind效果

1.2.4、案例：实现切换图片

需求：实现三张图片的切换效果，并根据当前图像显示相应的按钮。

示例代码：

<div id="app">
   <input type="button" value="上一张" @click="prev" v-show="index > 0">
   <img :src="imgSrc[index]">
   <input type="button" value="下一张" @click="next" v-show="index < 2">
</div>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         imgSrc: [
            require("../assets/docker.jpg"),
            require("../assets/vmware.png"),
            require("../assets/Vue.png")
         ],
         index: 0
      },
      methods: {
         prev() {
            this.index--;
         },
         next() {
            this.index++;
         }
      }
   });
</script>

效果示例：图片切换效果

1.3、列表循环，表单元素绑定

1.3.1、v-for 生成列表结构

v-for 用于根据数据生成列表结构，常与数组结合使用。

示例代码：

<div id="app">
   <h2 v-for="(name, index) in names" :key="index">{{ index + 1 }}. 姓名: {{ name }}</h2>
   <input type="button" value="添加姓名" @click="addName">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         names: ["张三", "李四", "王五"]
      },
      methods: {
         addName() {
            this.names.push("新名字");
         }
      }
   });
</script>

效果如下： v-for效果

1.3.2、v-model 双向绑定

v-model 用于快速设置和获取表单元素值，实现双向绑定。

示例代码：

<div id="app">
   <input type="text" v-model="message">
   <input type="button" value="显示" @click="showMessage">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         message: "Hello!"
      },
      methods: {
         showMessage() {
            alert(this.message);
         }
      }
   });
</script>

效果如下：双向绑定效果

1.3.3、案例：表白墙

需求：在墙上发布表白内容，清空数据，统计总数，删除指定内容。

示例代码：

<div id="app">
   <h1>表白墙</h1>
   <input type="text" v-model="myname">
   <input type="text" v-model="itName">
   <input type="text" v-model="msg" @keyup.enter="publish">
   <button @click="publish">发布</button>
   <button @click="clearAll">清空</button>
   <p>共有 {{ msgList.length }} 条数据</p>
   <div v-for="(message, index) in msgList" :key="index">
      {{ (index + 1) + '. ' + message }}
      <button @click="del(index)">删除</button>
   </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
   var app = new Vue({
      el: "#app",
      data: {
         myname: "",
         itName: "",
         msg: "",
         msgList: []
      },
      methods: {
         publish() {
            let tmpMsg = this.myname + " 对 " + this.itName + " 说: " + this.msg;
            this.msgList.push(tmpMsg);
         },
         del(toDelIndex) {
            this.msgList.splice(toDelIndex, 1);
         },
         clearAll() {
            this.msgList = [];
         }
      }
   });
</script>

效果如下：表白墙效果

原文地址：CSDN 原文链接

HuaShen

Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）

目录

Vue.js 学习指南

目录

前言

一、Vue 基础

1.1、Vue 基础示例

a）HTML 部分

b）Script 部分

二、本地应用

1.1、内容绑定，事件绑定

1.1.1、v-text 设置标签文本值

1.1.2、v-html 设置标签的 innerHTML

1.1.3、v-on 为元素绑定事件

a）基本用法

b）事件修饰符

c）按键修饰符

1.1.4、computed 计算属性

1.1.5、案例：实现一个计数器

1.2、显示切换，属性绑定

1.2.1、v-show 元素的显示和隐藏

1.2.2、v-if 切换显示和隐藏

1.2.3、v-bind 设置元素属性

1.2.4、案例：实现切换图片

1.3、列表循环，表单元素绑定

1.3.1、v-for 生成列表结构

1.3.2、v-model 双向绑定

1.3.3、案例：表白墙

打赏作者

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单