Vue 模板基础语法

vue的模板语法其实挺简单易懂，大概有这几种用法。

所谓的插值就是把vue中遍历插入到这个dom的innerText里,它的格式如下：

<p>{{ msg }}</p>

有人可能会有疑问，为什么不插入innerHTML里，这里要注意一个xss问题，如果你的网页被人篡改，这时候随意插入一段html代码到innerHTML，有可能会对访问者的浏览器造成破坏。在vue3中还是保留了v-html，但是使用的时候最好先过滤一次xss。

其次，插值语法还支持表达式，比如如下这种代码

<p>{{ flag ? msg1 : msg2 }}</p>

如果flag变化，模板也是会自动更新

指令其实是一次对dom操作功能的完整封装，它有着相应的钩子函数，从dom的挂载，更新，渲染，卸载都有相应的钩子，这样你可以把一个功能完整的封装。比如element中的v-loading.

vue中还自己封装了许多常用的指令，比如v-show,v-if，v-model

dom中有许多事件，比如对按钮的点击，对键盘的点击，都是通过事件来处理的。这里其实也是我们主要的逻辑，vue中已经有对事件比较完整的处理.在vue中用v-on来绑定事件，可以简写为@

<button v-on:click="handleClick()"></button>
<button @click="handleClick()"></button>

同时vue还对事件的绑定提供了一些修饰符，比如@click.stop,@click.prevent等等都可以在碰到具体问题的时候再去查找资料。

<child v-bind:a="a" :b="b"></child>

对于dom而言，vue会把你的值作为dom的属性，对于子组件而言，vue会把你的值作为props。

这里有一个比较有意思的功能，可以一次性绑定多个值，我觉得这个小tips很有用，可以我们写绑定的次数

const obj = reactive({a:1,b:2})
<child v-bind="obj"></child>

好了，关于模板的语法就基本讲完了，模板的主要意义还是构建app的html结构，或者叫做皮。但是很多时候皮上比如与js有交互，因此才需要这些模板语法。如果你只是纯html，其实你可以不要单文件组件，写个纯dom字符串，或者用js创建dom,这样反而更效。

vue3就应该这样学-5