我的 Vue.js 学习日记 (三)

上节回顾

写了两篇文字发现并没有什么实质性的收获,由于时间上的原因可能无法这样一点一点的看了,今天准备先了解一下模版与属性。

Mustache插值

语法{{}}

用法:

  • <h3>{{title}}</h3>
  • <p>{{num + 1}}</p>
  • {{js表达式}}

额外信息:
<span v-once>{{num +1}}</span> 如此可以阻止数据更新。
<div v-html="hr"></div> 我们假设hr : '<hr/>',那么这里将生成一个横线到html

v-bind 与 v-on

这里只介绍了两个常用的指令,我想我可以通过对其的学习来掌握那些以后将会用到的指令。
v-bind用法:

  • v-bind:HTML特性
  • 如:<div v-bind:id=”id”></div>
  • 如:<img v-bind:src=”img”>
  • 如:<a v-bind:link="uri"></a>
  • 缩写去掉v-bind,只写:
  • 如:<a :link="uri"></a>

v-on用法:

  • v-on:用来绑定事件
  • 如:<button v-on:click="method">按钮</button>
  • 缩写:<button @click="method">按钮</button>

计算属性与监听器

那么什么是计算属性?

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'hello world.',
        num : 1,
        hr: '<hr/>',
        seen:true,
        type:'a'
    },
    computed:{
        doSomething:{
            get : function () {
                return 1
            },
            set : function (value) {
                this.num=value
            }
        }
    }
})

通过观察可以看出

  1. 计算属性与eldata是平级的
  2. 计算属性可以有getset属性访问器
  3. 属性访问器的内部可以有逻辑运算

既然计算属性computed可以写逻辑,那么问题来了,他和方法methods有什么区别呢?

Vue给出了答案

当计算属性或方法
内部用到的
数据没有变化时,对他们进行
重复调用,计算属性只会计算
一次,之后的都是直接拿已有的结果返回,而方法
每次都要重新跑一边

Vue将computedwatch拿来做了一下比较,其实我感觉computed是调用型,而watch是触发型,没什么好比的吧…

axios

本节的最后Vue提到了axios,它相当于Ajax,用途就不言而喻了。

小节

这样学感觉有些盲目,从明天起,开始以小Demo的方式来学习吧。
加油!

    原文作者:bei6
    原文地址: https://segmentfault.com/a/1190000014717840
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞