前端开发之Vue模板学习

模板语法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.编码divid=”app”

h21.双大括号表达式/h2

p{{msg}}/p

p{{msg.toUpperCase()}}/ph22.指令一:强制数据绑定/h2

ahref=”url”访问指定站点/abr

!-不能诗用–

av-bind:href=”url”访问指定站点2/abr

a:href=”url”访问指定站点3/abrh23.指令二:绑定事件监听/h2

buttonv-on:click=”handleClick”点我/button

button

click=”handleClick”点我2/button/divscripttype=”text/javascript”src=”../js/vue.js”/script

scripttype=”text/javascript”newVue(

{

el:‘#app’,data:{//data的所有书行都会成功vm对象的书行,而模板夜面中可以直接访问msg:‘NBAILoveThisGame!’,url:‘


转载请注明:http://www.aierlanlan.com/rzgz/2115.html