VUE课程参考---3、VUE模板语法
一、总结
一句话总结：
在vue模板里面解析数据，可以用大括号表达式，比如{{msg}}，也可以用指令，比如v-html（以html标签方式插入文本），v-text（以文本方式插入文本）等
<div id="app"> <p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <p v-text="msg"></p> <p v-text="html1"></p> <p v-html="html1"></p> </div> <script src="../js/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'hello，花好月圆', html1:'<a href="https://fanrenyi.com">让学过的东西不再忘记的 编程视频学习网站</a>' } }); </script>
1、v-html和v-text 指令的作用分别是什么？
v-html：以html标签方式插入文本
v-text：以文本方式插入文本
2、vue里面我们常说的模板是什么（也就是mvvm中第一个v（view））？
动态的html页面：vue框架里面就是在html中带一些js代码（js表达式）来插入数据
二、VUE模板语法
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3、VUE模板语法</title> 6 </head> 7 <body> 8 <!-- 9 10 视图（模板）的理解 11 动态的html页面 12 （ 13 后端框架mvc模式里面的模板就是在html中带一些后端代码来插入数据， 14 vue框架里面就是在html中带一些js代码（js表达式）来插入数据， 15 这里的js是对象 16 ） 17 18 vue中模板里面解析数据 19 大括号表达式：比如{{msg}} 20 指令(以v-开头的自定义标签属性)：v-html，v-text等 21 22 v-html：以html标签方式插入文本 23 v-text：以文本方式插入文本 24 25 --> 26 <div id="app"> 27 <p>{{msg}}</p> 28 <p>{{msg.toUpperCase()}}</p> 29 <p v-text="msg"></p> 30 <p v-text="html1"></p> 31 <p v-html="html1"></p> 32 </div> 33 <script src="../js/vue.js"></script> 34 <script> 35 let vm=new Vue({ 36 el:'#app', 37 data:{ 38 msg:'hello，花好月圆', 39 html1:'<a href="https://fanrenyi.com">让学过的东西不再忘记的 编程视频学习网站</a>' 40 } 41 }); 42 </script> 43 </body> 44 </html>