Vue模板语法

  1. 引入Vue.js
    1. 创建Vue对象
      el : 指定根element(选择器)
      data : 初始化数据(页面可以访问)
    2. 双向数据绑定 : v-model
    3. 显示数据 : {{xxx}}
    4. 理解vue的mvvm实现

实例:
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 创建Vue实例(Vue是一个vue.js库提供的构建函数)
const vm = new Vue({//配置对象(属性名必须是指定的一些名称)
el: '#app',//element:选择器,表明将页面哪个元素交给Vue管理
data: {//数据(Model)
username: 'Vue'
}
})
vm.username = 'kobe';
</script>

MVVM:
Model:模型,数据对象(data)
View:视图,模板页面
ViewModel:视图模型(Vue的实例)

  1. 模板的理解:
    动态的html页面
    包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
  2. 双大括号表达式
    语法: {{exp}}
    功能: 向页面输出数据
    可以调用对象的方法
  3. 指令一: 强制数据绑定
    功能: 指定变化的属性值
    完整写法:
    v-bind:xxx='yyy' //yyy会作为表达式解析执行
    简洁写法:
    :xxx='yyy'
  4. 指令二: 绑定事件监听
    功能: 绑定指定事件名的回调函数
    完整写法:
    v-on:click='xxx'
    简洁写法:
    @click='xxx'
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在vue中模板是什么? 这个就是模板: Vue.js 使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定...
    廖马儿阅读 291评论 0 0
  • 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的...
    mxjsxz阅读 484评论 0 1
  • Vue.js使用基于HTML的模板语法,允许开发者声明式地将DOM绑定到底层Vue实例。所有Vue.js的模板都是...
    JunChow520阅读 3,264评论 0 0
  • Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 V...
    何wife阅读 350评论 0 0
  • vue模板语法 插值 文本 1.“Mustache”语法插值: html: js: 2.v-text指令html ...
    樊海鹏阅读 3,881评论 1 0