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.js

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

});