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>