1. 模板的理解
1) 动态的 html 页面
2) 包含了一些 JS 语法代码
a. 双大括号表达式
b. 指令(以 v-开头的自定义标签属性)
2. 双大括号表达式
1) 语法: {{exp}} 2) 功能: 向页面输出数据 3) 可以调用对象的方法
3. 指令一: 强制数据绑定
1) 功能: 指定变化的属性值 2) 完整写法: v-bind:xxx=’yyy’ //yyy 会作为表达式解析执行 3) 简洁写法: :xxx=’yyy’
4. 指令二: 绑定事件监听
1) 功能: 绑定指定事件名的回调函数 2) 完整写法: v-on:keyup=’xxx’ v-on:keyup=’xxx(参数)’ v-on:keyup.enter=’xxx’ 3) 简洁写法: @keyup=’xxx’ @keyup.enter=’xxx’
5. 编码
<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>
了解前端培训开发技术知识,关注我,有更多精彩内容与您分享!
文章转载链接:http://www.atguigu.com/news/10465.html