模板语法
1. 效果 (02_ 模 板 语 法 /test.html)
2. 模板的理解
1) 动态的 html 页面 2) 包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性)
3. 双大括号表达式
1) 语法: {{exp}} 2) 功能: 向页面输出数据 3) 可以调用对象的方法
4. 指令一: 强制数据绑定
1) 功能: 指定变化的属性值 2) 完整写法: v-bind:xxx=’yyy’ //yyy 会作为表达式解析执行 3) 简洁写法: :xxx=’yyy’
5. 指令二: 绑定事件监听
1) 功能: 绑定指定事件名的回调函数 2) 完整写法: v-on:keyup=’xxx’ v-on:keyup=’xxx(参数)’ v-on:keyup.enter=’xxx’ 3) 简洁写法: @keyup=’xxx’ @keyup.enter=’xxx’
6. 编码
<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><br> <a :href=”url”>访问指定站点 3</a><br>
<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 type=”text/javascript”> new Vue({ el: ‘#app’, data: {// data 的 所 有 属 性 都 会 成 功 vm 对 象 的 属 性 , 而 模 板 页 面 中 可 以 直 接 访 问 msg: ‘NBA I Love This Game!’, url: ‘http://www.baidu.com’ }, methods: { handleClick () { alert(‘处理点击’) } } }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 大数据培训 HDFS概述
下一篇: 为什么要学习大数据，大数据的价值体现在什么方面
