前端基础知识学习---Vue.js学习（一）模板语法

Vue.js学习笔记

Vue.js的使用之HelloWord

• 引入Vue.js
• 创建Vue对象
  • 其中el：指定根element（选择器）
  • data：初始化数据（页面可以访问）
• 双向数据绑定：v-model
• 显示数据：{{xxx}}

实例如下

    
    
Hello {{username}}

MVVM在Vue中体现如下

model：模型，在Vue中就是数据对象（data）

view：视图，就是Vue中的模板页面

viewModel：视图模型（Vue的实例）

模板语法

模板：动态的HTML页面，包含了一些JS语法代码，例如大括号表达式，指令（以v-开头的自定义标签）

双大括号表达式

语法：{{xxx}}或者{{{exp}}},功能就是向页面输出数据，可以调用对象的方法，例如

    

        
{{msg}}
        
{{msg.toUpperCase()}}
    
    
    

强制数据绑定指令

数据强制绑定指令v-bind,使用如下 ，以：简写

    
{{msg}}
    
{{msg.toUpperCase()}}
    

绑定事件监听指令

绑定事件监听使用v-on指令按钮，在实例中简写如下@click

    
{{msg}}
    
{{msg.toUpperCase()}}
    
    按钮
    按钮
    按钮