vue入门学习笔记

一 模板指令简写：

v-on:  ——> @    例如：v-on:click ——> @click

v-bind: ——> :     例如：v-bind:title ——> :title

二 模板指令等号后的内容是js表达式

<div id="root">
    <div v-bind:title="'Dell lee ' + title"></div>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            title: "this is a title"    
        }
    })
</script>

输出title为：Dell lee this is a title

三 双向数据绑定

<div id="root">
    <input v-model="content" />
    <div>{{content}}</div>
</div>

<script>
    new Vue({
        el: "#root",
        data: {
            content: "Hello World"    
        }
    })
</script>

如图：当改变input框的值时，实例中的content值会跟着改变

四 常用指令

v-if ：显示隐藏（通过页面添加和删除标签）

v-show：显示隐藏（通过style="display：none" 来实现）

v-for：数据循环

五 组件

定义全局组件

子组件通过属性(props)向父组件传值