Vue 第一讲（文本及超链接渲染）

最新推荐文章于 2024-03-05 10:04:33 发布

是我来晚了！

最新推荐文章于 2024-03-05 10:04:33 发布

阅读量5k

点赞数 4

分类专栏：前端文章标签： vue html js javascript java

本文链接：https://blog.csdn.net/weixin_51927215/article/details/115841693

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue

创建 Html 源代码及 Vue 的引入
Html 视图层显示数据及 Vue 的文本渲染
v-html 属性（超链接）

创建 Html 源代码及 Vue 的引入

创建 Html 代码

第一步：桌面新建文件夹并拖入到此软件进行打开操作
第二步：右键创建文件（以 .html 为后缀）
第三步：英文输入法状态下，输入 !（感叹号）并按回车即可出现如下代码

在这里插入图片描述

引入 Vue 有二种方法（参考官方教程）

其一：引入本地的 vue.js 文件

<!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>
    <!-- 加载本地的 vue.js 文件 -->
    <script src="vue.js"></script>
</head>
<body>
    
</body>
</html>

其二：引入线上的 vue.js 文件

<!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>
    <!-- 加载线上的 vue.js 文件 -->
    <!-- 1. 最新版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 2. 对于生产环境, 推荐链接到一个明确的版本号和构建文件, 以避免新版本造成的不可预期的破坏 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    
</body>
</html>

Html 视图层显示数据及 Vue 的文本渲染

视图层显示数据

如下定义了视图（盒子，一级标题，二级标题及普通文本）
此处是直接通过标签语法来在 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>Document</title>
</head>
<body>
    <div id="box">
        <!-- 一级标题 -->
        <h1>i love you</h1>
        <!-- 普通文本 -->
        <p>da zhu zhu</p>
        <!-- 二级标题 -->
        <h2>me too</h2>
    </div>
</body>
</html>

在浏览器中打开

在这里插入图片描述

使用 Vue 语法来显示数据

在身体部分的标签（script）下，创建新的 Vue 对象 new Vue({配置项})
配置项包括 el, data, methods ，el（元素）项通过 CSS 语法与标签绑定，data 项用来定义 Vue 变量，methods 项用来定义方法（函数）
定义方法（函数）的语法 方法名:function(参数){内容}，如果想在方法里面调用 Vue 变量，那么变量需要加上前缀 this.
使用 Vue 语法来显示数据的本质是将 Vue 的配置项 data 里面的变量渲染到 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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 显示变量 -->
        <p>{{name}}</p>
        <!-- 文本标签中显示 函数的返回值 -->
        <p>{{hello_vue()}}</p>
        <!-- 表达式 -->
        <p>{{1+1}}</p>
    </div>
    <script>
        new Vue({
           el:"#box",
           data:{
               name:"susu"
            },
            // 创建方法    
            methods:{
                // 定义方法  方法名:function(参数){内容}
                hello_vue:function(){
                    return "hello" + this.name
                }
            } 
        })
    </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述

v-html 属性（超链接）

先尝试一下文本渲染超链接代码

在身体部分标签（p）中，用二层花括号包裹变量（code）
code 变量内容为一个完整的 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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <p>{{code}}</p>
    </div>
    <script>
        new Vue({
           el:"#box",
           data:{
               code:"<a href='https://www.baidu.com/'>百度一下</a>"
            }
        })
    </script>
</body>
</html>

我们可以发现渲染过来的仍然是文本，并未将文本翻译成标签显示出来

在这里插入图片描述
然后我们尝试一种正确的方法（v-html 属性来渲染）

v-html 属性使用在身体部分的标签中，目的是使该标签转化为 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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <div v-html="code"></div>
    </div>
    <script>
        new Vue({
           el:"#box",
           data:{
               code:"<a href='https://www.baidu.com/'>百度一下</a>"
            }
        })
    </script>
</body>
</html>