VUE:模板语法(小白自学)
VUE:模板语法
一:何为声明式
安装规定的语法,去实现一些效果(不需要管流程)。
二:模板语法
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1 模板的理解:动态的html页面,包含了一些js语法代码
双大括号表达式
指令(以v-开头的自定义标签属性)
2 双大括号表达式
语法:{{exp}} 或 {{{exp}}}
功能:向页面输出数据
可以调用对象的方法
3 指令一:强制数据绑定
功能:指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
4 指令二:绑定事件监听
功能:绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
-->
<div id="app">
<h2>1、双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p> <!--msg是变量,可以写js表达式-->
<p v-text="msg2"></p> <!-- 写入文本 value textContent-->
<p v-html="msg2"></p> <!-- 转换成html语句 innerHTML-->
<h2>2、指令一:强制数据绑定</h2>
<img v-bind:src="imgUrl" />
<img :src="imgUrl" />
<h2>3、指令二:绑定事件监听</h2>
<button v-on:click="test">点击有惊喜</button>
<button @click="test2(msg)">点击还有惊喜</button> <!-- 可以传变量-->
</div>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'taosir is studing...',
msg2:'<a href="http://www.baidu.com">taosir is here!</a>',
imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif'
},
methods:{
test(){
alert("意不意外!");
},
test2(m){
alert(m);
}
}
})
</script>
</body>
</html>
以上是 VUE:模板语法(小白自学) 的全部内容, 来源链接: utcz.com/z/379267.html