vue基础之模板语法、指令

歪题

我觉得我学react之后，整个人有点不好了，学react过程中Vue是怎么写来着？

现在重温Vue，react是怎么写来着？

模板语法
 

<span>Message: {{ msg }}</span>
 <span v-html="rawHtml"></span></p>
{{ number + 1 }}
 {{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('') }}
 <div v-bind:id="'list-' + id"></div>


<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

<p v-if="seen">现在你看到我了</p>

<a v-bind:href="url">...</a>

<a v-on:click="doSomething">...</a>

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>


动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

修饰符

<form v-on:submit.prevent="onSubmit">...</form>

<input v-model.lazy="msg" >
转变为使用 change 事件进行同步

<input v-model.number="age" type="number">
转成number,但是在type为number前提下，可以输入e但是typeof会变成string

<input v-model.trim='trim'>




<!-- 阻止单击事件继续传播-->
<a v-on:click.stop="doThis"></a>



<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

       <div @click='aaa'>aaa
           <div @click.capture.stop='bbb'>bbb
               <div @click='ccc'>ccc</div>
           </div>
       </div>

点击ccc，捕获阶段bbb执行，stop阻止继续传播。于是ccc不执行。。




<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>


<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>



<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>