000 vue

一：vue实例

1.实例

　　新建项目：

2.程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="./lib/vue-2.4.0.js"></script>
 9 </head>
10 <body>
11     <!-- 第一个vue示例 -->
12     <div id="app">
13         <p>{{msg}}</p>
14     </div>
15     <script>
16         // 创建vue实例
17         var vm = new Vue({
18             el: '#app',
19             data: {
20                 msg: 'hello vue!'
21             }
22         });
23     </script>
24 </body>
25 </html>

　　效果：

二：知识点

1.v-cloak解决插值闪烁问题

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         [v-cloak] {
10             display: none;
11         }
12     </style>
13     
14 </head>
15 <body>
16     <!-- 解决插值表达式闪烁问题 -->
17     <div id="app">
18         <p v-cloak>{{msg}}</p>
19     </div>
20 
21     <script src="./lib/vue-2.4.0.js"></script>
22     <script>
23         var vm = new Vue({
24             el: '#app',
25             data: {
26                 msg: 'hello vue!'
27             }
28         });
29     </script>
30 </body>
31 </html>

2.v-text与插值表达式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <p v-text="msg"></p>
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!'
25             }
26         });
27     </script>
28 </body>
29 </html>

　　效果：

　　区别：

　　v-text默认没有闪烁问题的

　　插值表达式可以在前后放其他的内容

　　v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素的内容进行清空

3.v-html渲染html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <p v-html="msg2"></p>
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!',
25                 msg2:'<h1>这是一个H标签</h1>'
26             }
27         });
28     </script>
29 </body>
30 </html>

　　效果：

4.v-bind：绑定属性指令

　　其中，在v-bind后的mytitle被认为是一个变量，然后可以进行表达式运算

　　可以被简写为:title="mytitle"。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <input type="button" value="按钮" v-bind:title="mytitle">
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!',
25                 mytitle:'自定义属性'
26             }
27         });
28     </script>
29 </body>
30 </html>

　　效果：

5.v-on：事件机制

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9       
10     </style>
11     
12 </head>
13 <body>
14     <!-- 解决插值表达式闪烁问题 -->
15     <div id="app">
16         <input type="button" value="按钮" v-on:click="show">
17     </div>
18 
19     <script src="./lib/vue-2.4.0.js"></script>
20     <script>
21         var vm = new Vue({
22             el: '#app',
23             data: {
24                 msg: 'hello vue!'
25             },
26             methods:{
27                 show:function(){
28                     alert("hello on");
29                 }
30             }
31         });
32     </script>
33 </body>
34 </html>

猜你喜欢