Vuejs教程-Vue.js模板

在之前的Vue.js实例章节中，我们学习了如何以文本内容的形式在屏幕上输出。在本章中，我们将学习如何以HTML模板的形式在屏幕上输出。Vue.js使用基于HTML的模板语法，使Vue.js开发者能够将渲染后的DOM声明性地绑定到底层Vue实例的数据上。所有的Vue.js模板都是有效的HTML，可以被符合规范的浏览器和HTML解析器解析。

如果你选择了简单的插值方法，即使用双花括号来显示HTML内容在Web浏览器上，那么它会显示错误的结果。

让我们来看一个简单的例子，以了解这个概念。

Index.html文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Template</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Firstname: {{ firstname }}</h1>
    <h1>Lastname: {{ lastname }}</h1>
    <div>{{ htmlcontent }}</div>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js文件：

var vm = new Vue({ 
  el: '#app', 
  data: { 
    firstname: "Albert", 
    lastname: "Pinto", 
    htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>"
  } 
});

我们使用一个简单的CSS文件来美化输出。

Index.css文件：

html, body {
  margin: 5px;
  padding: 0;
}

在程序执行后，你将看到以下输出：

输出：

Firstname : Albert
Lastname : Pinto
<div><h1>This is Vue.js Template Example</h1></div>

在上面的例子中，你可以看到HTML内容没有按照你期望的方式显示在浏览器上。HTML内容被显示为你在htmlcontent变量中指定的方式，而不是以正确的HTML内容显示在浏览器上。

为了解决这个问题，我们需要使用v-html指令。当我们给HTML元素赋予v-html指令时，Vue.js知道它必须将其作为HTML内容输出。

现在，将v-html指令添加到.html文件中，看看在下面的例子中的差异。

语法：

<div v-html="htmlcontent"></div>

示例2：

Index.html文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Template</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Firstname: {{ firstname }}</h1>
    <h1>Lastname: {{ lastname }}</h1>
    <div v-html="htmlcontent"></div>
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js文件：

var vm = new Vue({ 
  el: '#app', 
  data: { 
    firstname: "Albert", 
    lastname: "Pinto", 
    htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>"
  } 
});

在程序执行后，你将看到以下输出：

输出：

Firstname : Albert
Lastname : Pinto
This is Vue.js Template Example

在上面的例子中，可以看到在使用v-html指令后，你可以成功地将HTML模板添加到DOM中。现在，让我们看看如何给现有的HTML元素添加属性。

添加属性到HTML元素

假设我们在HTML文件中有一个图像标签，并且我们希望为它分配Vue.js的一部分，比如src。请看下面的例子：

Index.html文件：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Template</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Firstname: {{ firstname }}</h1>
    <h1>Lastname: {{ lastname }}</h1>
    <div v-html="htmlcontent"></div>
    <img src="" width="300" height="250" />
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js文件：

var vm = new Vue({ 
  el: '#app', 
  data: { 
    firstname: "Albert", 
    lastname: "Pinto", 
    htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>",
    imgsrc: "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
  } 
});

在程序执行后，你将看到以下输出：

输出：

在上面的例子中，你会发现图像无法加载。所以，我们必须使用v-bind指令来将任何属性分配给HTML标签。

让我们使用v-bind指令为img标签添加src。请看下面的例子：

示例3：

Index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Template</title>
  <link rel="stylesheet" href="index.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Firstname: {{ firstname }}</h1>
    <h1>Lastname: {{ lastname }}</h1>
    <div v-html="htmlcontent"></div>
    <img v-bind:src="imgsrc" width="300" height="250" />
  </div>
  <script src="index.js"></script>
</body>
</html>

Index.js：

var vm = new Vue({ 
  el: '#app', 
  data: { 
    firstname: "Albert", 
    lastname: "Pinto", 
    htmlcontent: "<div><h1>This is Vue.js Template Example</h1></div>",
    imgsrc: "https://www.fiordalisa.ch/wp-content/uploads/2017/12/IMG_4610.jpg"
  } 
});

在程序执行后，你将看到以下输出：

输出：

你可以看到，在为img的src属性添加了v-bind指令后，图片已经完整加载。

Vuejs教程-Vue.js模板

示例2：

添加属性到HTML元素

示例3：

推荐文章

其它