二 模版语法
主要参考的VUE基础教程(模版语法):https://cn.vuejs.org/v2/guide/syntax.html
模版的理解:动态的HTML的页面,包含了一些JS语法代码
- 大括号表达式
- 指令(以
v-
开头的自定义标签属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_模板语法</title>
</head>
<body>
<div id="app">
<!--
双大括号表达式
语法: {{exp}} 或 {{{exp}}}
功能: 向页面输出数据
可以调用对象的方法
-->
<h2>1. 双大括号表达式:针对textContent</h2>
<p>{{userName}}</p>
<p>{{userName.toUpperCase()}}</p>
<p>{{userName.toUpperCase().length}}</p>
<p>{{userName+':胖先森'}}</p>
<p v-text="url"></p>
<p v-html="url"></p><!-- innerHTML -->
<!--
功能: 指定变化的属性值
完整写法:
v-bind:xxx='yyy' //yyy会作为表达式解析执行
简洁写法:
:xxx='yyy'
-->
<h2>2. 指令一: 强制数据绑定</h2>
<input type="text" :value="bool?userName:'死鬼'">
<img src="imgSrc" style="width: 100px;"><br/><!-- 就是HTML语法,无法显示图片 -->
<img v-bind:src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 -->
<img :src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 -->
<!--
功能: 绑定指定事件名的回调函数
完整写法:
v-on:click='xxx'
简洁写法:
@click='xxx'
-->
<h2>3. 指令二: 绑定事件监听</h2>
<a href="javascript:;" v-on:click="test01">测试回调函数</a><br/>
<a href="javascript:;" @click="test02">简写方式</a><br/>
<button @click="test03('悟空')">事件传递参数-1</button><br/>
<button @click="test03(userName)">事件传递参数-2</button><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
const vm = new Vue({
el:"#app",
data:{
userName:"pang sir",
url:"<a href='http://www.baidu.com'>百度一下</a>",
imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
bool:false
},
methods:{
test01:function(){
console.log(Math.random());
},
test02(){//注意写法
alert("Hello World");//ECMAScript6语法
},
test03:function(content){
console.log(content);
}
}
})
};
</script>
</body>
</html>
可以完成表达式的计算,查看官方文档,其实实话说写多了VUE是不是可能会造成JavaScript能力的减弱?