文档章节

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
博文 74
码字总数 22733
作品 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
10/30
0
0
使用mpvue开发小程序教程(四)

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

一斤代码
07/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Go 使用channel控制并发

前言 channel一般用于协程之间的通信,channel也可以用于并发控制。比如主协程启动N个子协程,主协程等待所有子协程退出后再继续后续流程,这种场景下channel也可轻易实现。 场景示例 总结 ...

恋恋美食
23分钟前
1
0
Apache Flink 漫谈系列 - 持续查询(Continuous Queries)

摘要: 实际问题 我们知道在流计算场景中,数据是源源不断的流入的,数据流永远不会结束,那么计算就永远不会结束,如果计算永远不会结束的话,那么计算结果何时输出呢?本篇将介绍Apache Fl...

阿里云官方博客
27分钟前
4
0
斐波那契堆的理解,节点mark属性和势函数

斐波那契堆 看了好多博客,都是照搬算法导论的内容,没有自己的理解,比如为什么有mark属性,势函数的作用,以及为什么叫斐波那契堆,下面说说鄙人的理解。 势函数 势函数是根节点个数加上2...

杨喆
28分钟前
3
0
NIO源码详解

阻塞io和无阻塞io: 阻塞io是指jdk1.4之前版本面向流的io,服务端需要对每个请求建立一堆线程等待请求,而客户端发送请求后,先咨询服务端是否有线程相应,如果没有则会一直等待或者遭到拒 ...

沉稳2018
33分钟前
0
0
如何把已经提交的commit, 从一个分支放到另一个分支

在本地master提交了一个commit(8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f),如何提交的test_2分之上? git checkout test_2git cherry-pick 8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f......

stephen_wu
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部