2021-07-05

模板语法

- v-once一次性插值
当数据改变后，该处数据不会更新 如图所示，当输入框中的值改变时，第一行的message并不会改变，仍然是"Hello Vue.js!"；而第二行的message会随着输入框输入的值改变而改变

- v-text操作纯文本 缩写为{{}}

- v-html
会将数据解释为html,即会将html标签进行转化，输出时就不包含html标签了，如图所示，第一个msg1显示普通文本内容"< strong>这是新的测试数据< /strong>"；通过v-html指令，会转化加粗标签，显示的msg1便是加粗的"这是新的测试数据"

- v-bind用于绑定html属性,可以绑定一个或多个属性值
- 语法糖为 :
具体用法可以参照此链接的作者文档：v-bind的一些理解和思考
- v-on:事件名事件绑定
- 语法糖为 @事件名
具体用法可以参照此链接的作者文档：v-on指令
- v-model用于表单组件的绑定，如input、select等，它与v-text的区别在于v-model实现表单组件的双向绑定
具体用法可以参照此链接的作者文档：

1. vue中v-model详解
2. Vue 进阶教程之：帮你彻底理解 v-model 以及在组件上如何使用

vue事件修饰符

- .prevent阻止默认程序的运行
- .stop阻止冒泡，阻止事件向父元素传递（冒泡：子元素的事件传递到父元素）
- .once事件只会触发一次
- capture打乱冒泡顺序
- .self不让子元素的事件触发自己绑定的事件，但不会阻止冒泡！
关于vue事件修饰符的详细用法请参照此链接的作者文档：vue-事件修饰符-详解