vuejs的特点

责编:menVScode 2018-01-25 21:14 阅读(893)

vuejs的特点

        (1)响应式--数据双向绑定

        双向绑定的意义:传统的前端开发中,会有一套js功能代码,一套html模板代码,js和html之间会存在很多的交互。比如js获取html中的字段,或者用户通过html输入内容要反应到js里等。当这些交互变得复杂起来的时候,

        (2)组件化--模块化


        (3)单文件组件

        单文件组件就是js、css、html存在一个文件内。vue单文件组件中style标签scoped属性的作用:通过scoped的属性来限制当前css样式在当前模板的应用,规定了样式的作用域,防止其污染到其他的组件。

<style scoped>
  span{ color:red; }
</style>

        同时也可以在单文件组件内的template里使用预加载器

<!--lang="jade":指定template内部使用的语言是jade-->
<template lang="jade">
  <!--内部是jade语法的代码-->
</template>

        style标签也可以使用预加载器

<style lang="less">
    span{ color:red; }
</style>

        vue的实例对象

        

vue组件引用及注册

        全局注册组件

        main.js

import Vue from 'vue'
//全局组件注册
Vue.component('my-header',{
    template:'<p>this is my {{name}}</p>',
    data:function(){
        return {name:'menvscode.com'}
    }
})

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

        index.html

<body>
    <div id="app">
    	<my-header></my-header>
    </div>
</body>

        组件局部注册

        main.js

import Vue from 'vue'
var myHeaderChild = {
    template:'<p>this is my header child</p>'
}
var myHeader = {
    template:'<p>this is my header</p>',
    data:function(){
        return {name:'menvscode.com'}
    },
    components:{
        'my-header-child': myHeaderChild
    }
}

new Vue({
    el: '#app',
    components: {
        'my-header':myHeader
    }
})

        

vue基本概念

        (1)全局api:https://cn.vuejs.org/v2/api/#全局-API

        Vue.extend( options ):扩展vue构造器的方法;

        Vue.set( target, key, value ):给全局vue设置属性的方法;

        (2)实例选项:https://cn.vuejs.org/v2/api/#选项-数据https://cn.vuejs.org/v2/api/#选项-DOMhttps://cn.vuejs.org/v2/api/#选项-生命周期钩子https://cn.vuejs.org/v2/api/#选项-资源https://cn.vuejs.org/v2/api/#选项-组合

        (3)实例属性/方法:https://cn.vuejs.org/v2/api/#实例属性https://cn.vuejs.org/v2/api/#实例方法-数据https://cn.vuejs.org/v2/api/#实例方法-事件

        (4)指令:https://cn.vuejs.org/v2/api/#指令

        (5)内置组件:https://cn.vuejs.org/v2/api/#内置的组件


v-for 对象/数组



子组件


标签: vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码