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>

 

 

 
我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
版权申明：欢迎转载，但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。
博主25岁，前端后端算法大数据人工智能都有兴趣。
大家有啥都可以加博主联系方式（qq404006308，微信fan404006308）互相交流。工作、生活、心境，可以互相启迪。
聊技术，交朋友，修心境，qq404006308，微信fan404006308
26岁，真心找女朋友，非诚勿扰，微信fan404006308，qq404006308
人工智能群：939687837

作者相关推荐