v-text 渲染
v-text 用于向所在的标签中渲染文本内容,不会解析标签 。
v-html 也是用于向所在的标签中渲染文本内容,可以解析标签。
v-text 与 v-html 会替换掉标签中所有的内容,而插值语法不会。
注:一定要在可信的内容上使用 v-html,永远不要用在用户提交的内容上,避免坏人利用动态渲染,获取用户的 cookie 进行 XSS 攻击。
v-bind
v-bind 用于动态绑定标签里边的属性比如动态绑定a元素的 href 属性比如动态绑定img元素的 src 属性
<div id="app"> <h1>{{message}}</h1> <a v-bind:href="url">百度</a> </div>
也可以简介为 : 冒号,这两种写法效果相同【常用方式】
<div id="app"> <h1>{{message}}</h1> <a :href="url">百度</a> </div>
v-on
<input type=‘button' v-on:click='num++'/>
v-on简写:
<input type=‘button' @click='num++'/>
v-if、v-else-if、v-else
我们一般不会使用 v-else-if,因为这样的代码不美观。
v-show
v-show 的用法和v-if非常相似,也用于决定一个元素是否渲染
v-if 指令会动态地创建或移除 DOM 元素 ,从而控制元素在页面上的显示与隐藏。
v-show 指令会动态为元素 添加或移除 style=“display: none;” 样式 ,从而控制元素的显示与隐藏。
v-for(遍历数组)
//语法1 <li v-for='item in list'>{{item}}</li> //语法2 <li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
v-model
双向绑定指令也叫表单元素绑定,vue提供了 v-model 双向数据绑定 指令,用来辅助开发者在 不操作 DOM 的前提下, 快速获取表单的数据。
vue中使用 v-model 指令来实现表单元素和数据的双向绑定,经常用于表单 input 和 textarea 元素。
v-cloak
指令用于:当网速较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染
v-cloak 本质上是一个特殊属性,Vue 实例创建完毕并接管容器后,就会删掉 v-cloak 这个属性
原创作者:吴小糖
创作时间:2023.2.5