Vue-01

一、基本模板语法

1.插值

//1.文本
<p>hello{{message}}</p>
<p v-text="mssage">hello</p>	//message代表的内容会将hello代替
<p v-once v-text="message">hello</p>	//数据改变是，内容不会变
//2.HTML
{{}}会将html内容作为字符串输出，如果想输出标签，那么使用v-html
<p v-html="message"></p>
{{}}不能用于标签的属性，可以用v-bind
<button v-bind:disabled="isDisabled">按钮</button>
//3.简单表达式
{{}number + 1}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id"></div>
<!- 这是语句，不是表达式 ->{{ var a = 1}}
<!- 流控制也不会生效，请使用三元表达式 ->{{if(ok){return message} }}
//4.防止刷新或加载时的闪烁
<style>
    [v-cloak] {
        display:none !important;
    }
</style>
<div v-cloak>
    {{message}}
</div>

2.指令

v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once

3.指令缩写

v-bind
	<!-- 完整语句 -->
	<a v-bind:href="url">...</a>
	<!-- 缩写 -->
	<a :href="url">...</a>
v-on
	<!-- 完整语句 -->
	<a v-on:click="doSomething">...</a>
	<!-- 缩写 -->
	<a @click="doSomething">...</a>