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>
可以发现标签被完美的显示在了浏览器上
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)