vue指令大全

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

指令：

 v-on指令

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

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

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

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

练习指令 对数组的增删 

截图代码

v-show指令

作用：控制切换一个元素的显示和隐藏display属性控制

扫描二维码关注公众号，回复： 1555449 查看本文章

语法：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}}  -->

v-bind