vue基础知识

Vue.js被定义成一个用来开发web界面的前端库，是个非常轻量级的工具，本身具有响应式编程和组件化的特点，所谓响应式编程即为保持状态和视图的同步，是当下一个很火的Java Script MVVM库。MVVM的开发模式使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注data的变化，代码变得更加容易维护。

Vue.js使用起来更为简单，无需引入太多的新概念，声明实例 new Vue({data:data})后自然对data里面的数据进行了视图上的绑定。修改data的数据，视图中对应数据也会随之更改。将DOM和数据绑定起来，一旦创建了绑定，DOM和数据保持同步，每当变更了数据，DOM也相应的更新。

MVVM模式

ViewModel.js是Vue.js的核心，它是一个Vue实例。当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listener和Data Bindings看做两个工具，它们是实现双向绑定的关键，Dom Listener工具会帮我们检测页面上DOM元素的变化，如果有变化，则更改Model中的数据。当我们更新Model中的数据时，Data BIndigns工具会帮我们更新页面中的DOM元素。

使用Vue的过程就是定义MVVM各个组成部分的过程：

1、定义view

2、定义Model 

3、创建一个实例或viewModel，用于连接View和Model。

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、模板、挂载元素、方法、生命周期钩子等等。选项中主要影响模板或DOM的选项有el，el的作用是为实例提供挂载元素。每一个Vue.js实例需要有一个根元素。Vue.js实例中可以通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用，组件类型的实例可以通过props获取数据，同data一样，也需要在初始化时预设好，我们也可以在组件类型实例中同时使用data，但是需要注意两个地方：1、data的值必须是一个函数，并且返回值不是原始对象，如果传给组件的data是一个原始对象的话，则在建立多个组件实例时它们就会共用这个data对象，修改其中一个组件实例的数据就会影响到其他组件实例的数据。2、data中的属性和props中的不能重复。

数据绑定：

1、文本插值

2、绑定表达式：每个表达式只能包含单个表达式，并不支持JS语句，不支持正则表达式，如果需要进行复杂的转换，可以使用过滤器或计算属性进行处理。

3、过滤器

表单控件：

1、Text

<div id="app">
　　<p v-once="message">{{message}}</p>
　　<input type="text" v-model="message">
</div>

new Vue({
　　el:'#app',
　　data:{
　　message:'aaaaaa'
　　}
});

2、Radio

<div id="app3">
        <label><input type="radio" value="male" v-model="gender">男</label>
        <label><input type="radio" value="female" v-model="gender">女</label>
        <span>gender:{{gender}}</span>
    </div>
new Vue({
            el:'#app3',
            data:{
                gender:''
            }
        });

3、Checkbox

div id="app2">
        <input type="checkbox" v-model="checked" v-bind:true-value="a"  v-bind:false-value="b" name="">
        <span>checked:{{checked}}</span>
    </div>
new Vue({
            el:'#app2',
            data:{
                checked:'',
                a:'a',
                b:'b'
            }
        });

4、Select

<div id="app5">
        <select v-model="selected">
            <option disabled>请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected:{{selected}}</span>
    </div>
new Vue({
            el:'#app5',
            data:{
                selected:''
            }
        })

5、绑定value

<div id="app2">
        <input type="checkbox" v-model="checked" v-bind:true-value="a"  v-bind:false-value="b" name="">
        <span>checked:{{checked}}</span>
    </div>
new Vue({
            el:'#app2',
            data:{
                checked:'',
                a:'a',
                b:'b'
            }
        });

Class与Style绑定：

1、Class绑定

<div id="app7">
        <div class="tab" v-bind:class='{"active":active,"unactive":!active}'></div>
    </div>
new Vue({
            el:'#app7',
            data:{
                active:true
            }
        })

　　<div id="app8">
　　　　<div v-bind:class="[classA,classB]"></div>
　　</div>　　

　　new Vue({
　　　　　　el:'#app8',
　　　　　　data:{
　　　　　　　　classA:'class-a',
　　　　　　　　classB:'class-b'
　　　　　　　　}
　　　　　　})

2、内联样式绑定

<div id="app9">
        <div v-bind:style="alterStyle">hello</div>
    </div>
new Vue({
            el:'#app9',
            data:{
                alterStyle:{
                    color:'red',
                    fontSize:'20px'
                }
            }
        })

Vue.js的常用指令： v-if,v-else,v-show,v-for,v-bind,v-on