vue框架小结

1、vue优点：轻量级，js语法，入门上手快

2、vue和jQuery比较：jQuery关注Dom；vue关注数据，不关注Dom

3、vue的使用：    1>. 引入
                           2>.构造Vue对象
                           3>. 使用{{}}将数据和DOM绑定

                           4>.改变数据即可查看效果

4、vue对象介绍：

                           el：vue的作用域，即只有在这个作用域里面的dom收vue控制

                           data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，                                        因此页面数据模型必须提前定义好

                            methods：事件处理方法对象

                            语法：

                            var vue = new Vue({

                            el:'#app',

                            data:{

                             },

                            methods:{

                            }


                           }),

5、vue事件处理

          1>v-on:<事件名>

                      v-on:click

6、数据绑定

           1>绑定指令：

                      ●v-bind
                      ● {{}}
                      ●v-html:以原始数据方式绑定
           2>绑定位置：
                      ●文本。文本可以出现的地方
                      ●属性。dom对象的属性，如title,src等

                      ●css。包括style和class绑定

7、vue常用指令

           1>条件指令
                      ●v-if
                      ●<p v-if="true">显示</p>
                      ●v-else-if
                      ●v-else

           2>v-show

           3>循环指令
                      ●v-for
                      ●<li v-for ="todo in todos">
                      ●<li v-for="(todo,index) in todos">
                      ●<li v-for="(value,key,index) in object">
           4>表单绑定
                      ●v-model

                      ●<input v-model="name" />

8、Vue样式操作

          1>Class属性绑定
                      ●行内对象绑定: {‘label label-success’:active}
                      ●预定义对象绑定: classobj:{'label label-success':true}

                      ●数组绑定:v-bind:class=‘[active,danger]’

         2>style属性绑定
                      ●行内对象绑定: {‘color’:activecolor}
                      ●预定义对象绑定: styleobj:{‘color‘:’red’}

                      ●数组绑定:v-bind:style=‘[astyle,bstyle]’

9、Vue初始化方法

          Mounted

                      在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码

10、Vue中的过滤器

           filters

                      在vue初始化完成后调用该方法,一般用于vue初始化完成后需要自动执行的代码

11、vue自定义组件

            什么是组件

                       组件可以理解为页面中的完成某个特定功能的模块

            为什么要使用组件

                       代码复用。DRY（Don't Repeat Yourself）原则

            Vue.component('组件名',{props:['属性名'],template:'模板内容'})
            自定义组件使用
                       <组件名>
            自定义属性绑定
            v-bind:属性名='实际对象'