VUE的初次使用以及各类指令的用途

夯往前冲

已于 2022-03-26 14:34:08 修改

阅读量850

点赞数 1

分类专栏： vue学习文章标签： vue.js 前端框架 html

于 2022-03-26 14:27:20 首次发布

本文链接：https://blog.csdn.net/m0_55767804/article/details/123752521

版权

本文是Vue.js的入门教程，详细介绍了Vue的初次使用，包括内容渲染、属性绑定、事件绑定、双向绑定、条件渲染和循环等核心指令的用法。文章通过实例演示了每个指令的工作原理和应用场景，适合前端开发新手学习。

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

新人驾到，多多关照

以下学习内容都是在黑马程序员bilibili官方视频学习而来，也欢迎大家前往学习，地址是黑马程序员vue

前言

此节可能涉及到es6语法，可提前了解

本章先用html格式使用VUE，后续使用vue格式书写

提示：以下是本篇文章正文内容，下面案例可供参考

一、VUE的初次使用

<!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>Document</title>
</head>

<body>
    <!-- 通过vue来控制下方的div -->
    <div id="app">{
  {username}}</div>
    <!-- 导入vue的库文件，使全局有vue的构造函数 -->
    <script src="./lib/vue.js"></script>
    <!-- 创建vue实例 -->
    <script>
        // 创建vue的实例对象
        const vm = new Vue({
            // el属性是固定写法，表示当前vm控制的区域，接收的值是一个选择器
            el: '#app',
            // data对象就是要渲染到页面的数据
            data: {
                username: '谢某某'
            }
        });
    </script>

</body>

</html>

vue.js需要到官网下载，也可使用我提供的连接：vue.js@2.6.14

执行结果如下，我们可看到通过{ {}}双花括号，可以将data里的对象无需操作DOM就可渲染到页面上，这就是vue的方便之处；

二、各类指令的用法

1.内容渲染

常用有以下三种： 1、v-text

2、{ {}}

3、v-html

首先第一种：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>Document</title>
</head>

<body>
    <div id="app">
        <p v-text="username">名字...</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: '姓名',
            }
        })
    </script>
</body>

</html>

执行结果：

会将data的username的值渲染到p标签中，但是p标签之前的内容则会被覆盖，这也是该其中的缺点，当不想原先的内容被覆盖时，则有了第二种{ {}}插值表达式的方法；

{ {}}插值表达式：

写法与上面不同，应写在标签的内容区域；

<!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>Document</title>
</head>

<body>
    <div id="app">
        <p>性别：{
  {gender}}</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                gender: '男',
            }