VUE常用指令总结！

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="app">

        <!--差值表达式-->

        {{ name1 }}

        <!--v-text 读取文本不能读取html标签-->

        <h1 v-text="name2"></h1>

        <!--v-html 能读取文本和html标签-->

        <div v-html="name3"></div>

        <!--v-model 双向绑定-->

        <input type="text" v-model="name4" />

        <br>

        名字：{{ name4 }}

        <br>

        <!--v-bind 绑定属性-->

        <a v-bind:href="name5">百度一下</a>

        <hr>

        <!--v-if 添加或者移除dom树中-->

        <h1 v-if="name6">你好</h1>

        <!--v-show 修改元素的display的值 进行显示隐藏-->

        <h1 v-show="name7">你好</h1>

        <!--v-for-->

        <ul>

            <li v-for="vo in list">{{ vo.no}},{{vo.name}}</li>

        </ul>

        <!--v-on 绑定事件-->

        <ul>

            <li v-on:click="myclick">单击</li>

            <li @click="myclick">单击的快捷绑定</li>

        </ul>

    </div>

    <script type="text/javascript">

        new Vue({

            // 管理边界

            el:'#app',

            // 数据

            data:{

                name1:'hello',

                name2:'小明',

                name3:'<h1>你好世界</h1>',

                name4:'',

                name5:'http://www.baidu.com',

                name6:true,

                name7:true,

                list:[

                    {no:,name:'aaa'},

                    {no:,name:'bbb'},

                    {no:,name:'ccc'}

                ]

            },

            // 方法

            methods:{

                myclick : function(){

                    console.log("我被点击");

                }

            }

        })

    </script>

</body>

</html>

补充 v-else-if

<div id="box">

    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>

    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>

    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>

</div>

<script>

    new Vue({

        el: "#box",

        data(){

            return {

                show: true

            }

        }

    })

</script>

补充return问题

在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：

let app= newVue({

    el:"#app",

    data:{

        msg:''

    },

    methods:{

    }

})

在使用组件化的项目中使用的是如下形式：

export default{

    data(){

        return {

            showLogin:true,

            // def_act: '/A_VUE',

            msg: 'hello vue',

            user:'',

            homeContent: false,

        }

    },

    methods:{

    }

}

为何在大型项目中data需要使用return返回数据呢？

不使用return包裹的数据会在项目的全局可见，会造成变量污染

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

大概9个 {{}} v-text v-html v-model v-bind v-if v-show v-for v-on

指令名	解释
v-text	读取文本内容不包括html标签
v-html	读取文本内容包括html标签
v-model	数据双向绑定
v-bind	绑定标签属性
v-if	判断显示隐藏这个操作dom 安全性好
v-show	判断显示隐藏操作的是display 不删除元素的dom节点
v-for	循环遍历数据
v-on	绑定自定义方法
{{}}	差值表达式把data中的数据显示到页面

巴特西

VUE常用指令总结！

最新文章

热门文章