Vue基础01 ---- 插值表达式 {{ }}

Vue里面的插值表达式（双花括号{{   }}）是用来输出data数据的，定义在data里面的数据，可以使用插值表达式来输出：例如： {{ msg }}

1. 为什么 双花括号能显示出真实的数据：因为 vue会拿到vue实例所控制DOM区域（#app）里面的标签  使用vue的语法去编译它

2. 双花括号里面可以渲染data里面的数据

3.双花括号里面也可以执行js代码

4. 插值表达式有闪动问题 （v-cloak解决）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 
 9     <!-- 第一步 引入vue.js-->
10     <script src="../../js/vue.js"></script>
11 </head>
12 
13 <body>
14 
15     <!--为什么 会把双花括号显示出真实的数据 因为 vue会拿到#app里面的标签 使用vue的语法去编译它 -->
16     <div id="app">

17         <!-- 双花括号里面可以渲染data里面的数据 输出 '哈喽 vue'-->

　　　　　　　　2.在vue实例所控制的Dom区域使用双花括号（插值表达式）显示出data里的msg数据  此时  页面上已经显示出来msg的值 “哈喽 vue”了

18         {{msg}}
19 
20         <!-- 双花括号里面也可以执行js代码  输出3-->
21         {{1+2}}  
22     </div>
23 
24 </body>
25 
26 </html>
27 
28 <script>
29     var vm = new Vue({
30 
31         // Vue是一个构造函数 下面都是对象里面的属性
32 
33         el: '#app', //el就是element的意思  元素  就是要控制哪个元素
34         data: {
　　　　　　　　//1. 在data里面定义一个msg的数据
35             msg: '哈喽 vue'
36         }
56     })
57 </script>

 

posted @ 2020-12-28 21:39  雪天xt  阅读(1267)  评论(0)    收藏  举报