创建 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>

可以发现标签被完美的显示在了浏览器上

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐