vue学习笔记 概述（一）

vue里 最常见的 最普遍的用法 应该是

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

下面把所有使用方法尽可能列出来 方便一目了然的参考用法

 <div id="app">
     <span v-bind:title="message" v-on:click="reverseMessage">{{message}}</span>
     <p v-if="seen">Now you see me</p>
     <ol>
         <li v-for="todo in todos">
             {{ todo.text }}
         </li>
     </ol>
 </div>

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script type="text/javascript">
     var vm = new Vue({
         el: '#app',
         data: {
             message: 'hello',
             seen: true,
             todos: [
                 {text: 'Learn JavaScript'},
                 {text: 'Learn Vue'},
                 {text: 'Build something awesome'}
             ]
         },
         methods: {
             reverseMessage: function () {
                 this.message = this.message.split('').reverse().join('')
             }
         }
     });

     vm.$watch('message', function (newValue, oldValue) {
         console.log(newValue, oldValue);
     });
 </script>

如果想输出data里的message的值，就可以在模板里使用{{message}}来直接输出文本

input的value可以用<input v-model="question">把question绑定到input的value上

如果想把值绑定在某个标签属性上，就用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在模板里进行提取数组中的单个元素，渲染出来整个组件