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各个组成部分的过程：

一、定义view

二、定义Model 

三、建立一个实例或viewModel，用于链接View和Model。

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

数据绑定：

一、文本插值

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

三、过滤器

表单控件：

一、Text

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

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

二、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:''
            }
        });

三、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'
            }
        });

四、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:''
            }
        })

五、绑定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绑定：

一、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'
　　　　　　　　}
　　　　　　})

二、内联样式绑定

<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