vue框架学习

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Document</title>
 5     <!-- 1.导入Vue 包 -->
 6     <script type="text/javascript" src="./static/vue.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <p>{{ msg }}</p>
12 </div>
13 
14 
15 <script type="text/javascript">
16 
17 
18 
19 //2.穿件一个vue的实例
20     var vm=new Vue({
21         el:'#app' , //选择器，选择要控制的区域
22         data:{
23             //data 属性中，存放的是el 中要用到的数据
24             msg:'wellcom shuishan!!'
25         }
26     })
27 </script>
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>02.v-choak的学习</title>
 6     <style>
 7         [v-cloak]{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <div id="app">
14     <!-- 使用 v-cloak 可以解决 插值表达式闪烁的问题-->
15     <p v-cloak>{{msg}}</p>
16 
17     <h4 v-text="msg"></h4>
18 
19     <div>
20         <h3>区别  v-text 和 v-cloak</h3>
21         <ul>
22             <li>1、默认v-text是没有闪烁问题的。</li>
23             <li>2、v-text会覆盖元素中原本的内容，但是插值表达式只会替换里面的占位符，不会把整个元素内容替换</li>
24         </ul>
25     </div>
26     <hr>
27     <div>{{msg2}}</div>
28     <div v-html="msg2"></div>
29 
30 
31 </div>
32 <script type="text/javascript" src="./static/vue.js"></script>
33 <script type="text/javascript">
34     var vm=new Vue({
35         el:"#app",
36         data:{
37             msg:"123",
38             msg2:"<h1>这是第二条演示数据。</h1>"
39         }
40     })
41 </script>
42 </body>
43 </html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02.v-choak的学习</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 使用 v-cloak 可以解决 插值表达式闪烁的问题-->
    <p v-cloak>{{msg}}</p>

    <h4 v-text="msg"></h4>

    <div>
        <h3>区别  v-text 和 v-cloak</h3>
        <ul>
            <li>1、默认v-text是没有闪烁问题的。</li>
            <li>2、v-text会覆盖元素中原本的内容，但是插值表达式只会替换里面的占位符，不会把整个元素内容替换</li>
        </ul>
    </div>
    <hr>
    <p>v-html 可以用来渲染HTML标签</p>
    <div>{{msg2}}</div>
    <div v-html="msg2">11111111111</div>
    <hr>
    <p>v-bind 提供用于绑定属性的指令</p>
    <input type="button" value="按钮" title="提示：123">
    <input type="button" value="按钮" v-bind:title="mytitle">
    <input type="button" value="按钮" v-bind:title="mytitle+'后缀添加一些内容'">
    <input type="button" value="按钮" :title="mytitle+'简写 可以只保留冒号'" id="btn" v-on:click="show">


</div>
<script type="text/javascript" src="./static/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"123",
            msg2:"<h1>这是第二条演示数据。</h1>",
            mytitle:"这是一个自己定义的title。"
        },
        methods:{
            show:function () {
                alert("ok")
            }
        }

    })

    // document.getElementById('btn').onclick=function () {
    //     alert("ok")
    // }
</script>
</body>
</html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>02.v-choak的学习</title>
 6     <style>
 7 
 8     </style>
 9 </head>
10 <body>
11 <div id="app">
12     <input type="button" value="浪起来" @click="lang">
13     <input type="button" value="低调， 别浪！" v-on:click="stop">
14 <h4>{{ msg }}</h4>
15 </div>
16 <script type="text/javascript" src="./static/vue.js"></script>
17 <script type="text/javascript">
18     var vm=new Vue({
19         el:"#app",
20         data:{
21             msg:"猥琐发育，别浪！",
22             intervalId:null,
23         },
24         methods:{
25             lang(){
26                 //关于this指向问题   一、
27                 // var _this=this;
28                 // // console.log(this.msg);
29                 // setInterval(function () {
30                 //     var start=_this.msg.substring(0,1);
31                 // var end=_this.msg.substring(1);
32                 // _this.msg=end+start;
33                 // },400)
34                 //关于this指向问题   二、
35                 if(this.intervalId !=null) return;
36                 this.intervalId=setInterval(() => {
37                     var start=this.msg.substring(0,1);
38                 var end=this.msg.substring(1);
39                 this.msg=end+start;
40                 },400)
41             },
42             stop(){
43                 clearInterval(this.intervalId);
44                 this.intervalId=null;
45             }
46 
47         }
48 
49     })
50 
51 
52 </script>
53 </body>
54 </html>

跑马灯

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- 1.导入Vue 包 -->
 7     <script type="text/javascript" src="./static/vue.js"></script>
 8     <style>
 9         .inner{
10             height: 150px;
11             background-color: darkgoldenrod;
12         }
13     </style>
14 </head>
15 <body>
16 
17 <div id="app">
18 
19     <!--<div class="inner" v-on:click="divHandler">-->
20         <!--<input type="button" value="干他" v-on:click.stop="btnHandler">-->
21     <!--</div>-->
22 
23     <div class="inner" v-on:click="divHandler">
24         <input type="button" value="干他" v-on:click.stop="btnHandler">
25     </div>
26     <a href="https://www.baidu.com" v-on:click.prevent="sayHello">链接到百度</a>
27     <hr>
28     <div class="inner" v-on:click.capture="divHandler">
29         <input type="button" value="干他" v-on:click="btnHandler">
30     </div>
31     <hr>
32 
33     <div class="inner" v-on:click="divHandler">
34         <input type="button" value="干他" v-on:click="btnHandler">
35     </div>
36     <hr>
37     使用.self
38     <div class="inner" v-on:click.self="divHandler">
39         <input type="button" value="干他" v-on:click="btnHandler">
40     </div>
41     <hr>
42     <a href="https://www.baidu.com" v-on:click.prevent.once="sayHello">链接到百度</a>
43 </div>
44 
45 
46 <script type="text/javascript">
47 
48     var vm=new Vue({
49         el:'#app' , //选择器，选择要控制的区域
50         data:{
51         },
52         methods:{
53             divHandler(){
54                 console.log("div 被干了")
55             },
56             btnHandler(){
57                 console.log("btn 被干了")
58             },
59             sayHello(){
60                 console.log("你好呀，兄嘚")
61             }
62 
63         }
64     })
65 </script>
66 </body>
67 </html>

事件修饰符

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- 1.导入Vue 包 -->
 7     <script type="text/javascript" src="./static/vue.js"></script>
 8 </head>
 9 <body>
10 
11 <div id="app">
12     v-bind 实现数据的单向绑定
13     v-model 实现数据的双向数据绑定   同时，只能用在表单元素中
14     <p>{{ msg }}</p>
15     <input type="text" v-model="msg" style=" 100%">
16 </div>
17 
18 
19 <script type="text/javascript">
20 
21 
22 
23 //2.穿件一个vue的实例
24     var vm=new Vue({
25         el:'#app' , //选择器，选择要控制的区域
26         data:{
27             //data 属性中，存放的是el 中要用到的数据
28             msg:'wellcom shuishan!!'
29         }
30     })
31 </script>
32 </body>
33 </html>

v-model 实现数据的双向数据绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <!-- 1.导入Vue 包 -->
 7     <script type="text/javascript" src="./static/vue.js"></script>
 8 </head>
 9 <body>
10 
11 <div id="app">
12     <input type="text" v-model="n1">
13     <select v-model="opt">
14         <option value="+">+</option>
15         <option value="-">-</option>
16         <option value="*">*</option>
17         <option value="/">/</option>
18     </select>
19     <input type="text" v-model="n2">
20     <input type="button" value="=" v-on:click="plus">
21     <input type="text" v-model="result">
22 </div>
23 
24 
25 <script type="text/javascript">
26 
27 
28 
29 //2.穿件一个vue的实例
30     var vm=new Vue({
31         el:'#app' , //选择器，选择要控制的区域
32         data:{
33             //data 属性中，存放的是el 中要用到的数据
34             n1:0,
35             n2:0,
36             result:0,
37             opt:"+"
38         },
39         methods:{
40             plus(){
41                 switch (this.opt) {
42                     case '+':this.result=parseInt(this.n1)+parseInt(this.n2);
43                         break;
44                         case '-':this.result=parseInt(this.n1)-parseInt(this.n2);
45                         break;
46                         case '*':this.result=parseInt(this.n1)*parseInt(this.n2);
47                         break;
48                         case '/':this.result=parseInt(this.n1)/parseInt(this.n2);
49                         break;
50                 }
51 
52             }
53         }
54     })
55 </script>
56 </body>
57 </html>

简单计算器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="./static/vue.js"></script>
 7     <style>
 8         .red{
 9             color:red;
10         }
11         .thin{
12             font-weight: 200;
13         }
14         .italic{
15             font-style: italic;
16         }
17         .active{
18             letter-spacing: 0.5em;
19         }
20     </style>
21 </head>
22 <body>
23 
24 <div id="app">
25     <h1 v-bind:class="['thin','italic']">使用数组来设置类，用来做样式的测试使用。</h1>
26 
27     <h1 v-bind:class="['thin','italic',flag?'active':'']">数组，用三元表达式控制</h1>
28 
29 
30     <h1 v-bind:class="['thin','italic',{'active':flag}]">数组，嵌入对象控制</h1>
31 
32     <h1 v-bind:class="{active:flag,thin:true,italic:true,red:true}">数组，直接使用对象控制</h1>
33 
34     <h1 v-bind:class="classObj">数组，直接使用对象控制</h1>
35 </div>
36 
37 
38 <script type="text/javascript">
39 
40 //2.穿件一个vue的实例
41     var vm=new Vue({
42         el:'#app' , //选择器，选择要控制的区域
43         data:{
44             //data 属性中，存放的是el 中要用到的数据
45             flag:true,
46             classObj:{active:true,thin:true,italic:true,red:true}
47         }
48     })
49 </script>
50 </body>
51 </html>

V属性的绑定 class

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="./static/vue.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <h1 v-bind:style="{color:'red','font-weight':200}">1.在用 Vue 构建大型应用时推荐使用</h1>
12 <h1 v-bind:style="styleObje">2.在用 Vue 构建大型应用时推荐使用</h1>
13     <h1 v-bind:style="[styleObje,styleObje2]">3.在用 Vue 构建大型应用时推荐使用</h1>
14 </div>
15 
16 
17 <script type="text/javascript">
18 
19 //2.穿件一个vue的实例
20     var vm=new Vue({
21         el:'#app' , //选择器，选择要控制的区域
22         data:{
23             //data 属性中，存放的是el 中要用到的数据
24             styleObje:{color:'red','font-weight':200},
25             styleObje2:{'font-style':'italic'}
26         }
27     })
28 </script>
29 </body>
30 </html>

属性绑定 style

v-for循环

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="./static/vue.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <!--<p>{{list[0]}}</p>-->
12     遍历数组
13     <p v-for="item,i in list">{{item}}>>>{{i}}</p>
14     遍历属性
15     <p v-for="user in list2">{{user.id}}------{{user.name}}</p>
16     遍历对象
17     <p v-for="(val,key,index) in user">{{val}}---{{key}}---{{index}}</p>
18     迭代数字
19     <p v-for="count,index in 10">这是第*{{count}}--索引{{index}}次循环</p>
20 </div>
21 
22 
23 <script type="text/javascript">
24 
25 //2.穿件一个vue的实例
26     var vm=new Vue({
27         el:'#app' , //选择器，选择要控制的区域
28         data:{
29             list:[1,2,3,4,5,6],
30             list2:[
31                 {id:1,name:"111"},
32                 {id:2,name:"222"},
33                 {id:3,name:"333"},
34                 {id:4,name:"444"}
35             ],
36             user:{
37                 id:4,
38                 name:"rico",
39                 gender:"男"
40             }
41         }
42     })
43 </script>
44 </body>
45 </html>

View Code

v-for 中key的使用注意事项

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="./static/vue.js"></script>
 7 </head>
 8 <body>
 9 
10 <div id="app">
11     <!--<p>{{list[0]}}</p>-->
12     <!--遍历数组-->
13     <!--<p v-for="item,i in list">{{item}}>>>{{i}}</p>-->
14     <!--遍历属性-->
15     <!--<p v-for="user in list2">{{user.id}}&#45;&#45;&#45;&#45;&#45;&#45;{{user.name}}</p>-->
16     <!--遍历对象-->
17     <!--<p v-for="(val,key,index) in user">{{val}}-&#45;&#45;{{key}}-&#45;&#45;{{index}}</p>-->
18     <!--迭代数字-->
19     <!--<p v-for="count,index in 10">这是第*{{count}}&#45;&#45;索引{{index}}次循环</p>-->
20     <div>
21         <label for="">Id:
22             <input type="text" v-model="id">
23         </label>
24         <label for="">Name:
25             <input type="text" v-model="name">
26         </label>
27         <input type="button" value="添加" v-on:click="add">
28     </div>
29     <p v-for="item in list2">
30         <input type="checkbox">
31         {{item.id}}---{{item.name}}
32     </p>
33 </div>
34 
35 
36 <script type="text/javascript">
37 
38 //2.穿件一个vue的实例
39     var vm=new Vue({
40         el:'#app' , //选择器，选择要控制的区域
41         data:{
42             id:"",
43             name:"",
44             list:[1,2,3,4,5,6],
45             list2:[
46                 {id:1,name:"李斯"},
47                 {id:2,name:"嬴政"},
48                 {id:3,name:"赵高"},
49                 {id:4,name:"韩非"}
50             ],
51             user:{
52                 id:4,
53                 name:"rico",
54                 gender:"男"
55             }
56         },
57         methods:{
58             add(){
59                 this.list2.push({id:this.id,name:this.name})
60             }
61         }
62 
63     })
64 </script>
65 </body>
66 </html>

View Code