vue-模板

1、vue模板简介

vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据。模板就是{{}}，用来数据绑定，显示在页面上，也称为Mustache语法。

 

2、数据绑定的方式

a.双向绑定

　　v-model

b.单向绑定

　　方式1：使用两对大括号{{}}，页面上可能会出现闪烁的问题（可以使用v-cloak解决）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           msg:'欢迎来到王者荣耀！'
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24   /*v-cloak必须配置css样式才生效*/
25     [v-cloak]:{
26       display: none;
27     }
28   </style>
29 </head>
30 <body>
31 <div id="hello">
32     <h3>这是一款腾讯游戏。<span v-cloak>{{msg}}</span></h3> 
33 </div>
34 </body>
35 </html>

 

　　方式2：使用v-text、v-html（不会出现闪烁的问题）（v-html可以识别标签，v-text不识别标签）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           msg:'欢迎来到<text>腾讯出品的</text>王者荣耀！'
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24   /*v-cloak必须配置css样式才生效*/
25     [v-cloak]:{
26       display: none;
27     }
28   </style>
29 </head>
30 <body>
31 <div id="hello">
32     <h3 v-text='msg'></h3>  
33     <h3 v-html='msg'></h3>
34 </div>
35 </body>
36 </html>

 

posted @ 2021-08-24 17:07  AnnLing  阅读(436)  评论(0)    收藏  举报