• 基本使用

      • 引入vue.js
      • 创建Vue对象, 指定选项对象
        • el : 指定dom标签容器的选择器
        • data : 指定初始化状态属性数据的对象
          对象/函数(返回一个对象)
      • 页面中
        • 使用v-model: 实现双向数据绑定
        • 使用{{}} ; 显示数据
    • Vue对象的选项

      • el

        • 指定dom标签容器的选择器
        • Vue就会管理对应的标签及其子标签
      • data
        • 指定初始化状态属性数据的对象
        • vue对象可以直接访问其属性
        • 页面中可以直接访问使用
      • methods
        • 包含多个方法的对象
        • 供页面中的事件指令来绑定回调
        • 回调函数默认有event参数, 但也可以指定自己的参数
        • 所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx
      • computed
        • 包含多个方法的对象
        • 对状态属性进行计算返回一个新的数据, 供页面获取显示
        • 一般情况下是相当于是一个只读的属性
        • 利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
      • watch
        • 包含多个属性监视的对象
        • 分为一般监视和深度监视
        • ‘xxx’ : {
          deep : true,
          handler : fun(vlaue)
          }
    • 扩展数组

      • $remove(item) : 删除数组中对应的元素
      • $set(index, ele) : 给数组中指定下标指定对应的元素
    • 页面指令

      • v-text/v-html: 指定标签体

        • v-text : 当作纯文本
        • v-html : 将value作为html标签来解析
      • v-if v-else v-show
        • v-if : 如果vlaue为true, 当前标签会输出在页面中
        • v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
        • v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none
      • v-for : 遍历
        • 遍历数组 : v-for=”person in persons” $index
        • 遍历对象 : v-for=”value in person” $key
      • v-on : 绑定事件监视
        • v-on:事件名, 可以缩写为: @事件名
        • 监视具体的按键: @keyup.keyCode @keyup.enter
        • 阻止事件的冒泡和事件默认行为: @click.stop @click.prevent
        • 隐含对象: $event
      • v-bind : 强制绑定解析表达式
        • 很多属性值是不支持表达式的, 就可以使用v-bind
        • 可以缩写为: :id=’nanme’
        • :class
          • :class=”{classA : isA, classB : isB}”
          • :class=”[classA, classB]”
        • :style
          :style=”{color : color}”
      • v-model
        • 双向数据绑定
      • v-el : 标识某个标签
        • v-el:xxx
        • 读取得到标签对象: this.$els.xxx
    • 过滤器

      • 内置

        1. capitalize : 首字母大小
        2. uppercase : 全部大写
        3. lowercase : 全部小写
        4. currency : 货币化
        5. pluralize : 单数/复数处理
        6. json : json格式化

        7. limitBy : 限定数组的部分元素(下标)

        8. filterBy : 限定数组的部分元素(值)
        9. orderBy : 对数组进行排序
      • 自定义
        1. 全局过滤器
          Vue.filter(‘过滤器名’, function(value, xxx, yyy) {
          //处理逻辑
          return result;
          });
        2. 局部过滤器
          new Vue({
          filters : {
          ‘过滤器名’ : function(value, xxx, yyy) {
          //处理逻辑
          return result;
          }
          }
          })
    • 指令
      • 内置
        v:text : 更新元素的 textContent
        v-html : 更新元素的 innerHTML
        v-if : 如果为true, 当前标签才会输出到页面
        v-else: 如果为false, 当前标签才会输出到页面
        v-show : 通过控制display样式来控制显示/隐藏
        v-for : 遍历数组/对象
        v-on : 绑定事件监听, 一般简写为@
        v-bind : 强制绑定解析表达式, 可以省略v-bind
        v-model : 双向数据绑定
        v-el : 为某个元素注册一个唯一标识, vue对象通过$els属性访问这个元素对象
        v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
      • 自定义
        1. 注册全局指令
          Vue.directive(‘my-directive’, function(value){
          this.el.innerHTML = value.toUpperCase();
          })
        2. 注册局部指令
          directives : {
          ‘my-directive’ : function(value) {
          this.el.innerHTML = value;
          }
          }
        3. 使用指令:
          v-my-directive=’xxx’

vue 常用手册的更多相关文章

  1. vue常用手册

    1.搭建vue的开发环境: 1.必须要安装node.js 2.安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli 3.新建项目 vue init webp ...

  2. 超级有用的各类web常用手册

    以下是链接地址: 各种web常用手册

  3. Vue常用经典开源项目汇总参考-海量

    Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...

  4. vue常用

    vue常用的路由的状态管理

  5. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  6. (二)Vue常用7个属性

    学习vue我们必须之到它的7个属性,8个 方法,以及7个指令.787原则 el属性 用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符. data属性 用来组织从view中抽象出 ...

  7. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

  8. Vue常用的GitHub项目

    Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...

  9. vue常用的修饰符

    v-model修饰符 <template> <div id="demo14"> <p>-----------------模板语法之修饰符---- ...

随机推荐

  1. T-SQL LIKE子句 模糊查询

    MS SQL Server LIKE子句用于使用通配符运算符将值与类似值进行比较. 有两个通配符与LIKE运算符结合使用: 百分号(%) 下划线(_) 百分号表示零个,一个或多个字符. 下划线表示单个 ...

  2. java结合testng,利用excel做数据源的数据驱动实例

    数据驱动部分,是自动化测试常用部分,也是参数化设计的重要环节,前面分享了,mysql.yaml做数据源,那么再来分享下excel做数据驱动 思路: 先用POI读取excel.解析读取数据,返回list ...

  3. [MySQL]子语句的查询技巧

    一.统计group by语句的行数 group by语句中,如果包含字段统计函数(诸如:count(),sum()...),这种情况下统计函数只会作用于group by的字段,因此想拿到最终结果的行数 ...

  4. layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

    方法级渲染: <table class="layui-hide" id="LAY_table_user" lay-filter="user&qu ...

  5. 并发性能的隐形杀手之伪共享(false sharing)

    在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...

  6. FlashBack 闪回

    [学习目标] Flashback Database 功能非常类似与RMAN的不完全恢复,它可以把整个数据库回退到 过去的某个时点的状态,这个功能依赖于Flashback log日志.比RMAN 更快速 ...

  7. Confluence 6 后台中为站点添加应用导航

    Confluence 6 后台中为站点添加应用导航的连界面和方法. https://www.cwiki.us/display/CONFLUENCEWIKI/Configuring+the+Site+H ...

  8. CF767C Garland--树形dp

    今天无聊的我又来切树形dp了,貌似我与树形dp有仇似的. n个节点的树 第i个节点权值为 n<=10^6 −100<=ai​<=100 问是否能够删除掉两条边,使得该树分成三个不为空 ...

  9. day04 运算符 流程控制 (if while/of)

    1. 运算符算数运算符 + - * / int / float :数字类型 # print(10 + 3.1)# print(10 / 3)# print(10 // 3)# print(10 % 3 ...

  10. Python基础之封装

    一.什么是封装 在程序设计中,封装(Encapsulation)是对具体对象的一种抽象,即将某些部分隐藏起来,在程序外部看不到,其 含义是其他程序无法调用. 要了解封装,离不开“私有化”,就是将类或者 ...