（二）Vue本地应用——快速入门Vue

最新推荐文章于 2024-08-18 20:50:56 发布

xyxwz_

最新推荐文章于 2024-08-18 20:50:56 发布

阅读量732

点赞数

文章标签： vue javascript html

本文链接：https://blog.csdn.net/weixin_45189258/article/details/118438641

版权

本文详细介绍了Vue的本地应用开发，涵盖内容绑定、事件绑定、显示切换、属性绑定、列表循环和表单元素绑定。通过v-text、v-html、v-on、v-show、v-if、v-bind、v-for、v-model等指令，结合计数器、图片切换、小黑记事本等案例，深入理解Vue指令的使用，旨在帮助读者巩固Vue基础知识并提升实践能力。

摘要由CSDN通过智能技术生成

前言

学习了vue基础，已经可以把一个基本的项目跑起来，本章开始学习本地应用，本章核心是用vue开发网页效果，效果不同于早期基于Dom元素的外部开发（获取元素，操纵他们）。在vue中，我们使用的是一系列v-开头的特殊语法来干这件事儿，比如1.v-text，v-html，v-on基础。2.v-show，v-if，v-bind。3.v-for，v-on补充，v-model，他们有一个统称叫做“Vue指令”。
为了巩固语法的学习，穿插三个案例，阶段性的巩固所学的知识，根据案例中所涉及的知识点把他们分为三个部分——1.内容绑定，事件绑定。2.显示切换，属性绑定。3.列表循环，表单元素绑定。
总结本章内容——1.核心是通过vue实现常见的网页效果。2.学习Vue指令，以案例巩固所学的知识点。3.Vue指令，指的是以v-开头的一组特殊语法。

一、内容绑定，事件绑定

1. v-text 指令

v-text的作用：设置标签的内容 /设置文本
默认的写法，替换全部内容。使用插值表达式{ {}}，可以替换指定内容
内部支持写表达式
案例代码及结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>

<body>
    <div id="app">
        <h2>深圳</h2>
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'?'">深圳</h2>
        <h2>{
  {message}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "程序员",
                info: "前端"
            }
        })
    </script>
</body>

</html>

2. v-html 指令

v-html的作用：设置元素的innerHTML
内容中有html结构会被解析为标签，若内容是文本则与v-text无区别
与v-text差异：v-text无论内容是什么都只会解析为文本
解析文本使用v-text，解析html使用v-html
案例代码及结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html指令</title>
</head>

<body>
    <div id="app">
        <!-- v-html指令，解析为html -->
        <h2 v-html="content"></h2>
        <!-- v-text指令,只解析为文本内容 -->
        <h2 v-text="content">深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://www.csdn.net'>csdn首页</a>",
            }
        })
    </script>
</body>

</html>

3. v-on 基础

v-on的作用：为元素绑定事件
事件名不需要写on：v-on:click
指令可以简写为@：@click
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
案例代码及结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令基础</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <!-- 用 @符号代替"v-on:" -->
        <input type="button" value="v-on指令简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <!-- 方法内部通过this关键字可以访问定义在data中的数据 -->
        <h2 @click="changeSubject">{
  {subject}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                subject: "数学"
            },
            methods: {
                doIt: function () {
                    alert("做程序员！！！");
                },
                changeSubject: function () {
                    this.subject += "不是语文！"
                }
            },
        })
    </script>
</body>

</html>