前者MVC Vue2学习总结(三)——模板语法、过滤器、计算属性、观察者、Class 同 Style 绑定

Vue.js 使用了冲 HTML 的沙盘语法,允许开发者声明式地将 DOM 绑定至底层
Vue 实例的数量。所有 Vue.js 的沙盘都是官的 HTML
,所以能够于据规范的浏览器与 HTML 解析器解析。

在底层的兑现达标, Vue 将模板编译成虚拟 DOM
渲染函数。结合响应系统,在利用状态改变时, Vue
能够智能地精打细算出更渲染组件的极致小代价并采取到 DOM 操作及。

倘您熟悉虚拟 DOM 并且偏爱 JavaScript
的本来面目力量,你吗可以毫不模板,直接写渲染(render)函数,使用可卜的 JSX
语法。

1.1、插值

1.1.1、文本

数量绑定最广大的形式就是使用 “Mustache” 语法(双大括如泣如诉)的公文插值:

Message: {{ msg }}

Mustache 标签将会让取代为对应数据对象上 msg
属性的价值。无论何时,绑定的多寡对象上 msg
属性发生了变更,插值处的内容还见面更新

通过采用 v-once
指令,你吧能够实施一次性地插值,当数变动时,插值处的情节无会见更新。但求留意这会潜移默化及拖欠节点上富有的数据绑定:

This will never change: {{ msg }}

v-text指令:更新元素的 textContent。如果一旦翻新部分的 textContent
,需要运用 {{ Mustache }} 插值。

<!-- 和下面的一样 -->
{{msg}}

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>
    <body>
        <div id="app1">
            <input v-model="msg" />
             {{msg}}
             <h3 v-text="msg"></h3>
             <h3>{{msg}}</h3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data:{
                    msg:"vue"
                }
            });
        </script>
    </body>

</html>

结果:

AngularJS 1

1.1.2、纯HTML

对大括号会将数据说明也纯文本,而非 HTML 。为了输出真正的 HTML
,你得采用 v-html 指令:

<div v-html="rawHtml"></div>

给插的情还见面受看成 HTML —— 数据绑定会被忽视。注意,你不克应用 v-html
来复合片模板,因为 Vue 不是因字符串的沙盘引擎。组件更契合当 UI
重用与复合的着力单元

站点及动态渲染之任意 HTML
可能会见很危急,因为它们杀轻造成 XSS 攻击。请只有针对可信内容以
HTML 插值,绝不要针对性用户提供的情节插值

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>
    <body>
        <div id="app1">
            <textarea v-model="msg" rows="3" cols="30"></textarea>
             <p>{{msg}}</p>
             <p v-html="msg"></p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data:{
                    msg:"zhangguo"
                }
            });
        </script>
    </body>

</html>

结果:

AngularJS 2

1.1.3、属性

Mustache 不能够当 HTML 属性中采用,应采用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

马上对布尔值的性能为中 —— 如果条件为求值为 false 的语该属性会叫移除:

<button v-bind:disabled="someDynamicCondition">Button</button>

someDynamicCondition为true是disabled出现,为false时移除disabled

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>
    <body>
        <div id="app1">
            <button type="button" v-on:click="disabled=!disabled">反转{{disabled}}</button>
             <button type="button" v-bind:disabled="disabled">提交</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data:{
                    disabled:true
                }
            });
        </script>
    </body>

</html>

结果:

AngularJS 3

修改disabled的值为false

AngularJS 4

1.1.4、javascript表达式

由来,在我们的沙盘被,我们一直都只有绑定简单的性质键值。但事实上,对于有的数量绑定,
Vue.js 都提供了全的 JavaScript 表达式支持

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的多少图域下作为 JavaScript
被分析。有只限就是,每个绑定都只能分包单个表达式,所以下的事例都无会见收效,切莫需要在性前以this

{{ var a = 1 }}     <!-- 这是语句,不是表达式 -->
{{ if (ok) { return message } }}     <!-- 流控制也不会生效,请使用三元表达式 -->

模板表达式都让在沙盒中,只能看全局变量的一个白名单,如 Math 和 Date
。你切莫应该以模板表达式中试图访问用户定义的全局变量

1.2、指令

一声令下(Directives)是富含 v- 前缀的异常性能。指令属性之价值预期是十足
JavaScript
表达式。指令的任务就是是当那表达式的价改变时相应地拿某些行为使到 DOM 上

<p v-if="seen">Now you see me</p>

此处, v-if 指令以依据表达式 seen 的价值的真假来移除/插入元素

常用的授命发出:

指令

  • v-text
  • v-html
  • v-show
  • v-if
  • v-else
  • v-else-if
  • v-for
  • v-on
  • v-bind
  • v-model
  • v-pre
  • v-cloak
  • v-once

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>

    <body>
        <div id="app1">
            <button type="button" v-on:click="isShow=!isShow">反转{{isShow}}</button>
            <button type="button" v-if="isShow">提交v-if</button>
            <button type="button" v-show="isShow">提交v-show</button>
            <br/><br/>
            <div>
                等级A-C:<input v-model="type" />
            </div>
            <div v-if="type === 'A'">
                A优秀
            </div>
            <div v-else-if="type === 'B'">
                B良好
            </div>
            <div v-else-if="type === 'C'">
                C及格
            </div>
            <div v-else>
                D其它
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true,
                    type: 'D'
                }
            });
        </script>
    </body>

</html>

结果:

AngularJS 5

修改:

AngularJS 6

事件处理指令大强,说明如下:

v-on指令

  • 缩写:@

  • 预期:Function | Inline Statement | Object

  • 参数:event

  • 修饰符:

    • .stop – 调用 event.stopPropagation()
    • .prevent – 调用 event.preventDefault()
    • .capture – 添加波侦听器时采取 capture 模式。
    • .self – 只当事件是自侦听器绑定的素本身触发时才触发回调。
    • .{keyCode | keyAlias} – 只当事件是于一定键触发时才触发回调。
    • .native – 监听组件根元素的原生事件。
    • .once – 只触发一样坏回调。
    • .left – (2.2.0) 只当接触拍鼠标左键时接触。
    • .right – (2.2.0) 只当接触拍鼠标右键时接触。
    • .middle – (2.2.0) 只当接触拍鼠标中键时触发。
    • .passive – (2.3.0) 以 { passive: true } 模式添加侦听器
  • 用法:

    绑定事件监听器。事件类由参数指定。表达式可以是一个方式的名字或者一个内联语句,如果没有修饰符也足以概括。

    从 2.4.0 开始,v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当用对象语法时,是未支持任何修饰器的。

    就此当平凡元素上常,只能监听 原生 DOM
    事件。用当打定义元素组件上时时,也得监听子组件触发的自定义事件。

    以监听原生 DOM
    事件时,方法以事件也唯一的参数。如果使用外联语句,语句可以拜一个 $event 属性:v-on:click="handle('ok', $event)"

示例:

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
  • 以分组件上监听自定义事件
    (当子组件触发“my-event”时拿调用事件处理器):



示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>

    <body>
        <div id="app1">
            <div>
                等级A-C:<input v-model="type" @keyup.13="submit_click($event)" />
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true,
                    type: 'D'
                },
                methods: {
                    submit_click: function(e) {
                        if(confirm("确证要提交吗?")) {
                            console.log(e);
                        }
                    }
                }
            });
        </script>
    </body>

</html>

结果:

AngularJS 7

1.2.1、参数

一对命能承受一个“参数”,在命令后以冒号指明。例如, v-bind
指令给用来响应地翻新 HTML 属性:

<a v-bind:href="url"></a>

在此 href 是参数,告知 v-bind 指令以该因素的 href 属性与表达式 url
的值绑定

v-on 指令用于监听 DOM 事件:

<a v-on:click="doSomething">

1.2.2、修饰符

修饰符(Modifiers)是以半竞技句号 .
指明的例外后缀,用于指出一个令应该因为新鲜方式绑定:

<form v-on:submit.prevent="onSubmit"></form>
  • .stop – 调用 event.stopPropagation()。
  • .prevent – 调用 event.preventDefault()。
  • .capture – 添加风波侦听器时使用 capture 模式。
  • .self – 只当事件是由侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} – 只当事件是从一定键触发时才触发回调。
  • .native – 监听组件根元素的原生事件。
  • .once – 只触发一样涂鸦回调。
  • .left – (2.2.0) 只当接触拍鼠标左键时接触。
  • .right – (2.2.0) 只当接触拍鼠标右键时点。
  • .middle – (2.2.0) 只当接触拍鼠标中键时触发。
  • .passive – (2.3.0) 以 { passive: true } 模式加上侦听器

应用办法:

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

1.3、过滤器

Vue.js
允许而自定义过滤器,可给看作一些大规模的文本格式化。过滤器可以用在少数单地方:mustache 插值和 v-bind
表达式。过滤器应该给补充加于 JavaScript
表达式的尾部,由“管道”符指示:

{{ message | capitalize }}     <!-- in mustaches -->
<div v-bind:id="rawId | formatId"></div>     <!-- in v-bind -->

Vue 2.x 中,过滤器只能于 mustache 绑定和 v-bind 表达式(从 2.1.0
开始支持)中以,因为过滤器设计目的就是用来文书转换。为了以其它指令中实现又扑朔迷离的数码易,你该以计算属性

过滤器函数总接受表达式的值当第一个参数

new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联:

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此好接受参数:

{{ message | filterA('arg1', arg2) }}

此,字符串 ‘arg1’ 将污染于过滤器作为次个参数, arg2
表达式的值将让呼吁值然后传为过滤器作为第三独参数

当vue1中有部分放到的过滤器,而vue2中需要打定义。

示例:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue2模板语法</title>
    </head>
    <body>
        <div id="app1">
             {{msg | toUpper | toLower(" zhuhai")}}
        </div>
        <div id="app2">
             {{msg | toUpper | toLower}}
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //全局过滤器
            Vue.filter("toUpper",function(value){
                return value.toUpperCase();
            });

            var app1 = new Vue({
                el: "#app1",
                data:{
                    msg:"China"
                },
                filters:{  //带参数的当前实例过滤器
                    toLower:function(value,add){
                        return value.toLowerCase()+add;
                    }
                }
            });

            //可以使用全局过滤器
            var app2 = new Vue({
                el: "#app2",
                data:{
                    msg:"Vue"
                }
            });
        </script>
    </body>
</html> 

结果:

AngularJS 8

1.4、缩写

v- 前缀以模板被是作为一个标志 Vue 特殊性质之赫标识。当你下 Vue.js
为现有的号添加动态行为经常,它会生有因此,但于有时时采取的通令来说有点烦。同时,当搭建
Vue.js 管理有模板的 SPA 时,v- 前缀也变得没有那重要了。因此,Vue.js
为片只极端常用的指令提供了专门之缩写:

1.4.1、v-bind 缩写

<a v-bind:href="url"></a>     <!-- 完整语法 -->
<a :href="url"></a>     <!-- 缩写 -->

1.4.2、v-on 缩写

<a v-on:click="doSomething"></a>     <!-- 完整语法 -->
<a @click="doSomething"></a>     <!-- 缩写 -->

其看起或跟普通的 HTML 略有不同,但 : 与 @
对于属于性名来说还是官字符,在具有支持 Vue.js
的浏览器还能够让科学地分析。而且,它们不见面面世于最终渲染之号。缩写语法是完全可挑选的。

官原文

亚、计算属性与观察者

2.1、计算属性

在模板被绑定表达式是杀有利的,但是它其实不过用于简单的操作。在模板被放入太多之逻辑会吃模板过重且难以维护。例如:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

以这种景象下,模板不再简单和清晰。在贯彻反向显示 message 之前,你当肯定它们。这个问题在你不止一次反向显示
message 的时光换得更糟糕。

当下就算是干吗其他扑朔迷离逻辑,你都该采用计算属性。

2.1.1、基础例子

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

结果:

Original message: “Hello”

Computed reversed message: “olleH”

此处我们声明了一个计属性 reversedMessage 。我们提供的函数将故作属性vm.reversedMessage 的
getter 。

console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'

而可打开浏览器的控制台,修改 vm
。 vm.reversedMessage 的值老在vm.message 的值。

卿得像绑定普通属性一样以模板被绑定计算属性。 Vue
知道 vm.reversedMessage 依赖于 vm.message ,因此当 vm.message 发生反时,依赖让 vm.reversedMessage 的绑定也会见更新。而且太精彩的是咱是声明式地创造这种借助关系:计算属性的
getter 是彻底无副作用的,因此为是容易测试和了解的。

2.1.2、计算缓存 vs Methods

乃或早就注意到我们好由此调用表达式中之method来达到相同的功效:

<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

无通过计量属性,我们可以当 method
中定义一个一如既往之函数来顶替它。对于最后之结果,两栽艺术实在是同样之。然而,不同之凡算属性是因其的仗缓存。计算属性只有当它们的系依赖发生变更时才见面还取值。这就是象征一旦 message 没有发反,多次走访 reversedMessage 计算属性会立即回去之前的精打细算结果,而不要还实施函数。

立吗同样代表如下计算属性将无见面更新,因为 Date.now() 不是响应式依赖:

computed: {
  now: function () {
    return Date.now()
  }
}

相比而言,每当重新渲染的时候,method 调用总会执行函数。

我们为何用缓存?假设我们有一个重大之计属性 A ,这个算属性需要一个壮烈的数组遍历和举行大量的盘算。然后我们或许有另外的算计属性依赖让 A 。如果没有缓存,我们用不可避免的频繁履 A 的
getter !如果您莫欲有缓存,请用 method 替代。

区别:

测算属性只能当作属性用,不可知拉动参数,有缓存,效率高

计可直接调用,可带动参数,没有缓存,每次调用都见面尽,效率不设计量属性强。

2.1.3、计算属性 vs Watched Property

Vue.js 提供了一个措施 $watch ,它用来观察 Vue
实例上的数量变动。当部分数要依据外数据变化时, $watch 很诱人 ——
特别是设你来 AngularJS
。不过,通常还好之法子是应用计算属性而未是一个命令式的 $watch 回调。思考下面例子:

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

地方代码是命令式的同重新的。跟匡属性对比:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

这么重复好,不是吗?

2.1.4、计算 setter

计算属性默认只出 getter ,不过以急需常若啊得供一个 setter :

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

当今当运行 vm.fullName = 'John Doe' 时, setter
会被调用, vm.firstName 和vm.lastName 也会叫指向诺创新。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>计算属性和观察者</title>
    </head>

    <body>
        <div id="app1">
            姓:<input v-model="x" /> 名:
            <input v-model="m" /> 姓名:
            <input v-model="xm" />
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    x: "",
                    m: ""
                },
                computed:{
                    xm:{
                        get:function(){
                            return this.x+this.m;
                        },
                        set:function(value){
                            this.x=value.substring(0,1);
                            this.m=value.substring(1);
                        }
                    }
                }
            });
            app1.xm="张果";
        </script>
    </body>

</html>

结果:

AngularJS 9

2.2、观察 Watchers

则算属性在多数状况下再次合适,但奇迹也欲一个自定义的 watcher
。这是怎么 Vue
提供一个再度通用的艺术通过 watch 选项,来响应数据的浮动。当您想使当数码变化响应时,执行异步操作还是昂贵操作时,这是怪有因此的。

例如:

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变,这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce 是一个通过 lodash 限制操作频率的函数。
    // 在这个例子中,我们希望限制访问yesno.wtf/api的频率
    // ajax请求直到用户输入完毕才会发出
    // 学习更多关于 _.debounce function (and its cousin
    // _.throttle), 参考: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        var vm = this
        if (this.question.indexOf('?') === -1) {
          vm.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        vm.answer = 'Thinking...'
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})
</script>

结果:

Ask a yes/no question: 

I cannot give you an answer until you ask a question!

当此示例中,使用 watch 选项允许我们尽异步操作(访问一个
API),限制我们履行该操作的频率,并直到我们赢得终极结出时,才装中间状态。这是算属性无法做到的。

除了 watch 选项之外,您还可以以  vm.$watch
API 命令。

合法援助: http://vuejs.org/guide/computed.html

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>南方机器人</title>
    </head>

    <body>
        <div id="app1">
            <p>
                请输入您的问题:
                <input v-model="question">
            </p>
            <p>{{ answer }}</p>
            <p>
                <img v-bind:src="src"/>
            </p>
        </div>
        <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
        <script type="text/javascript">
            var watchExampleVM = new Vue({
                el: '#app1',
                data: {
                    question: '',
                    answer: '您问我一个问题我会给您一个答案!',
                    url:''
                },
                watch: {
                    // 如果 question 发生改变,这个函数就会运行
                    question: function(newQuestion) {
                        this.answer = '等待您的输入...'
                        this.getAnswer()
                    }
                },
                methods: {
                    // _.debounce 是一个通过 lodash 限制操作频率的函数。
                    // 在这个例子中,我们希望限制访问yesno.wtf/api的频率
                    // ajax请求直到用户输入完毕才会发出
                    // 学习更多关于 _.debounce function (and its cousin
                    // _.throttle), 参考: https://lodash.com/docs#debounce
                    getAnswer: _.debounce(
                        function() {
                            var vm = this
                            if(this.question.indexOf('?') === -1) {
                                vm.answer = '问题请以问号(?)结束'
                                return
                            }
                            vm.answer = '让我想想...'
                            axios.get('https://yesno.wtf/api')
                                .then(function(response) {
                                    vm.answer = _.capitalize(response.data.answer);
                                    vm.src=response.data.image;
                                    console.log(response);
                                })
                                .catch(function(error) {
                                    vm.answer = '发生了错误,不能调用该应用程序接口' + error
                                })
                        },
                        // 这是我们为用户停止输入等待的毫秒数
                        500
                    )
                }
            })
        </script>
    </body>

</html>=

结果:

AngularJS 10

三、Class 与 Style 绑定

数码绑定一个广泛需求是操作元素的 class
列表和她的内联样式。因为其还是属性
,我们得用v-bind 处理它们:只需要算起表达式最终的字符串。不过,字符串拼接麻烦又便于错。因此,在 v-bind 用于 class 和 style 时,
Vue.js
专门增强了她。表达式的结果类型除了字符串之外,还足以是目标要数组。

3.1、绑定 HTML Class

3.1.1、对象语法

俺们可传染被 v-bind:class 一个目标,以动态地切换 class 。

<div v-bind:class="{ active: isActive }"></div>

面的语法表示 classactive 的创新将在数量属性 isActive 是否为
真值 。

咱们啊堪于靶中传来更多属于性用来动态切换多单 class
。此外, v-bind:class 指令可以跟常见的 class 属性共存。如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下 data:

data: {
  isActive: true,
  hasError: false
}

渲染为:

<div class="static active"></div>

当 isActive 或者 hasError 变化时,class
列表将相应地换代。例如,如果 hasError的值为 true ,
class列表将成 "static active text-danger"

而也可直接绑定数据里的一个目标:

<div v-bind:class="classObject"></div>

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

渲染的结果以及点一样。我们呢堪当此处绑定返回对象的
计算属性。这是一个时因此都强大的模式:

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Class 与 Style 绑定</title>
        <style>
            .valide{
                display: none;
            }
            .priceRequired{
                display: inline;
            }
            .priceRange{
                display: inline;
            }
        </style>
    </head>
    <body>
        <div id="app1">
             span1

             span2

             <p>
                 <label>价格:</label>
                 <input v-model="price" />必填介于0.1-99999之间
             </p>
        </div>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data:{
                    isShow:true,
                    isActive:false,
                    classObj1:{
                        isHide:true,
                        isRight:false
                    },
                    price:0
                },
                computed:
                {
                    priceValide1:function(){
                        return {
                            priceRequired:this.price===''
                        }
                    },
                    priceValide2:function(){
                        return {
                            priceRange:this.price!=''&&(this.price<0.1||this.price>99999)
                        }
                    }
                }
            });


        </script>
    </body>
</html>

结果:

AngularJS 11

 

3.1.2、数组语法

咱得以将一个数组传为 v-bind:class ,以利用一个 class 列表:

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

<div class="active text-danger"></div>

而你吧想根据标准切换列表中的 class ,可以就此三头版表达式:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

此例始终添加 errorClass ,但是只有在 isActive 是 true
时添加 activeClass 。

唯独,当有差不多单原则 class
时这样形容多少麻烦。可以于勤组语法被使用对象语法:

<div v-bind:class="[{ active: isActive }, errorClass]">

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Class 与 Style 绑定</title>
    </head>

    <body>
        <div id="app1">
            span3
            span4
            span5
        </div>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true,
                    isHide: 'bg1',
                    isRight: 'bg2',
                    price: 0
                }

            });
        </script>
    </body>

</html>

结果:

AngularJS 12

 

3.1.3、With Components

This section assumes knowledge of  Vue
Components. Feel free
to skip it and come back later.

When you use the class attribute on a custom component, those classes
will be added to the component’s root element. Existing classes on this
element will not be overwritten.

For example, if you declare this component:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

Then add some classes when using it:

<my-component class="baz boo"></my-component>

The rendered HTML will be:

<p class="foo bar baz boo">Hi</p>

The same is true for class bindings:

<my-component v-bind:class="{ active: isActive }"></my-component>

When isActive is truthy, the rendered HTML will be:

<div class="foo bar active"></div>

3.2、绑定内联样式

3.2.1、对象语法

v-bind:style 的靶子语法十分直观——看在老像 CSS ,其实它们是一个
JavaScript 对象。 CSS
属性名可以就此驼峰式(camelCase)或缺少横分隔命名(kebab-case):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直绑定到一个体制对象通常还好,让模板更清:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

一律的,对象语法常常结合返回对象的计算属性使用。

3.2.2、数组语法

v-bind:style 的数组语法可以将大半个样式对象下至一个要素上:

<div v-bind:style="[baseStyles, overridingStyles]">

3.2.3、自动抬高前缀

当 v-bind:style 使用要一定前缀的 CSS 属性时,如 transform ,Vue.js
会AngularJS自动侦测并加上相应的前缀。

官方援助: http://vuejs.org/guide/class-and-style.html

季、示例下载

https://git.coding.net/zhangguo5/vue2.git

五、视频

https://www.bilibili.com/video/av17503637/

六、作业

6.1、请把v-on指令的每一样种植“修饰符”与调用方式还运相同遍。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

6.2、请好一个货品管理模块,要求如下:

  • 使bootstrap+vue2技术实现
  • 累加与修改功能下模式窗口
  • 支持全选与反选,隔行换色与光棒效果
  • 详见是点击时以弹出层中显示当前商品的具有信息
  • 尝试分页(选做)

AngularJS 13

6.3、增强商品管理

  • 数量从后台加载,请留意跨域(axios)
  • 贯彻搜索功能(Lodash)
  • 发征、有错误提示
  • 充实删除与补偿加时的动画效果(选作)
  • 了解UIKit(选作)

相关文章