Vue笔记（一）——Vue指令&模板

前言

用于记录个人学习vue笔记

Vue-MVVM模式

• M: model,称之为数据模型，在前端为对象的形式表现

let data = {msg:'我就是一个数据模型'}

• V：View，视图，也就是HTML

    我是视图

• VM: ViewModel,就是连接数据和视图的桥梁，当Model发送改变时，ViewModel便将数据映射到视图。

数据驱动模式和MVVM的关系：MVVM是数据驱动模式的一种实现，Vue是MVVM的一种实现

模板语法

模块语法已成为前端在数据驱动模式上View层最好的实现

插值

• 使用{{}}来绑定数据
• {{}}--可以进行js表达式的运算

    
    
{{name}}

let vm = new Vue({
    el:'#app',
    data:{
        name:'fhj'
    }
});

指令缩写

• v-bind

• v-on

指令

指令（directive），即原生的自定义属性，在vue中是以 v- 为前缀的自定义属性

• v-text

• v-html

let vm = new Vue({
    data:{
        addHtml:'fhj'
    }
});

• v-show

• v-if

• v-else-if
• v-else
• v-for

    {{value}}
    {{index}}    

• v-model

• v-pre

{{msg}} // {{msg}}

• v-once

{{msg}}