- 入门教程
- Vue3.0 从入门到放弃
《VueJs入门教程》 
VueJS - 模板输出
在前面的章节中学习了如何在屏幕上以文本内容的形式获取输出。在本章中，无涯教程将学习如何在屏幕上以HTML模板的形式获取输出。
为了理解这一点考虑一个示例并在浏览器中查看输出。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div>{{htmlcontent}}</div> </div> <script type = "text/javascript" src = "js/vue_template.js"></script> </body> </html>
vue_template.js
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" } })
现在，假设要在页面上显示html内容。
如果看到html内容的显示方式这不是无涯教程想要的，原计划希望将其以适当的HTML内容显示在浏览器上。
为此将不得不使用 v-html 指令。将v-html指令分配给html元素后，VueJS知道它必须将其输出为HTML内容。在 .html 文件中添加v-html指令，看看其中的区别。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> </div> <script type = "text/javascript" src = "js/vue_template.js"></script> </body> </html>
现在，不需要用大括号显示HTML内容，而是使用了v-html =" htmlcontent"，其中htmlcontent在 js 文件中定义如下，-
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>" } })
浏览器中的输出如下-
如果检查浏览器，将看到内容以与.js文件中定义的方式相同的方式添加到变量htmlcontent:“ <div> <h1> Vue Js Template </ h1> </ div>”。
现在看看浏览器中的inspect元素。
以上已经看到了如何将HTML模板添加到DOM。现在将看到如何向现有的HTML元素添加属性。
考虑一下，在HTML文件中有一个图像标签分配src属性，这是Vue的一部分。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> <img src = "" width = "300" height = "250" /> </div> <script type = "text/javascript" src = "js/vue_template1.js"></script> </body> </html>
查看上面的img标签，src为空白，无涯教程需要从vue js向其中添加src。将img src存储在 .js 文件的数据对象中，如下所示-
var vm = new Vue({ el: '#vue_det', data: { firstname : "Ria", lastname : "Singh", htmlcontent : "<div><h1>Vue Js Template</h1></div>", imgsrc : "images/img.jpg" } })
如果按以下方式分配src，则浏览器中的输出将如以下屏幕截图所示。
<img src = "{{imgsrc}}" width = "300" height = "250" />
如上图得到了损坏的图像。要将任何属性分配给HTML标签，需要使用v-bind 指令，使用v-bind指令将src添加到图像中。
这是在 .html 文件中分配它的方式。
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "vue_det"> <h1>Firstname : {{firstname}}</h1> <h1>Lastname : {{lastname}}</h1> <div v-html = "htmlcontent"></div> <img v-bind:src = "imgsrc" width = "300" height = "250" /> </div> <script type = "text/javascript" src = "js/vue_template1.js"></script> </body> </html>
需要在src前面加上 v-binb:src =" imgsrc" ，并在变量名称前加上src。以下是浏览器中的输出。
检查并检查v-bind的src元素。
如上面的屏幕图所示，src的分配没有任何vuejs属性。
祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)
Tony Bai · Go语言第一课 -〔Tony Bai〕