vue里 最常见的 最普遍的用法 应该是
var app = new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue!‘
}
})
下面把所有使用方法尽可能列出来 方便一目了然的参考用法
1 <div id="app"> 2 <span v-bind:title="message" v-on:click="reverseMessage">{{message}}</span> 3 <p v-if="seen">Now you see me</p> 4 <ol> 5 <li v-for="todo in todos"> 6 {{ todo.text }} 7 </li> 8 </ol> 9 </div> 10 11 <script src="https://unpkg.com/vue/dist/vue.js"></script> 12 <script type="text/javascript"> 13 var vm = new Vue({ 14 el: ‘#app‘, 15 data: { 16 message: ‘hello‘, 17 seen: true, 18 todos: [ 19 {text: ‘Learn JavaScript‘}, 20 {text: ‘Learn Vue‘}, 21 {text: ‘Build something awesome‘} 22 ] 23 }, 24 methods: { 25 reverseMessage: function () { 26 this.message = this.message.split(‘‘).reverse().join(‘‘) 27 } 28 } 29 }); 30 31 vm.$watch(‘message‘, function (newValue, oldValue) { 32 console.log(newValue, oldValue); 33 }); 34 </script>
如果想输出data里的message的值，就可以在模板里使用{{message}}来直接输出文本
如果想把值绑定在某个标签属性上，就用v-bind:title="message"，其中v-bind称作 指令
如果想条件判断标签显示或隐藏，可以用v-if="seen"
如果想循环一个列表，可以用v-for="todo in todos"，这个属性应该写在要被循环输出多次的标签上
如果想侦听点击事件，可以用v-on:click="reversMessage"，并且把方法写在methods属性中
vue组件：
<div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script type="text/javascript"> Vue.component(‘todo-item‘, { props: [‘todo‘], template: ‘<li>{{todo.text}}</li>‘ }); var app7 = new Vue({ el: ‘#app-7‘, data: { groceryList: [ {text: ‘Vegetables‘}, {text: ‘Cheese‘}, {text: ‘Whatever else humans are supposed to eat‘} ] } }) </script>
其中使用了v-bind来绑定for循环中的单个item和标签属性todo，再用todo在模板里进行提取数组中的单个元素，渲染出来整个组件
原文：http://www.cnblogs.com/zhishaofei/p/6344999.html