模板template的三种写法
一、Vue完整版,写在HTML里
![ba4fd2d974d2a611d946b58f6a2db82c.png](https://i-blog.csdnimg.cn/blog_migrate/6d17871c6b353083398396c9a400d273.jpeg)
二、Vue完整版,写在选项里
![c07e0079eecbad850063cf826a756ebe.png](https://i-blog.csdnimg.cn/blog_migrate/8373e72f078d69205460d2be7479331b.jpeg)
三、使用非完整版Vue,配合xxx.vue文件
![ba651553bbf5cdb3308f1b6f27fc3a1b.png](https://i-blog.csdnimg.cn/blog_migrate/22d292f8d50b231d5e74a9844a0b94d0.jpeg)
![509f2e0cfc27c8f657cb9ea053cc4f43.png](https://i-blog.csdnimg.cn/blog_migrate/125890b8caa46dc622c5063bf6fef5b3.png)
![e6de7e37f1c554a6b188297335e006df.png](https://i-blog.csdnimg.cn/blog_migrate/4df7a0cb356385cbe6ef9c5ec1247e6b.jpeg)
![2d08d97cce4f95bb0e982011e9e7eee7.png](https://i-blog.csdnimg.cn/blog_migrate/f480640fc334008932651fc9cfb5580d.jpeg)
![b0f7833374022ac773215e42760a5f1a.png](https://i-blog.csdnimg.cn/blog_migrate/386682c53cfc55916e15d0cf25e671a5.jpeg)
![852305d33284c0eabc8ae62cf055c883.png](https://i-blog.csdnimg.cn/blog_migrate/60bf41288e8901e12ec145904c1b4b95.png)
![a535e469f9fecaa96f7877a1a82a5cf3.png](https://i-blog.csdnimg.cn/blog_migrate/3cb4926fbdcb4bd61fe90d5906ddfa46.jpeg)
value在前,key在后;如果出现了v-for后面必须加上:key=""
![f71e12aeafa09f5996cc0d17e88661b5.png](https://i-blog.csdnimg.cn/blog_migrate/3cd616c93da682ebbed222c79ad6d7dc.jpeg)
![c48c0ad6f1b22ae2bfec954d605563a8.png](https://i-blog.csdnimg.cn/blog_migrate/b2df8591484428236153c31c34153077.png)
指令
![20f4287245eb46b52d59c5c5309bbc33.png](https://i-blog.csdnimg.cn/blog_migrate/14509d4eccc06d0ac70ca0adfbc715c0.jpeg)
只有两个是不加v-的指令,第一个是事件v-on:click="add"缩写位@click="add",第二个是绑定v-bind:src="x"缩写:src="x"
修饰符
![90a3a4475260fdeed46ac464b38ab4e5.png](https://i-blog.csdnimg.cn/blog_migrate/a28877aaafff7f0c889f2f0988174080.jpeg)
只需记住 .stop;.stop.prevent
事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为v-on
在监听键盘事件时添加按键修饰符:
![160cfbf9d30c558f4170fdb7ffb78df6.png](https://i-blog.csdnimg.cn/blog_migrate/27789314087d7b5d16405c01c2a7f369.png)
![2220da0ac63fba86659be03b9535ed92.png](https://i-blog.csdnimg.cn/blog_migrate/dd707f3964132373a890f0d437db3fbf.jpeg)
![74dda36047b1b003e4daee3f5741d9d1.png](https://i-blog.csdnimg.cn/blog_migrate/c844c46a7b6b21d591e8f48259b02e70.png)