vue-指令

Posted 2022-10-08 tiandaochouqin1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-指令相关的知识，希望对你有一定的参考价值。

费话不说,想看介绍的上官网https://cn.vuejs.org/v2/ ，中文官网,相信大家都能看得懂

学习vue第一步一定是从指令开始，博主也不例外。

1.v-text 向页面展示文本信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app" v-text=‘mes‘>

    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data: //顾名思义数据的意思
                mes:‘hellow world‘  //声明一个数据 name 为mes  value为hellow world
            ,
         );
    </script>
</body>

</html>

v-text

2.v-html 想页面渲染一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-text=‘mes‘></div>
        <div v-html=‘mes1‘></div>
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data: //顾名思义数据的意思
                mes:‘<h1>hellow world</h1>‘,
                mes1:‘<h1>hellow world</h1>‘  //声明一个数据 name 为mes  value为hellow world
            ,
         );
    </script>
</body>

</html>

v-html

3.v-show v-show 修改css的display属性 true是显示，false为隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-show=‘false‘>hellow world</div>
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            
         );
    </script>
</body>

</html>

v-show

4.v-if 、 v-else-if、v-else 条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="mes = ‘lhf‘">if</div>
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:
                mes:"fhl"
            
         );
    </script>
</body>

</html>

v-if

5.v-for 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul v-for=‘item,index in mes‘>
            <li :key=‘item.id‘><span>序号: index </span>名字:  item.name  </li>
        </ul>
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:
                mes:[
                    id:1,name:‘zhangsan‘,
                    id:2,name:‘lishi‘,
                    id:3,name:‘wangwu‘
                ]
            
         );
    </script>
</body>

</html>

v-for

6.v-on 绑定事件简写 @click=‘‘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click=‘handleClick‘>点我啊</button>
        <button v-on:click=‘handleClick‘>点我啊</button>
        <!-- 没有参数的时候可以不用写括号 -->
        <a href="" @click.prevent=‘toBaidu(1)‘> 点我啊 </a>
        <!-- 当然 还有一些事件的修饰 比如上边用到的.prevent就是阻止默认行为的 -->
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:
                mes:[
                    id:1,name:‘zhangsan‘,
                    id:2,name:‘lishi‘,
                    id:3,name:‘wangwu‘
                ]
            ,
            methods: //顾名思义，上边绑定的方法就是在这里声明的
                handleClick()
                    alert(‘你还真点啊!‘)
                ,
                toBaidu(id)
                    alert(id)
                
            
         );
    </script>
</body>

</html>

v-on

7.v-bind 绑定到属性缩写直接使用 :即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text"  :value="mes" :id=‘id‘>
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:
                mes:‘我是value‘,
                id:‘id‘
            ,
         );
    </script>
</body>

</html>

v-bind

8.v-model 双向绑定我很喜欢的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">

         mes 

        <input type="text" v-model=‘mes‘>
        
    </div>
    <script>
        var vm=new Vue(
            el:‘#app‘, //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:
                mes:‘我是value‘,
            ,
         );
    </script>
</body>

</html>