vue起步

vue是什么?

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。 vue简单,易用,便于维护,是一个mvvm的框架,不像angular.js那样复杂。

vue与angular的区别?

vue.js简单易用,指令以v-xx的形式来书写,简单来说vue实例的形成,就是一片html代码new出一个vue的实例,而且他是个人开源项目尤其是在移动端用处非常广泛。 而angular.js他比较复杂,不易上手,所有方法和属性基本都基于$scope,他是有Google团队维护,他们基本都不兼容IE低版本。

开始vue

1.页面展示数据

    <div id="app">
        {{msg}}
    </div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello world!',
        }
    });
    </script>
</body>

这里需要说明的是vue2.0版本挂载元素 不能是body或html只能是div等元素,否则会报错。
2.指令
v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app">
<input type="text" v-model="msg">

        {{msg}}
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello world!',
        }
    });
    </script>
</body>```
v-bind :src=""添加属性 简写为:src="";
```<body>
<div id="app">
    ![](url)
    <!-- ![](url) -->
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
             url:'https://www.baidu.com/img/bd_logo1.png',

        }
    });
    </script>
</body>```
还可以添加多个数据
```<body>
<div id="app">
    ![](url)
    <!-- ![](url) -->
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
             url:'https://www.baidu.com/img/bd_logo1.png',
             w:'200px',
             title:'我是一张图片'
        }
    });
    </script>
</body>```
v-bind结合class,style使用
```<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
    .red{ color:red;}
    .bg{ background: gray;}
    </style>
</head>
<body>
<div id="app">
    <span :class="[red,bg]">无法拒绝</span>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            red:'red',
            bg:'bg'
        }
    });
    </script>
</body>```
```<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
    .red{ color:red;}
    .bg{ background: gray;}
    </style>
</head>
<body>
<div id="app">
    <span :class="{red:true,bg:true}">无法拒绝</span>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            
        }
    });
    </script>
</body>```
```<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
    .red{ color:red;}
    .bg{ background: gray;}
    </style>
</head>
<body>
<div id="app">
    <span :class="json">无法拒绝</span>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            json:{
                red:true,
                bg:true
            }
        }
    });
    </script>
</body>```
循环的使用v-for
```<body>
<div id="app">
    <ul>
        <li v-for="todo in todos">
            {{todo.a}}
        </li>
    </ul>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            todos:[{a:'vue'},{a:'angular'},{a:'react'}]
        }
    });
    </script>
</body>```
index的用法
```<body>
<div id="app">
    <ul>
        <li v-for="(todo,index) in todos">
            {{todo}} {{index}}
        </li>
    </ul>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            todos:{a:1,b:2,c:3}
        }
    });
    </script>
</body>```
这里说明一下在1.0版本是不允许重复数据出现必须用track-by="$index",2.0版本不需要,直接可以使用。
事件的添加v-on:click mouseover... 简写为@on:click
```<body>
<div id="app">
    <input type="button" value="按钮" v-on:click="show"/>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
        },
        methods:{
            show:function(){
                alert(1);
            }
        }
    });
    </script>
</body>
<div id="app">
    <input type="button" value="按钮" v-on:click="show"/>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            arr:['vue','angular','react']
        },
        methods:{
            show:function(){
                this.arr.push('d3');
            }
        }
    });
    </script>
</body>```
深入事件了解 :阻止事件冒泡  浏览器默认行为  键盘事件。。
```<body>
<div id="app">
    <div class="box" v-on:contextmenu="show($event)"></div>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            arr:['vue','angular','react']
        },
        methods:{
            show:function(ev){
                alert(1);
                ev.preventDefault();
            }
        }
    });
    </script>
</body>```
//ev.preventDefault(); 可以简写为v-on:contextmenu.prevent="show()" 事件对象为$event
```<body>
<div id="app">
    <div v-on:click="a()">
        <div class="box" v-on:click.stop="show()"></div>
    </div>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            arr:['vue','angular','react']
        },
        methods:{
            show:function(){
                alert(1);
                //ev.cancelBubble=true;
            },
            a:function(){
                alert(2);
            }
        }
    });
    </script>
</body>```
阻止事件冒泡可以简写为v-on:click.stop="show()"
```<body>
<div id="app">
    <input type="text" @keydown.enter="show()"/>
</div>
    <script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            arr:['vue','angular','react']
        },
        methods:{
            show:function(ev){
                    alert('你按回车了')
            }
        }
    });
    </script>
</body>```
常用键码:
                   回车 &emsp;a). @keyup.13   &emsp; b). @keyup.enter &emsp;                              
  上、下、左、右 &emsp;@keyup/keydown.left &emsp;@keyup/keydown.right &emsp;@keyup/keydown.up &emsp;@keyup/keydown.down

推荐阅读更多精彩内容

  • 基本格式 以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。 ...
    kirito_song阅读 369评论 0 21
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 8,236评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 3,484评论 0 30
  • vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是...
    Mx勇阅读 565评论 4 5
  • 一 每到周六周日下午,一中的校门口就聚集了许多来接孩子的家长,为了方便家长休息,校方在校门口的南北两侧放置了几张长...
    纸窗竹屋阅读 657评论 4 8