尚硅谷的vue旅程03-vue的模板语法

一.使用Vue时的一些js语法代码：

1.双方大括号表示
2.指令（以v-开头的自定义属性标签）

二.双大括号表达式

1.语法:{{exp}}
2.功能:向页面输出数据
3.可以调用内置对象的方法。例如:字符串对象的toUpperCase()、toLowerCase()

三. 指令一: 强制绑定数据

1.作用:指定变化的属性值
2.完整写法: v-bind:xxx="qqq" //qqq会作为表达式解析执行
3.简介写法: :xxx="qqq"

四.指令二:绑定监听数据

1.作用:绑定监听事件的回调函数名（可以传参数！，也可以加修饰符！）
2.完整写法: v-on:click="回调函数名"、v-on:keyup="xxx(参数)"  v-on:click.enter="xxx(参数)"
3.简介写法： @click.enter="xxx(参数)"

代码示例

<div id="app">
	<h4>1.双大括号</h4>
	<p>{{msg}}</p> <!-- textContent -->
	<p>{{msg.toUpperCase()}}</p>  <!-- 双括号内可以调用对象的方法 -->
	<p v-text="msg1"></p>   <!-- 相当于属性textContent -->
	<p v-html="msg1"></p>   <!-- 相当于属性innerHTML -->   
	
	<h4>指令一:强制绑定数据 v-bind</h4>
	<img v-bind:src="imgURL">
	<img :src="imgURL">  <!-- 简介写法 -->
	
	<h4>指令二:绑定事件监听 v-on</h4>
	<button v-on:click="test1('你好')">test1</button>
	<button @click="test2('你好02')">test2</button>   <!-- 简介写法 -->
	</div>
	
<script src="../js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			msg:"hello",
			msg1:"<p>这里是p标签</p>",
			imgURL:"https://cn.vuejs.org/images/logo.png"
		},
		methods:{ 
			test1 (tes) {    //es6简介语法
				console.log(tes);
			},
			test2 (tes2) {    //es6简介语法
				console.log(tes2);
			}
		}
	})
</script>