Vuejs学习笔记(一)-6.插值操作

一、插值操作--mustache语法

vue的插值操作，简单说，就是将Vue实例中的变量或则对象的值放到HTML中去显示。那么就需要在HTML中使用插入的变量名。目前的使用方法叫做mustache语法，即 {{ message }}

 

可以直接在html中插入变量。也可以对变量进行一些操作，即以表达式的形式展示。

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 01-mustache语法.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:15
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>01-mustache语法</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  直接调用变量-->
21   <h2>{{message + ' ' + message2}}</h2>
22   <!--  在{{}}中使用表达式-->
23   <h2>{{message}}{{message2}}</h2>
24   <h2>{{counter * 2}}</h2>
25 </div>
26 
27 <script src="../js/vue.js"></script>
28 <script>
29 
30 
31   const app = new Vue({
32     el: '#app',
33     data: {
34       message: 'hello',
35       message2: 'world',
36       counter: 10
37     }
38   })
39 </script>
40 </body>
41 </html>

二、v-once 指令，只准变量或者对象显示一次

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 02-v-once的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:26
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>02-v-once的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  v-once当前标签里插入的变量或则对象只能使用一次，即变量或则对象变动后，不会跟着变更-->
21   <h2 v-once>{{ message }}</h2>
22 </div>
23 
24 <script src="../js/vue.js"></script>
25 <script>
26 
27   const app = new Vue({
28     el: '#app',
29     data: {
30       message: 'hello'
31     },
32   })
33 </script>
34 </body>
35 </html>

运行Html，打开控制台，变更message值，第一个标签未做v-once指令的标签会响应式同步更新，而打了v-once指令的标签不会有任何变动。

 

 三、v-html的使用

 

服务器返回的url是以标签形式展示的，如 url:"<a href='www.baidu.com'>百度地址</a>",页面希望现实成html的标签，则要使用v-html

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-v-html的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:42
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-v-html的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <h2>{{url}}</h2>
21   <h2 v-html="url"></h2>
22 </div>
23 
24 <script src="../js/vue.js"></script>
25 <script>
26 
27   const app = new Vue({
28     el: '#app',
29     data: {
30       message: 'hello',
31       url:'<a href="www.baidu.com">百度</a>'
32     },
33   })
34 </script>
35 </body>
36 </html>

 

 

四、v-text的使用

1.不使用mustache语法也可以通过v-text显示Vue实例中的变量

2.但是使用起来不如mustache语法灵活，比如以下的代码会用message的值覆盖掉vuejs,暂时不能像message一样拼接使用

 

 

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 04-v-text的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:47
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>04-v-text的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <h2>{{ message }},vuejs</h2>
21   <!--  不使用mustache语法也可以通过v-text显示Vue实例中的变量-->
22   <h2 v-text="message"></h2>
23   <!--  但是使用起来不如mustache语法灵活，比如以下的代码会用message的值覆盖掉vuejs,暂时不能像message一样拼接使用-->
24   <h2 v-text="message">vuejs</h2>
25 </div>
26 
27 
28 <script src="../js/vue.js"></script>
29 <script>
30 
31   const app = new Vue({
32     el: '#app',
33     data: {
34       message: 'hello',
35     },
36   })
37 </script>
38 </body>
39 </html>

五、v-pre的使用

 

作用：使用v-pre命令，会让Vue实例不解析{{}}内的变量，并将{{}}和变量直接显示在前端

 

 

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 05-v-pre的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:54
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>05-v-pre的使用</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>{{ message }}</h2>
20   <!--  使用v-pre命令，会让Vue实例不解析{{}}内的变量，并将{{}}和变量直接显示在前端-->
21   <h2 v-pre>{{ message }}</h2>
22 </div>
23 
24 
25 <script src="../js/vue.js"></script>
26 <script>
27 
28 
29   const app = new Vue({
30     el: '#app',
31     data: {
32       message: 'hello'
33     },
34 
35   })
36 </script>
37 </body>
38 </html>

 六、v-cloak的使用 

我感觉这个叫魔法斗篷

 

 

 

 

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 06-v-cloak的使用.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 20:58
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>06-v-cloak的使用</title>
16   <style>
17       [v-cloak] {
18           display: none;
19       }
20   </style>
21 </head>
22 <body>
23 <div id="app">
24   <h2>{{ message }}</h2>
25   <h2 v-cloak> {{message}}</h2>
26   <!--  使用v-cloak，结合css的v-cloak的style，能在解析前不显示数据-->
27   <!--  原理:1.Vue实例1秒后创建，但是html的格式一致都有，如果没有v-cloak那么html的格式将在一开始就渲染。-->
28   <!--       2.使用了v-cloak，则页面一开始检查有v-cloak属性，则不显示该便签，在1秒后创建Vue实例，Vue实例会将包含有v-cloak的标签去掉-->
29   <!--          那么，1秒后就可以显示message的值。这个实际开发中可以在加载页面时使用。-->
30 </div>
31 
32 <script src="../js/vue.js"></script>
33 <script>
34   setTimeout(function () {
35     const app = new Vue({
36       el: '#app',
37       data: {
38         message: 'hello'
39       },
40     })
41   }, 1000)
42 </script>
43 </body>
44 </html>

作用：

使用v-cloak，结合css的v-cloak的style，能在解析前不显示数据
原理:1.Vue实例1秒后创建，但是html的格式一致都有，如果没有v-cloak那么html的格式将在一开始就渲染。
    2.使用了v-cloak，则页面一开始检查有v-cloak属性，则不显示该便签，在1秒后创建Vue实例，Vue实例会将包含有v-cloak的标签去掉
      那么，1秒后就可以显示message的值。这个实际开发中可以在加载页面时使用。

 

 

posted @ 2021-06-30 21:15  kaer_invoker  阅读(159)  评论(0)  编辑  收藏  举报