Vue.js基础知识

1、使用 v-html 指令用于输出 html 代码

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

2、HTML 属性中的值应使用 v-bind 指令

<div v-bind:class="{'class1': class1}"> new Vue({ el: '#app', data:{ class1: false } });

text-danger 类背景颜色覆盖了 active 类的背景色：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})

也可以直接绑定数据里的一个对象：

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

new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})

2.1 Vue.js style(内联样式) 可以在 v-bind:style 直接设置样式：

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

也可以直接绑定到一个样式对象，让模板更清晰：<div v-bind:style="styleObject">菜鸟教程</div>

new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}
})

v-bind:style 可以使用数组将多个样式对象应用到一个元素上 <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

new Vue({
el: '#app',
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})

3、v-on 指令，它用于监听 DOM 事件

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

4、Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 --> {{ message | capitalize }}
<!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>

过滤器可以串联：{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}

5、组件（Component） 组件可以扩展 HTML 元素，封装可重用的代码。

注册一个全局组语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})

局部组件

var Child = {
template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})

6、prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：‘下面的message就是prop'

<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>