Vue.js实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var vm = new Vue({

// 选项

});

 

class与style

<div v-bind:class="{ active: isActive }">你好</div>
语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。

　　 js:

var app =  new Vue({
       el: '.static',
       data: {
           isActive:  true,   
           hasError: false
       }
    });

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

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">123</div>

 js:

var app =  new Vue({
        el: '.classObject',
        data: {
            classObject:{
                active: true,
                'text-danger': false
            }
    
        }
    });

　　也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

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

　　

var app =  new Vue({
    data: {
        isActive: true,
            error: null
    },
    computed: {
        classObject: function () {
            return {
                active: this.isActive && !this.error,
                'text-danger': this.error && this.error.type === 'fatal'
            }
        }
    }
    });

　　数组可以把一个数组传给 v-bind:class ，以应用一个 class 列表：

<div v-bind:class="[activeClass, errorClass]">

　　 js:

var app =  new Vue({
        el:'div',
    data: {
        activeClass: 'active',
            errorClass: 'text-danger'
    }
    });

　　

根据条件切换列表中的 class ，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

　　 js:

var app =  new Vue({
        el:'div',
        data: {
            activeClass: 'active',
                errorClass: 'text-danger'
        }
    });

　　

用在组件上

使用组件

注册

以通过以下方式创建一个 Vue 实例

 js:

new Vue({
  el: '#some-element',
  // 选项
})

　　

要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如：

 js:

Vue.component('my-component', {
  // 选项
})

　　

对于自定义标签名，Vue.js 不强制要求遵循 W3C规则 （小写，并且包含一个短杠），尽管遵循这个规则比较好。

组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件

<div id="example">
  <my-component></my-component>
</div>

　　 js:

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

　　

渲染为：

<div id="example"> <div>A custom component!</div> </div>

 

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

 js:

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

　　本文是在官方文档

转载于:https://www.cnblogs.com/shenq/p/6287373.html