Vue 起步

Vue 是一套构建用户界面的渐进式框架。它只关注 MVC 框架中的视图层，即 view 层，因此 Vue 也读作 view。

构建一个 Vue 实例：

var vm = new Vue({
    // 节点选择器
    el: "#app",
    
    // 成员属性
    data: {},
    
    // 成员方法
    methods: {
        fn: function () {},
        ...
    },
    
    // 实例被创建后执行
    created: function() {},
    
    // 实例被装载后执行
    mounted: function() {},
    
    // 计算属性
    computed: {
        computedValue: function() {},
        ...
    }
})

Vue 指令

注：以下均用 vm 表示 Vue 的一个实例

绑定文本

<div>{{ msg }}</div>，其中 msg 是 vm 的成员属性

（这种大括号包裹变量的语法，称为 Mustache语法）

v-html 绑定HTML

v-html='rawHTML' 将当前节点的 innerHTML 与 rawHTML 绑定

<!--vm.rawHTML='<p>okii</p>'-->
<div v-html="rawHTML">123</div>

渲染结果：<div><p>okii</p></div>

v-once 仅执行一次数据渲染

<span>这个将会随时更新: {{ msg }}</span>
<span v-once>这个仅在创建时更新: {{ msg }}</span>

v-if 条件渲染

v-if='value' 根据 value 的布尔值决定创建、销毁当前节点

v-if v-else-if v-else 可一起搭配使用

可以与 <template> 搭配使用，用来控制一组标签

v-show 显示、隐藏节点

v-show='value' 始终创建当前节点，并根据 value 的布尔值决定显示、隐藏当前节点（通过设置节点的样式 display）

不可以与 <template> 搭配使用

v-for 列表渲染

v-for='(item[, index]) in myArray' 迭代数组

v-for='(value[, key[, index]]) in myObject' 迭代对象

in 可替换为 of

若对迭代的次序有要求，可加入 :key='index'（或 :key='key'）

该指令所在的节点，一定是被重复创建的节点

push() pop() shift() unshift() splice() sort() reverse() 将会触发更新

可以与 <template> 搭配使用，用来渲染一组标签

v-bind 绑定节点属性

v-bind:attributeName="attributeValue" 将节点属性 attributeName 与 attributeValue 绑定

简写 :attributeName='attributeValue'

属性名称 attributeName 可以用方括号动态设定，如：:[dynamic_attribute_name]='attributeValue'

注：浏览器会把 attribute 名全部强制转为小写，因此动态属性名称最好不要出现大写字母

v-on 绑定事件监听

v-on:eventName="eventValue" 将节点属性 eventName 与 eventValue 绑定

简写 @eventName='eventValue'

动态绑定事件参数 @[dynamic_event_name]='eventValue'

v-on:click="counter += 1" // counter为成员属性

v-on:click="greet" // greet为成员方法

v-on:click="say('hi')" // 向成员方法 say() 传入一个字符串参数 hi

v-on:click="warn('Form cannot be submitted yet.', $event)" // 传入两个参数，第一个参数为字符串，第二个参数是原始 DOM 事件

修饰符

.stop .prevent .capture .self .once .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

计算属性

计算属性是个匿名函数，函数一般涉及成员属性的计算，计算属性的值即匿名函数计算的结果。

当被计算的成员属性更新时，计算属性也会随之更新；若成员属性没有变动，重复调用该匿名函数，不会重新计算，但返回上次计算的结果。

var vm = new Vue({
    el: '',
    data: {},
    computed: {
        myValue: function() {
            return ... // 之后可以调用 vm.myValue
        }
    }
})

class 绑定

写法一：绑定字符串
:class='className'，其中 vm.className 是字符串

写法二：对象语法——对象中绑定布尔值
:class='{ active: isActive, 'text-danger': hasError }'，根据成员属性 isActive 和 hasError 的布尔值决定是否添加类名 active 和 text-danger

写法三：对象语法——绑定对象
:class='classObj，其中 vm.classObj={actice: true, 'text-danger': false}

写法四：数组语法——数组中绑定字符
:class='[activeClass, errorClass]'，其中 data: {activeClass: 'active', errorClass: 'text-danger'}

Vue 的类名绑定可以和普通类名赋值混合

style 绑定

写法一：绑定字符串

写法二：对象语法——对象中绑定字符串/数值
:style="{ color: activeColor, fontSize: fontSize + 'px' }"，其中 data: {activeColor: 'red', fontSize: 30}

写法三：对象语法——绑定对象
:style="styleObject"，其中data: {styleObject: {color: 'red', fontSize: '13px'}}

写法四：数组语法——数组中绑定样式对象
数组元素为样式对象

Vue 的样式绑定可以和普通样式赋值混合

组件

Vue.component('my-component', {
    props: [prop1, ...],
    data: function() {
        return {
            value1: 0,
            ...
        }
    },
    // template 中仅允许有一个根节点
    template: `
    <div>
        <h3>{{ value1 }}
        <p>{{ prop1 }}</p>
    </div>`
})

监听事件

父组件声明子组件的自定义事件，子组件中通过 $emit() 调用：

<div id='app'>
    <div :style='{fontSize: fontSize + "em"}'>
        <!--向系统注册（声明）一个名为 enlarge-text 的自定义事件-->
        <my-post v-on:enlarge-text='fontSize += 0.1' />
    </div>
</div>

Vue.component('my-post', {
    template:`
        <div>
            <h3>title</h3>
            <button v-on:click='$emit("enlarge-text")'>放大文本</button>
        </div>
    `
})
// $emit('enlarge-text') 即调用自定义事件 enlarge-text

new Vue({
    el: '#app',
    data: {
        fontSize: 1
    }
})

子组件通过 $emit(eventName, param) 抛出参数 param，供父级组件使用：

<div id='app'>
    <div :style='{fontSize: fontSize + "em"}'>
        <!--向系统注册一个名为 lessen-text 的自定义事件，$event 即子组件传入的参数-->
        <my-post v-on:lessen-text='fontSize += $event' />
        <!--向系统注册一个名为 lessen-text 的自定义事件，调用 vm.appMethod()-->
        <my-post v-on:lessen-text='appMethod' />
    </div>
</div>

Vue.component('my-post', {
    // $emit("lessen-text", 0.3) 即调用父组件注册事件 lessen-text，并抛出参数 0.3
    template:`
    <div>
        <h3>title</h3>
        <button v-on:click='$emit("lessen-text", 0.3)'>缩小文本</button>
    </div>
    `
})

new Vue({
    el: '#app',
    data: {
        fontSize: 2
    },
    methods: {
        appMethod: function(lessenAmount) { // lessenAmount 即子组件通过 $emit('lessen-text', 0.3) 传过来的第二个参数：0.3
            this.fontSize -= lessenAmount
        }
    }
})

事件监听步骤总结

在父组件中引入子组件时，通过 v-on:eventName='...' 声明子组件可以使用的事件 eventName
在子组件相应的位置激活 1 中声明的事件 eventName。事件具体执行的内容为 1 中的 ...

子组件向父组件传递参数，是通过 $emit(eventName, param)。父组件通过 $event 内联调用，或在 vm.methods() 中作为方法的参数

动态组件

通过 component 标签加上 is 属性，动态切换组件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

posted @ 2020-04-20 19:47 古十三阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部