关闭搜索(ESC)
搜索标签:

vue.js学习总结

2016-01-12 浏览:2277 标签: vue.js 学习

学习vue

vue是一个非常牛逼的前端框架。可以这么说吧,mvvm,web component都插了一脚。

install

npm

npm install vue --save

bower

bower install vue --save-dev

比较支持npm安装。

vue有很多牛逼的应用,比如vue-router支持路由切换。文档地址

先说一个简单的开始吧

<div id="demo">
    <p>{{message}}</p>
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'hello vue.js!' //初始化数据
        }
    });
</script>

查看demo vuedemo/index.html

了解一些标签

v-model

就是上面的功能,用于数据双向绑定的。

v-for

渲染列表。

<li v-for="todo in todos">
    {{todo.text}}
</li>

data: {
    todos: [
        {text: 'text'},
        {text: 'text2'}
    ]
}

v-on

处理用户操作

<button v-on:click="op">click</button>

methods: {
    op: function() {
        alert("right");
    }
}

大致预览一个demo

<div id="demo">
    <span>{{message}}</span>
    <input type="text" v-model="newTodo"  v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="todo in todos">
            <span>{{todo.text}}</span>
            <input type="button" value="x" v-on:click="deleteTodo($index)">
        </li>
    </uL>
</div>
<script type="text/javascript">
var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js',
        newTodo: '',
        todos: [
            {text: 'test'}
        ]
    },
    methods: {
        addTodo: function() {
            var text = this.newTodo.trim();
            if(text) {
                this.todos.push({text: text});
                this.newTodo = '';
            }
        },
        deleteTodo: function(index) {
            this.todos.splice(index, 1);
        }
    }
});
</script>

查看demo vuedemo/index2.html

vue里的生命周期

created

类型: function

详情: 在实例创建之后同步调用。此时实例已经结束解析选项,这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调。但是还没有开始 DOM 编译,$el还不存在。

beforeCompile

类型: Function

详情: 在编译开始前调用。

compiled

类型: Function

详情: 在编译结束后调用。此时所有的指令已生效,因而数据的变化将触发 DOM 更新。但是不担保$el已插入文档。

attached

类型: Function

详情: 在vm.$el插入 DOM 时调用。必须是由指令或实例方法(如$appendTo())插入,直接操作vm.$el不会 触发这个钩子。

detached

类型: Function

详情: 在vm.$el从 DOM 中删除时调用。必须是由指令或实例方法删除,直接操作vm.$el不会 触发这个钩子。

beforeDestroy

类型: Function

详情: 在开始销毁实例时调用。此时实例仍然有功能。

destroyed

类型: Function

详情: 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑,所有的子实例也已经被销毁。如果有离开过渡,destroyed 钩子在过渡完成之后调用。

组件之间通信

props

demo

Vue.component('child', {
    props: ['msg'],
    template: '<div class="test">{{msg}}</div>'
});

var demo3 = new Vue({
    el: '#demo3',
    data: {
        msgs: 'hello world,hahahaha'
    },
    methods: {
        changedad: function(e) {
            this.msgs = +(new Date());
            return false;
        } 
    }
});
<div id="demo3">
    <child v-bind:msg="msgs"></child>
    <a v-on:click='changedad'>修改</a>
</div>

以上是parent向child组件进行通信

<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify">Dispatch Event</button>
    <button v-on:click="clearNotify">clear msg</button>
</template>

<div id="events-example">
    <p>Messages: {{ messages | json}}</p>
    <child-type></child-type>
</div>
Vue.component('child-type', {
    template: '#child-template',
    data: function() {
        return {
            msg: 'hello'
        }
    },
    methods: {
        notify: function() {
            if(this.msg.trim()) {
                this.$dispatch('child-msg', this.msg);
                this.msg = '';
            }
        },
        clearNotify: function() {
            this.$dispatch('child-msg-clear');
        }
    }
});

var parent = new Vue({
    el: '#events-example',
    data: {
        messages: []
    },
    events: {
        'child-msg': function(msg) {
            this.messages.push(msg);
        },
        'child-msg-clear': function() {
            this.messages = [];
        }
    }
});

以上是child向parent进行的通信。

这主要在意于事件接口。

  • 使用$on()监听事件。
  • 使用$emit在它上面触发事件。
  • 使用$dispatch派发事件,事件沿着父链冒泡。
  • 使用$broadcast()广播事件,事件向下传导给所有的后代。

双向绑定

.sync: 强制双向 .once: 单次绑定

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

编写可复用组件

在编写组件时,记住是否要复用组件有好处。一次性组件跟其他组件紧密耦合没有关系,但是可复用组件应当定义一个清晰的公开接口。

Vue.js组件API来自三部分--prop,事件和slot:

  • prop 允许外部环境传递数据给组件;
  • 事件 允许组件触发外部环境的action;
  • slot 允许外部环境插入内容到组件的视图结构内。
<my-component
    :foo="baz"
    :bar="qux"
    @event-a="doThis"
    @event-b="doThat">
    <img slot="icon" src="">
    <p solt="main-text">Hello</p>
</my-component>

待续~~~

添加评论