欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue入门学习笔记2 Vue内部指令整理

程序员文章站 2022-05-16 14:56:16
...

Vue入门学习笔记2 Vue内部指令整理

上一篇整理总结了Vue的准备知识和运行环境、IDE的介绍以及以一个hello world介绍了Vue的基础语法及应用，这篇将介绍Vue的内部指令。

上一篇的链接：vue.js 入门学习笔记一

参考学习视频链接：Vue2.x从入门到实战

1、Vue内部指令概览

指令 描述
v-if 条件渲染 ，就像平常写的if语句一样的道理
v-else 必须与v-if搭配使用，如同普通的else语句，意为 否则
v-show 与if类似，如果布尔值为true就显示
v-for 循环遍历渲染
v-text 绑定文本
v-html 绑定HTML标签
v-on 绑定事件，如点击事件、鼠标键盘事件等
v-model 数据源绑定
v-bind 用于绑定标签属性
v-pre 原样输出
v-cloak 渲染完成后才显示
v-once 第一次渲染的时候渲染，既仅渲染一次

2、v-if & v-else & v-show 实例

v-if和v-else通常是组合使用的，就像我们平常在js中写的if-else一样的作用。
v-show同样通过boolean修改标签的css的display属性来进行显示或异常
v-if与v-show的区别：v-if判断真假，如果为真继续加载执行后面的内容，如果为假则不再加载后面的内容，大大减少服务器压力。而v-show则不一样，不管真假都会加载全部内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if & v-else & v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好主人，欢迎回来~</div>
        <div v-else>不好意思，请您先登录！</div>
        <!-- v-if判断是否加载，true加载，false不加载，简轻服务器压力 -->
        <div v-show="isLogin">v-show怎样都会加载，修改的是display属性</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                isLogin:true
            }
        })
    </script>
</body>
</html>

3、v-for 实例

v-for循环遍历，通常用在遍历数组渲染页面。下面这个例子介绍了便利数组和对象的使用，以及排序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world!</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItmes">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in sortStudents">
                {{index}}_{{item.naem}}-{{item.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                itmes:[35,25,8,56,61,10,63],
                students:[
                    {naem:"panruihe",age:"24"},
                    {naem:"ruihe",age:"15"},
                    {naem:"潘总",age:"35"},
                    {naem:"小老弟",age:"18"},
                    {naem:"会左勾拳的螳螂",age:"22"},
                ]
            },
            computed:{
                sortItmes:function(){
                    return this.itmes.sort(sortNunber);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age')
                }
            }
        });
        // sort() 默认是按照首位进行排序的，所以需要写一个sortNunber函数传进去才能正常进行排序
        function sortNunber(a,b){
            return a-b;
        }

        //数组对象排序的方法
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>
</html>

4、v-text & v-html 实例

v-text通常用于绑定文本信息，而v-html用于绑定HTML标签。
Tip: 实际开发中尽量不使用v-html , 这有可能导致网站遭到xss攻击，尤其在表单里绝对不能使用。除非你们这个部分不重要，或者绝对安全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text & v-html</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text & v-html 实例</h1>
    <hr>
    <div id="app">
        <span>{{mes}}</span> >> <span v-text="mes"></span> <br>
        <!-- 实际开发中尽量不使用v-html , 这有可能导致网站遭到xss攻击，尤其在表单里绝对不能使用 -->
        <span>{{tip}}</span>>> <span v-html="tip"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                mes:"hello world",
                tip:"<span>hello world</span>"
            }
        })
    </script>
</body>
</html>

5、v-on 实例
v-on用于绑定事件，如click、keyup等。下面这个例子用v-on指令做了一个简易计分器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on实例</title>
    <script  type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on实例</h1>
    <hr>
    <div id="app">
        <p>本场得分：{{fenshu}}</p>
        <p>
            <button v-on:click="jiafen">加分</button>
            <button v-on:click="jianfen">减分</button> <br>
            <input v-on:Keyup.enter="onEnter" v-model="fenshu2">
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                fenshu:0,
                fenshu2:0
            },
            methods:{
                jiafen:function(){
                    this.fenshu++
                },
                jianfen:function(){
                    this.fenshu--
                },
                onEnter:function(){
                    this.fenshu=this.fenshu+parseInt(this.fenshu2)
                }
            }
        })
    </script>
</body>
</html>

6、v-model 数据源绑定实例

v-model应用数据源的绑定情景。其中它的属性有以下几个：
lazy 懒加载
number 数字判断
trim 去空格
这3个属性在下面的例子中都有应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model实例 双向数据绑定</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{mes}}</p>
        <hr>
        <h3>文本框</h3>
        <p>
            v-model：<input type="text" v-model="mes"> <br> <br>

            v-lazy(懒加载)：<input type="text" v-model.lazy="mes"><br> <br>

            v-number(只有是数字才起作用)：<input type="text" v-model.number="mes"><br> <br>

            v-trim(去首尾空格)：<input type="text" v-model.trim="mes"><br> <br>
        </p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="mes"></textarea>
        <hr>
        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue"> 
        <label for="isTrue">{{isTrue}}</label>
        <hr>
        <h3>多选框绑定多个值</h3>
        <p>
            <input type="checkbox" id="ruihe" value="ruihe" v-model="web_name" >
            <label for="ruihe">ruihe</label>
            <input type="checkbox" id="panruihe" value="panruihe" v-model="web_name" >
            <label for="panruihe">panruihe</label>
            <input type="checkbox" id="panzong" value="潘总" v-model="web_name" >
            <label for="panzong">潘总</label>
            <input type="checkbox" id="panboss" value="潘老板" v-model="web_name" >
            <label for="panboss">潘老板</label>
        </p>
        <p>
            <label>{{web_name}}</label>
        </p>
        <hr>
        <h3>单选框绑定一个值</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
        </p>
        <p>你选择的是：{{sex}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                mes:"hello world",
                isTrue:true,
                web_name:[],
                sex:"男"
            }
        })
    </script>
</body>
</html>

7、v-bind 实例

v-bind是用于绑定标签属性的，如我们经常要在前端绑定一个class属性或者style属性对象等，以及三目运算动态调整页面样式等。更多内容可以参照下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind 实例</h1>
    <!-- v-bind用于绑定标签的属性 -->
    <hr>
    <div id="app">
        <p><img v-bind:src="imgSrc" alt="青蛙"></p>
        <!-- v-bind可以简写成 :（冒号） -->
        <p><a :href="webUrl" target="_blank">新开始博客网</a></p>
        <hr>
        <div :class="calssName">1、绑定class</div>
        <div :class="{calssA:isOK}">2、绑定class中的判断</div>
        <div :class="[classA,classB]">3、绑定class中的数组</div>
        <div :class="isOK?classA:classB">4、绑定class中的数组</div>
        <hr>
        <div>
            <input type="checkbox" id="isOK" v-model="isOK">
            <label for="isOK">isOK={{isOK}}</label>
        </div>
        <hr>
        <!-- vue的坑1 font-size 凡是横杆（-）隔开的都有大写字母代表如下fontSize -->
        <div :style="{color:red,fontSize:font}">5、绑定style</div>
        <div :style="styleObject">6、绑定style对象</div>
    </div>
    <style>
        .calssA{
            color: red;
        }
        .classB{
            font-size: 150%;
        }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:'http://img5.imgtn.bdimg.com/it/u=1089874897,1268118658&fm=26&gp=0.jpg',
                webUrl:'http://www.fivewalking.cn/',
                calssName:'calssA',
                isOK:true,
                classA:'calssA',
                classB:'classB',
                red:'red',
                font:'20px',
                styleObject:{
                    color:'green',
                    fontSize:'24px%'
                }
            }
        })
    </script>
</body>
</html>

8、v-pre & v-cloak & v-once 实例
v-pre 原样输出
v-cloak 渲染完成后显示
v-once 页面第一次渲染时渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-pre & v-cloak & v-once 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-pre & v-cloak & v-once 实例</h1>
    <hr>
    <div id="app">
        <!-- v-pre 原样输出 -->
        <div v-pre>{{mes}}</div>

        <div v-cloak>渲染完成后，才显示！</div>

        <!-- v-once 只在第一次渲染的时候渲染 -->
        <div v-once>{{mes}}</div>
        <div><input type="text" v-model="mes"></div>
        <div>{{mes}}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                mes :'hell world!'
            }
        })
    </script>
</body>
</html>

到这里就结束了，祝大家周末愉快。

相关标签： vue.js vue

上一篇： 常用Vue指令总结

下一篇： 判断一棵二叉树是否是平衡二叉树

推荐阅读