VUE

1、Vue是什么?

Vue是一个渐进式的javascript开发框架,通过组件的开发,最后进行组件的组合,合并组件形成页面

构造器(构造函数)

自动化构建工具

优点

1.组件化开发

2.单页面路由

3.丰富的Api方法

4.双向的数据绑定

5.单向数据流

6.易于结合其他第三库

缺点

1.生态系统不够完善

2.可扩展性稍差

vue的使用:

1>. 引入

2>.构造Vue对象

3>. 使用{{}}将数据和DOM绑定

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

4、vue对象介绍:

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

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

methods:事件处理方法对象

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 labelsuccess’:

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:属性名='实际对象'

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。