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在模板里进行提取数组中的单个元素，渲染出来整个组件