AngularJS前端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 } }}     <!-- 流控制也不会生效,请使用三元表达式 -->

模板表明式都被放在沙盒中,只可以访问全局变量的1个白名单,如 Math 和 Date
。你不应有在模板表达式中试图访问用户定义的全局变量

1.2、指令

一声令下(Directives)是富含 v- 前缀的差别平日性质。指令属性的值预期是纯净
JavaScript
表明式。指令的义务就是当其表达式的值改变时相应地将一些行为采用到 DOM 上

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

此处, v-if 指令将基于表明式 seen 的值的真真假假来移除/插入成分

常用的吩咐有:

指令

示例:

<!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 } 情势添加侦听器
  • 用法:

    绑定事件监听器。事件类型由参数钦点。表明式可以是1个艺术的名字或三个内联语句,如果没有修饰符也足以大约。

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

    用在寻常元素上时,只可以监听 原生 DOM
    事件。用在自定义成分组件上时,也足以监听子组件触发的自定义事件。

    在监听原生 DOM
    事件时,方法以事件为唯一的参数。假如运用内联语句,语句可以访问3个 $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
开首支持)中行使,因为过滤器设计目标就是用来文书转换。为了在任何指令中贯彻更扑朔迷离的数额变换,你应有利用统计属性

过滤器函数总接受表明式的值作为第1个参数

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’ 将传给过滤器作为第1个参数, 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- 前缀在模板中是作为2个标记 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.一 、基础例子

<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.② 、计算缓存 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.三 、统计属性 vs Watched Property

Vue.js 提供了贰个措施 $watch ,它用于观望 Vue
实例上的数目变动。当某个数目须求基于其他数据变化时, $watch 很诱人 ——
尤其是一旦你来自 AngularJS
。然而,日常更好的措施是应用统计属性而不是1个命令式的 $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 ,但是在要求时你也得以提供2个 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.① 、对象语法

我们可以传给 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.二 、数组语法

咱俩可以把3个数组传给 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.二 、绑定内联样式

3.2.① 、对象语法

v-bind:style 的靶子语法12分直观——望着十分像 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.② 、数组语法

v-bind:style 的数组语法可以将几个样式对象应用到壹个要素上:

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

3.2.③ 、自动抬高前缀

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

法定援救: http://vuejs.org/guide/class-and-style.html

肆 、示例下载

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

五、视频

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

六、作业

6.一 、请把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.贰 、请达成贰个货物管理模块,要求如下:

  • 利用bootstrap+vue2技术完结
  • 累加与修改作用应用格局窗口
  • 支撑全选与反选,隔行换色与光棒效果
  • 详尽是点击时在弹出层中体现当前商品的具有音讯
  • 尝试分页(选做)

AngularJS 13

6.叁 、增强商品管理

  • 数码从后台加载,请小心跨域(axios)
  • 径情直行搜索功效(Lodash)
  • 有认证、有荒唐指示
  • 扩充删除与添加时的卡通效果(选作)
  • 了解UIKit(选作)

相关文章