VUE-note-day2

Vue 的细节是真的多.

v-text

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div id="app">
        <span>{{msg}}</span> 等价于 <span v-text="msg"></span>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World !',
        }
    });
</script>

// 显示结果 ==»

Hello World 等价于 Hello World.

v-once

形式: v-once
值: 无
作用: 限定所在元素只被渲染一次, 完成后即使值更新了也不再渲染

不管是用 v-text = “msg” 还是用 {{msg}} 都会实时的更新,也就是当msg 的值改变的时候, 显示的结果也会改变.

如果只想渲染一次, 可以加上v-once

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="app">
    <span>{{msg}}</span> 不等价于 <span v-text="msg" v-once></span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World !',
        }
    });
    
    app.msg = "Hello"
</script>

显示结果 ==»

Hello World 不等价于 Hello

v-html

形式: v-html = “variable”
值: variable -> string, 取自于data{} 里的属性
! WARN: 容易导致XSS攻击. 所以, 只在可信内容上使用. 永不用在用户提交的内容上。
作用: 更新元素的innerHTML. 内容按普通的HTML插入, 不会被编译

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
    <span v-html="dodo"></span>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            dodo: '<h2>Hello</h2>'
        }
    });
</script>

<!-- 渲染结果 =>> -->
<div id="app">
    <span v-html="dodo">
        <h2>Hello</h2>
    </span>
</div>

<!--显示结果 ==>> -->
Hello

v-on

形式： v-on:event[.qualifier] = “Function | Inline statements | Object”
缩写： @event[.qualifier] = “Function | Inline statements | Object”
值：
event -> 要监听的事件，如click， keyup等
qualifier -> 修饰符，监听事件做一些限定
methods -> 当所监听的事件触发时的响应方法
Inline statements -> 内联语句
Object -> [2.4.0]新增，使用键值对对象作为响应事件，但是不支持任何修饰器
作用：绑定监听事件。事件类型由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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--方法处理器-->
<button v-on:click="Function1"></button>

<!-- 动态事件（2.6.0+） -->
<button v-on:[event]="dosth"></button>
<!-- 内联语句 -->
<button v-on:click="dosth('hello', $event)"></button>
<!-- 缩写 -->
<button @click="dosth"></button>
<!-- 停止冒泡 -->
<button @click.stop="dosth"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="dosth"></button>
<!-- 没有表达式的阻止默认行为 -->
<form @click.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="dosth"></button>
<!-- 键修饰符.键名 -->
<button @keyup.enter="onEnter">
<!-- 键修饰符.键码 -->
<button @keyup.13="onEnter">
<!-- 点击回调只触发一次 -->
<button @click.once="dosth"></button>
<!-- 对象语法（2.4.0+） -->
<button v-on="{keyup: dosthA, keydown: dosthB"></button>

v-bind

形式： v-bind:AttributeOrProperty[.qualifier] = “value”
缩写： :AttributeOrProperty=“value”
值：
AttributeOrProperty -> 标签的原生属性或特性
value -> 标签原生属性所对应的值
作用：将属性或特性与变量绑定在一起，实现动态修改
修饰符：
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model

形式： v-model[.qualifier] = “variable”
值：variable -> 双向数据绑定的变量，通过这个变量实现数据与视图之间的绑定
! WARN: 只能在 <input>、<select>、<textarea> 和组件上使用
作用：实现双向数据绑定
修饰符：
.lazy - 取代 input 监听 change 事件, 懒加载，会等到失焦才更新
.number - 输入字符串转为有效的数字，限制只有数字有效，但是如果先输入字符串则该修饰符无效
.trim - 输入首尾空格过滤

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<p>{{msg}}</p>
<p>v-model.lazy<input type="text" v-model.lazy="msg"></p>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'Hello World !'
        }
    });
</script>

加了lazy修饰符，所以会等到input输入框失去焦点才渲染更新

v-text#

v-once#

v-html#

v-on#

v-bind#

v-model#