Vue.js基础知识

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

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
                        }
                   })

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

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

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

            也可以直接绑定到一个样式对象，让模板更清晰：<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 事件

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

 {{ message | capitalize }}
 <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>

猜你喜欢