前端开发之Vue模板学习

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