文档章节

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
博文 81
码字总数 22789
作品 0
海淀
私信 提问
vue通过ajax获取数据踩坑笔记

跨屏网专注一句话JS解决网站移动适配问题,所以除了前端以外,还需要涉及程序开发的部分,而最近流行的vue框架也在内,初次使用vue的时候难免出问题,比如vue通过ajax获取数据的时候,如果不...

蓬门网
2017/12/24
0
0
Vue(ES6)中的data属性为什么不能是一个对象?

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

YaHuiLiang(Ryou)
2018/07/17
0
0
vue中需要注意的问题总结(上)

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

funnycoderstar
2018/10/30
0
0
Vue.js 2.0 版发布,框架被重写

Vue.js的团队最近发布了v2.0版本,该版本被描述为是对框架的一次“完全改写”。 Vue创建者Evan You称Vue由“一个核心视图层、伴随工具以及支持库”所构成,这次发布的2.0版本更快速更精简。 ...

oschina
2016/05/10
9.9K
27
Vue2.0笔记——Vue实例

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

逝岁月
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自定义线程池

自定义线程工厂: public class CustomThreadFactory implements ThreadFactory { private static final Logger LOGGER = LoggerFactory.getLogger(CustomThreadFactory.class); pu......

hensemlee
14分钟前
1
0
【剑指offer纪念版】-- 面试题目录

2.实现Singleton模式 3.二维数组中的查找 4.替换空格 5.从尾到头打印链表 6.重建二叉树 7.用两个栈实现队列 8.旋转数组的最小数字 9.斐波那契数列 10.二进制中1的个数 11.数值的整数次方 12...

细节探索者
27分钟前
1
0
记一次oom内核优化记录:vm.lower_zone_protection

情景 最近gitlab服务会偶发性500,当前机器部署了gitlab、nfs等服务,经过排查发现是nfsd引发oom,导致系统运行不畅。处理过程如下: 事故现场 开发在使用gitlab的时候发现,偶发性的出现500...

阿dai
59分钟前
4
0
Spring Batch JSON 支持

Spring Batch 4.1 开始能够支持 JSON 格式了。这个发布介绍了一个新的数据读(item reader)能够读取一个 JSON 资源,这个资源按照下面的格式: [  {    "isin": "123",    ...

honeymose
今天
0
0
浏览器缓存

HTTP缓存类型 200 from cache:直接从本地缓存获取响应,可细分为from disk cache, from memory cache 304 Not Modified:协商缓存,本地未命中发送校验数据到服务端,如果服务端数据没有改变,则读...

关元
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部