Vue001_模板语法

模板的理解

1) 动态的 html 页面
2) 包含了一些 JS 语法代码
a. 双大括号表达式
b. 指令(以 v-开头的自定义标签属性)

双大括号表达式

1) 语法: {{exp}}
2) 功能: 向页面输出数据
3) 可以调用对象的方法

指令一: 强制数据绑定

1) 功能: 指定变化的属性值
2) 完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行
3) 简洁写法: :xxx='yyy'

指令二: 绑定事件监听

1) 功能: 绑定指定事件名的回调函数
2) 完整写法:
v-on:keyup='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
3) 简洁写法:
@keyup='xxx'
@keyup.enter='xxx'

代码示例：

【友情提示：使用的hBuilderX编程软件】

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>no1</title></head><body><!-- 双大括号表达式1) 语法: {{exp}}2) 功能: 向页面输出数据3) 可以调用对象的方法 --><div id="app">{{message}}</div><p id="ptest">{{paddress}}</p><script type="text/javascript" src="js/vue.js"></script><script>var app = new Vue({/* el  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 */el: '#app',data: {// data 的所有属性都会成功vm 对象的属性, 而模板页面中可以直接访问message: 'Hello Vue!'}})var paddress = new Vue({el: '#ptest',data:{paddress: 'Hello George!'}})</script></body>
</html>

结果展示

代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo02</title></head><body><div id="app"><!-- 允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 --><input type="text" v-model="username" /><!-- 双大括号表达式1) 语法: {{exp}}2) 功能: 向页面输出数据3) 可以调用对象的方法 --><p>hello {{username}}</p><h2>1. 双大括号表达式</h2><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({el: '#app',data: {username: 'George',msg: 'good'}})</script></body>
</html>

结果展示

代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Demo03</title></head><body><div id="app"><h2>1.双大括号表达式</h2><!-- 功能: 向页面输出数据 --><p>{{msg}}</p><p>{{msg.toUpperCase()}}</p><h2>2.指令一：强制数据绑定</h2><a href="url">访问指定站点</a><br /><!-- 不能使用 --><!-- 功能: 指定变化的属性值 --><a v-bind:href="url">访问指定站点2</a><a :href="url">访问指定站点3</a><h2>3.指令二：绑定事件监听</h2><!-- 功能: 绑定指定事件名的回调函数 --><button v-on:click="handleClick">点我</button><button @click="handleClick">点我2</button></div><script type="text/javascript" src="js/vue.js"></script><script>new Vue({/* el  提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 */el: '#app',data: {// data 的所有属性都会成功vm 对象的属性, 而模板页面中可以直接访问msg: 'good',url: 'http://www.baidu.com'},methods: {handleClick() {alert("处理点击")}}})</script></body>
</html>

结果展示

Vue001_模板语法相关推荐

Vue的模板语法学习
模板语法 1.插值 a.文本数据绑定最常见的形式就是使用 "Mustache" 语法(双大括号)的文本插值我们在普通插值的时候无论何时,绑定的数据对象上 msg 属性发生了改变 ...
Django 的模板语法之过滤器
后端朝前端页面传递数据的方式# 第一种return render(request,'index.html',{'n':n})# 第二种return render(request,'index.html ...
django之模板语法
1. 变量 Django 模板中遍历复杂数据结构的关键是句点字符句点符 views.py def index(request):'''模板语法:渲染变量 -> {{}}1. 深度查询,用的句点 ...
angular2的模板语法
Angular 应用管理着用户之所见和所为,并通过 Component 类的实例(组件)和面向用户的模板来与用户交互. 从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经 ...
Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
4.Vue 模板语法
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. Vue模板语法这篇文章我们来 ...
Django从理论到实战(part19)--DTL模板语法
学习笔记,仅供参考参考自:Django打造大型企业官网–Huang Y:官方文档本系列Blog以应用为主,理论基础部分我在后端专栏的Django系列博客已经写过了,如果有些需要补充的知识点,我会在 ...
vue加载时闪现模板语法-处理方法
问题:使用VUE时,页面加载瞬间,会闪现模板语法,例如{{ item.name }}等解决办法: 1.可以通过VUE内置的指令v-cloak解决这个问题(推荐) 具体实现: <ul v-clo ...
Django07:模板语法/标签/inclusion_tag/模版的继承
模板语法传值列表:l=['a','b','c'] 集合:se{'a','yy','ss'} 元组:t=(111,222,333) render(request.'index,html',locals ...

Vue001_模板语法

模板的理解

双大括号表达式

指令一: 强制数据绑定

指令二: 绑定事件监听

代码示例：

结果展示

代码展示

结果展示

代码展示

结果展示

Vue001_模板语法相关推荐

最新文章

热门文章