vue.js 学习——起步

  Vue.js 是一个数据驱动的js框架。最方便的一点就是，模板和数据是完全绑定的。不需要在timeout的时候调用$apply,或者监听store的事件，完全是自动更新的。Vue.js的一个基本用法是：

• 单页面

  假设我们有一个object

var object = {  message ：'hello world'};

还有一个template

<div id="app">{{message}}</div>

通过vue将二者绑定在一起

new vue({  el: '#app',  data:object});

• 作为Component

  我们可以将templete 和data绑定在一个vue里面，然后注册为一个component里面，以后就可以在这个标签里面使用了。

var Example = new Vue({  template:'<div>{{message}}</div>',  data:function(){       return:{          message:'hello world'     } // 返回一个对象,跟 template里面的message绑定   }});Vue.component('example', Example);

以后就可以在<example></example>里面使用了。component 里面允许嵌套component。通过使用props标签来定义从父component接收数据。使用slot标签来确定使用父component自己的template来修改父component的内容。

。

• 模块化 modularity

  模块化是前端的大趋势，vue可以自动把可选object转为component的构造器，因此可以简单的输出一个object。

// ./componentA.jsexport default{ template：‘<div>{{message}}</div>’, data(){    return {       message:'hello world!'    }  }}<pre name="code" class="javascript">// 在app.js中import ComponentA from './componentA'export default{ // use another component, in this scope only.  // ComponentA maps to the tag <component-a>  Component:{ComponentA},  template:'<div>                 <p> using another component</p>                  <component-a></component-a>

            </div>  '}

   同时 ，vue还支持把style，template，js 封装在一起export出去。

• 路由route

 Vue类似于React本身并不提供路由，但是官方提供了插件可以使用。

import Vue from 'vue'import VueRouter from 'vue-router'import App from './app.vue'import ViewA from './view-a.vue'import ViewB from './view-b.vue'Vue.use(VueRouter)const router = new VueRouter()router.map({  '/a': { component: ViewA },  '/b': { component: ViewB }})router.start(App, '#app')

然后在app.vue里面

<div> <p>this is a layout won't change</p> <route-view></route-view></div>

一个但应用的例子：

<div id="app"><input v-model="newTodos" v-on:click="addTodo" /><ul><li v-for="todo in todos">  <span>{{todo.text}}</span>  <button v-on:click="removeTodo($index)">x</button></li></ul></div><pre name="code" class="javascript">new Vue({  el:"#app",  data:{      newTodos: '',      todos:[{text:"hellow world"}]   },  method:{      addTodo:function(){         var text = this.newTodos.trim();         if(text){               this.todos.push({text:text});               this.newTodos = '';           }     },      removeTodo:function(index){          this.todos.splice(index,1);     }   }});