vue指令大全
闲来无事,最近在总结笔记,也买了一本vue入的书,总结一下知识点
指令:
v-on指令
作用:为HTML元素绑定事件监听
语法:v-on:事件名称='函数名称()'
简写语法:@事件名称='函数名称()'
注:函数定义在methods配置项中
练习指令 对数组的增删
截图代码
v-show指令
作用:控制切换一个元素的显示和隐藏display属性控制
语法:v-show=表达式
根据表达式结果的真假,确定是否显示当前元素
true表示显示该元素;false表示隐藏该元素
<div id="box"> <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div> </div> </body> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-if显示与隐藏 (dom元素的删除添加 推荐使用v-show)
<div id="box"> <div style="width: 100px;height: 100px;background: black;" v-if="show"></div> <div style="width: 300px;height: 300px;background: blue" v-else=""></div> </div> <script> new Vue({ el: "#box", data(){ return { show: true } } }) </script>
v-model双向绑定数据
<input type="text" v-model="msg"/> {{msg}} <!--取数据-->
v-text='msg'
v-text
作用 : 操作元素中的纯文本
文本插值 : {{}}
区别:v-text是绑定在元素上,能避免在编译时闪现的问题 {msg}闪现
<div id="box"> 2 <div v-text="msg"></div> 3 </div> 4 5 <script> 6 new Vue({ 7 el: "#box", 8 data(){ 9 return { 10 msg:"11111" 11 } 12 }, 13 methods: { 14 say() { 15 alert(111); 16 } 17 } 18 }) 19 </script>
v-html
作用 : 操作元素中的HTML标签v-text会将元素当成纯文本输出,v-html会将元素当成HTML标签解析后输出
v-html 简写;{{{ }}}
<div id="box"> <div v-html="msg"></div> </div> <script> new Vue({ el: "#box", data(){ return { msg:"<h1>121212</h1>" } },
v-for='(item,index) in arr'
item 第一个参数 是元素 index第二个参数是下标 索引值
<div id="box"> 2 <ul> 3 <!--ng-repeat--> 4 <li v-for="item in arr"> 5 <span>{{item.name}}</span> 6 <span>{{item.age}}</span> 7 </li> 8 </ul> 9 </div> 10 <script type="text/javascript"> 11 new Vue({ 12 el:'#box', 13 data(){ 14 return{ 15 // arr:['module','views','controlle','aaaaa'] 16 arr:[ 17 {"name":"xiaohong1","age":12}, 18 {"name":"xiaohong2","age":12}, 19 {"name":"xiaohong3","age":12}, 20 {"name":"xiaohong4","age":12} 21 ] 22 } 23 } 24 }) 25 </script>
v-cloak防闪烁
<div id="box"> <div v-cloak="">欢迎--{{msg}}</div> </div> <script> new Vue({ el:"#box", data(){ return{ msg:"111111" } } }) </script>
v-pre 把标签内部的元素原位输出
<div id="box"> <div v-pre>欢迎--{{msg}}</div> </div> <script> new Vue({ el:"#box", data(){ return{ msg:"111111" } } }) </script>
<div v-pre>欢迎--{{msg}}</div>
<!--欢迎--{{msg}} -->