zoukankan html css js c++ java

vue学习

vue之helloword：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <input type="text" v-model="message">
12     <br>
13     <span>{{message}}</span>
14 </div>
15 
16 <script type="text/javascript">
17     new Vue({
18         el:'#app',
19         data:{
20             message:'学习vue'
21         }
22     });
23 </script>
24 </body>
25 </html>

vue模板语法：

v-once一次性插值

1     <span v-once>{{message}}</span>

原始html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <input type="text" v-model="message">
12     <br>
13     <span>{{message}}</span>
14     <br>
15     <span v-html="message"></span>
16 </div>
17 
18 <script type="text/javascript">
19     new Vue({
20         el:'#app',
21         data:{
22             message:'<h1>学习vue</h1>'
23         }
24     });
25 </script>
26 </body>
27 </html>

v-bind:id

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <input type="text" v-model="message">
12     <br>
13     <span v-bind:id="testId">id是什么？</span>
14 </div>
15 
16 <script type="text/javascript">
17     new Vue({
18         el:'#app',
19         data:{
20             message:'<h1>学习vue</h1>',
21             testId:'id1101'
22         }
23     });
24 </script>
25 </body>
26 </html>

v-bind:disabled

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <input type="text" v-model="message">
12     <br>
13     <button v-bind:disabled="disabledFlag">disabled禁用按钮</button>
14 </div>
15 
16 <script type="text/javascript">
17     new Vue({
18         el:'#app',
19         data:{
20             message:'<h1>学习vue</h1>',
21             testId:'id1101',
22             disabledFlag:true
23         }
24     });
25 </script>
26 </body>
27 </html>

js表达式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <span>{{num+1}}</span>
12     <br>
13     <span>{{age>=18? '已满18岁':'未满18岁'}}</span>
14     <br>
15     <span>{{msg.split('.').reverse().join('-')}}</span>
16 </div>
17 
18 <script type="text/javascript">
19     new Vue({
20         el:'#app',
21         data:{
22             num:12,
23             age:13,
24             msg:'192.168.1.1'
25         }
26     });
27 </script>
28 </body>
29 </html>

v-bind:href

 1 <div id="app">
 2     <a v-bind:href="testUrl">百度</a>
 3 </div>
 4 
 5 <script type="text/javascript">
 6     new Vue({
 7         el:'#app',
 8         data:{
 9             testUrl:'http://www.baidu.com'
10         }
11     });
12 </script>

v-on:click事件绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue学习</title>
 6     <script src="js/vue2.6.js" type="text/javascript"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <a v-bind:href="testUrl">超链接</a>
12     <a :href="testUrl">超链接v-bind缩写</a>
13     <button v-on:click="testFun">事件绑定</button>
14     <button @click="testFun">事件绑定v-on缩写@</button>
15 </div>
16 
17 <script type="text/javascript">
18     new Vue({
19         el:'#app',
20         data:{
21             testUrl:'http://www.baidu.com'
22         },
23         methods:{
24             testFun:function(){
25                 alert(2333);
26             }
27         }
28     });
29 </script>
30 </body>
31 </html>

条件渲染v-if

查看全文

相关阅读:
attr系列保留方法使用
 利用python的标准库hashlib 的md5()生成唯一的id
【病因】神经衰弱的几大病因
 群里看到的一个骗子批八字的例子
 i'll make a man out of you
It's A Good Day To Die
两天了。照着SVN的界面画的一个界面。
起一卦，看看我想要的，依然这么倒霉
 倒霉倒霉真倒霉，这一卦起得和上一卦一样
 只要是倒霉，起卦就能看出来

原文地址：https://www.cnblogs.com/mengxinrenyu/p/8452360.html