vue指令大全

女爷i 2022-05-23 13:54 314阅读 0赞

闲来无事，最近在总结笔记，也买了一本vue入的书，总结一下知识点

指令：

## ** v-on指令** ##

作用：为HTML元素绑定事件监听

语法：v-on：事件名称='函数名称()'

简写语法：@事件名称='函数名称()'

注：函数定义在methods配置项中

![20180610163345422][]

## **练习指令 对数组的增删 ** ##

截图代码

![20180610163520980][]![20180610163528858][]

## **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双向绑定数据

# 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         
     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>

# v-bind #

![20180610164556707][]

![20180610164532475][]

[20180610163345422]: /images/20220523/4f94f86f95fa4c0392a7465cd1c1b583.png
[20180610163520980]: https://img-blog.csdn.net/20180610163520980
[20180610163528858]: /images/20220523/e76e6433076945f0b707c2127913ada2.png
[20180610164556707]: /images/20220523/af400a90acfd49b293242f1a2fc46d3d.png
[20180610164532475]: /images/20220523/6ad9096aaebc4d0581bea616cc9d8049.png