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

});