Vue学习笔记

笔记为个人理解。

Vue官网教程：https://cn.vuejs.org/v2/guide
Vue Api：https://cn.vuejs.org/v2/api

HTML

{{ vue对象中变量名 }}
将Vue对象中的变量进行响应式展示。

v-bind
将Vue对象中变量绑定到标签属性中。

v-if
通过Javascript逻辑表达式控制标签显示隐藏。

v-for
遍历Vue对象中数组变量。应与v-bind:key或:key一起使用，以保证循环数组中对象顺序与唯一性。

v-on
映射HTML事件，并调用绑定Vue对象中定义函数。

v-model
将HTML表单标签值与Vue对象变量进行绑定。并实现表单数值变化时，Vue对象变量自动变更。

Script

var vue = new Vue()
定义一个Vue对象。

var vue = new Vue(){el:'#app'}
定义一个Vue对象，并绑定到id为app的标签对象。

var vue = new Vue(){data: {message: 'Hello Vue.js'}}
定义一个Vue对象，并定义变量message。

var vue = new Vue(){methods: {test: function(){alter("test message")}}}
定义一个Vue对象，并定义函数test。

Vue.component('标签名', {
    props: 对象数组,
    template: 实际渲染HTML代码
})

Vue.component自定义一个标签包含两个参数。参数一为标签名称，参数二为对象，其中包含props标签对象数组，template标签实际渲染HTML代码。

Console命令

Vue对象名.变量名 = 值
响应式更新Vue对象变量。

Vue对象名.数组变量名.push({变量名: 值})
响应式添加Vue对象数组变量。

注意事项

Vue对象操作Javascript代码应放在被操作HTML标签对象后

示例

示例1：Vue对象设置HTML文本

<div id="app">
    {{ message }}
</div>

/* 创建一个Vue对象 */
var app = new Vue({
    /* 通过ID将Vue对象与HTML标签进行绑定 */
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

示例2：Vue对象设置HTML标签对象属性

<div id="app-2">
    <!-- 通过v-bind命令设置span标签的title属性 -->
    <!-- 将title属性设置为Vue对象中的message变量 -->
    <!-- 当页面加载时Vue初始化属性，并将Vue变量message绑定到span.title -->
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: '页面加载于 ' + new Date().toLocaleString()
    }
})

示例3：Vue对象控制HTML标签对象显示隐藏

<div id="app-3">
    <!-- 通过Vue对象中变量seen控制标签是否显示 -->
    <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: true
    }
})

示例4：循环遍历Vue对象中数组变量

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ]
    }
})

示例5：调用绑定Vue对象中函数

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

示例6：将表单标签与Vue对象变量进行绑定

<div id="app-6">
    <p>{{ message }}</p>
    <!-- 将表单标签与Vue对象变量进行绑定 -->
    <input v-model="message">
</div>

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

示例7：自定义标签

<div id="app-7">
    <ol>
        <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”，稍后再
        作详细解释。
        -->
        <!-- v-bind:todo 为标签中自定义对象进行赋值 -->
        <todo-item v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

/* 自定义一个标签 */
Vue.component('todo-item', {
    /* 标签中对象 */
    props: ['todo'],
    /* 标签实际渲染代码 */
    template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其它什么人吃的东西' }
        ]
    }
})

完整示例