越来越多的人在使用Vue。当你第一次接触vue的时候，你会经常接触到一些指令。总结一下，做个演示。

说明

v-textv-html v-bindv-onv-modelv-for

密码

学习技术时最好看看代码是什么样子的。

v文本

说明：更新DOM对象的文本内容

h1 v-text='msg'/h1

v-html

解释：更新DOM对象的内部HTML

h1 v-html='msg'/h1

垂直装订

动作：当表达式的值改变时，它的联合影响以响应的方式作用于DOM

语法：

V-bind:title='msg'/缩写：title='msg '！-完整语法-av-bind: href=' URL' rel='外部nofollow' rel='外部nofollow'/a！-缩写-a: href=' URL' rel='外部nofollow' rel='外部nofollow'/av-on

角色：绑定事件

语法：v-: click=' say '或v-: click=' say '(参数'，$event ')

缩写：@click='say '

描述：绑定事件是在方法中定义的

！-完整语法-a v-: click='做点什么'/a！-缩写-a @ click='做点什么'/av-model

功能：在表单元素上创建双向数据绑定

描述：倾听用户输入事件以更新数据

案例：计算器

输入类型=' text ' v-model=' message ' placeholder=' edit me ' pmessage is : { { message } }/PV-for

功能：基于源数据多次渲染元素或模板块

div v-for=' items ' { item . text } }/div！- item是当前项，index是列表“{item}}-{{index}}/p中的index-p v-for=' (item，index)'！- item是值，key是键，index是索引-p v-for=' (item，key，index)在obj“{ item } }-{ { key } }/p完整大小写

模板div p v-text=' MSgdata '/p p { { MSgdata } }/p p v-text=' MSghtml '/p p v-html=' MSghtml '/p输入v-model=' MSgmmodel '类型='text'/Pv-model数据：span v-text=' MSgmmodel '/span/p按钮v-:单击=' alert '按钮/按钮p v-for='列表中的'(item，Index)=' Index键$ notify({ title : ' request exception '，message:' notification'})})，已装载： function(){ console . log('-已装载装载结束状态-。

效果如下：

目标

介绍几个基本说明，更多说明请参考官方文件

参考

Vue官方参考

摘要

以上说明是边肖介绍的Vue常用的，案例齐全，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！