文档章节

vue初始

originDu
 originDu
发布于 2017/04/26 17:59
字数 755
阅读 6
收藏 0

双向数据绑定

v-model="message"

数据列表循环

v-for="value in arrName" {{ value }}

过滤器

filters: { methodName: function(value,arg1,arg2...){...} }

过滤器的第一个参数就是写在html里前面的值

过滤器:`{{ message | filter (参数1, 参数2) }}`
过滤器串联:` {{ message | filterA | filterB }}  先执行filterA,然后执行filterB`
var vm = new Vue({
        el: '#app',
        data: {
            float_number: 12.34
        },
        filters: {
            toInt: function (value) {
                return parseInt(value);
            },
            add: function (value,arg1,arg2,arg3) {
                var arg1 = arg1||0;
                var arg2 = arg2||0;
                var arg3 = arg3||0;
                return value * 5 +arg1+arg2+arg3;
            }
        }
    })

指令

  • 绑定字符串:
v-text=""	{{ ... }}
  • 解析绑定html内容:
v-html=""	{{{ ... }}}
  • 绑定事件:
v-on:click="method"     @click="method"

方法后面可以加括号和参数,如果没有加括号,在js里写参数就是event事件参数

  • 修饰符:
v-on:click.prevent="method"	取消默认行为=e.preventDefault()
  • 绑定html属性:
v-bind:href="url"    <a v-bind:href="url">link</a>
  • 逻辑判断:
v-if="boolean" 
v-else-if="boolean"
v-else```
	这三个一起使用须在紧邻的标签

v-show="boolean" v-else

* 数组列表渲染

<li v-for="item in items"></li> ``` 在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。 你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法: <div v-for="item of items"></div>

Template v-for 如同 v-if 模板,你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。例如:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

计算属性 computed

    // 属性计算:int_number不和filter一样当作方法来使用,而是当作属性
    // int_number 会随着float_number的变化而变化
    var vm = new Vue({
        el: '#app',
        data: {
            float_number: 12.34
        },
        computed: {
            // 仅读取
            int_number: function() {
                // this就是指的vm
                return parseInt(this.float_number);
            },
            // 读取和设置
            aPlus: {
                // 读取
                get: function() {
                    return parseInt(this.float_number);
                },
                // 设置
                set: function(val) {
                    this.float_number = val;
                }
            }
        }
    })

默认使用的getter,可以自己设置setter

计算属性可以根据data属性源的变化自动缓存,依赖数据不变化,就不重复计算,可以依赖多个data里的数据,而methods里面的方法是每次都会运行一次,filters也是

绑定class

<div id="app">
    <!--这里的key加不加引号都一样-->
    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

    <!--与普通的class共存-->
    <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>

    <!--直接绑定一个对象-->
    <div v-bind:class="classObject"></div>

    <!--数组语法-->
    <div v-bind:class="[activeClass, errorClass]"></div>

    <!--表达式-->
    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    <!--混合写法-->
    <div v-bind:class="[{ active: isActive }, errorClass]"></div>
</div>


<script>
    // 使用:{{ message }}
    // {{}}可以写简单的表达式 注意:只能写单行不能写多行
    // 条件语句不适用,三元表达式可以用
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            hasError: false,

            classObject: {
                active: true,
                'text-danger': false
            },

            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })
</script>

数据列表 for-in

循环数组,第一个参数是对应的值,第二个参数是索引
<li v-for="(value, index) in array"></li>
数组里的每一项
 <li v-for="value in array"></li>
循环对象,第一个参数是值,第二个是名,第三个是索引
 <li v-for="(value, key, index) in object"></li>
循环对象里的每一个值
<li v-for="value in object"></li>

© 著作权归作者所有

共有 人打赏支持
originDu
粉丝 1
博文 69
码字总数 20317
作品 0
海淀
Vue(ES6)中的data属性为什么不能是一个对象?

以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象...

YaHuiLiang(Ryou)
07/17
0
0
Vue2.0笔记——Vue实例

Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: 当创建一个 Vue 实例时,你可以传入一个选项对象,就如前面所提到的如:data,methods,computed,watch等等。 一个 Vu...

逝岁月
04/18
0
0
用 React 和 Vue 创建了两个完全相同的应用后,发现了这些差异

译者 jonjia 爱贝睿技术团队 在工作中使用 Vue 一段时间后,对它的工作原理有了相当深入的了解。然而,我很想知道篱笆另一边的草地是什么样 - React。 我已经阅读了 React 文档,也观看了一些...

爱贝睿技术团队
08/03
0
0
vue中需要注意的问题总结(上)

文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格外需要注意的点; 为了深入的理解官方文档中对这些问题的解释,查阅了一些资料...

funnycoderstar
04/17
0
0
使用mpvue开发小程序教程(四)

在上一章节中,我们将命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvue开发小程序的第一步。今天我们将进一步来...

一斤代码
07/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
2
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
5
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
34
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部