Skip to content

Latest commit

 

History

History
393 lines (330 loc) · 9.4 KB

基础指令.md

File metadata and controls

393 lines (330 loc) · 9.4 KB

Vue 基础指令笔记

v-if v-else v-show指令

主要用来实现简单的判断逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-if & v-show & v-else</title>
</head>
<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好：JSPang</div>
        <div v-else>请登录后操作</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               isLogin:false
            }
        })
    </script>
</body>
</html>

v-show指令用来实现，元素是否可见

<div v-show="isLogin">你好：JSPang</div>

v-if和v-show区别：

  • v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
  • v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>V-for 案例</title>
</head>

<body>
    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="student in sortStudent">
                {{student.name}} - {{student.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                items: [20, 23, 18, 6, 32, 19, 54, 56, 41],
                students: [
                    { name: 'jspang', age: 32 },
                    { name: 'Panda', age: 30 },
                    { name: 'PanPaN', age: 21 },
                    { name: 'King', age: 45 }
                ]
            },
            computed: {
                sortItems: function () {
                    return this.items.sort(sortNumber);
                },
                sortStudent: function () {
                    return sortByKey(this.students, 'age');
                }
            }
        })
        function sortNumber(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>

以上例子，运用了vue的for循环，并且分别对对象和数组进行了排序。

v-text和v-html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-text & v-html 案例</title>
</head>

<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <span>{{ message }}</span>=<span v-text="message"></span><br />
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello Vue!',
                msgHtml: '<h2>hello Vue!</h2>'
            }
        })
    </script>
</body>

</html>

v-html支持直接渲染html代码，而v-text可以渲染文字。

轻易不要用v-html，容易引发xss攻击。

v-on绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
        本场比赛得分： {{count}}<br />
        <button v-on:click="jiafen">加分</button>
        <button @click="jianfen">减分</button>

    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                count: 1
            },
            methods: {
                jiafen: function () {
                    this.count++;
                },
                jianfen: function () {
                    this.count--;
                }
            }
        })
    </script>
</body>

</html>

v-on指令可以绑定事件，实现一些功能。比如绑定按钮。

当要绑定键盘的回车时，可以:

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

可以使用缩写，@click=来实现一些。

v-model指令

主要用来实现数据的双向绑定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <h3>文本框</h3>
        <!-- 普通模式 -->
        <p>v-model:<input type="text" v-model="message"></p>
        <!-- 懒加载模式，当鼠标离开就变化 -->
        <p>v-model-lazy:<input type="text" v-model.lazy="message"></p>
        <!-- 只有里面是数字时，才执行双向绑定，要最先输入数字 -->
        <p>v-model-number:<input type="text" v-model.number="message"></p>
        <!-- 去除空格 -->
        <p>v-model-trim:<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></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="hpc1" value="hpc1" v-model="web_names">
            <label for="isTrue">hpc1</label>

            <input type="checkbox" id="hpc2" value="hpc2" v-model="web_names">
            <label for="isTrue">hpc2</label>

            <input type="checkbox" id="hpc3" value="hpc3" v-model="web_names">
            <label for="isTrue">hpc3</label>
        </p>
        <p>
            {{web_names}}
        </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>性别为：{{sex}}</p>
        </p>

    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello Vue!',
                isTrue: true,
                web_names: [],
                sex: '男'
            }
        })
    </script>
</body>

</html>

可以绑定html的不同标签。

v-bind指令

绑定元素，缩写形式为:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc">
        <hr>
        <a :href="webUrl" target="_blank">hpc博客</a>
        <hr>
        <div :class="className">1. 绑定class</div>
        <div :class="{classA: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>
        <div :style="{color:red,fontSize:font}">5. 绑定style</div>
        <div :style="styleObj">6. 绑定style对象</div>
    </div>

    <style>
        .classA {
            color: red;
        }

        .classB {
            font-size: 150%;
        }
    </style>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                imgSrc: 'https://www.baidu.com/img/[email protected]',
                webUrl: "https://blog.riba2534.cn",
                className: 'classA',
                isOk: false,
                classA: 'classA',
                classB: 'classB',
                red: 'red',
                font: '20px',
                styleObj: {
                    color: 'green',
                    fontSize: '24px'
                }
            }
        })
    </script>
</body>

</html>

主要是对对象的属性进行绑定，来实现不同的操作

v-pre v-cloak v-once

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 原样输出，不进行渲染 -->
        <div v-pre>{{message}}</div>
        <div v-cloak>渲染完之后才显示</div>
        <!-- 只在第一次进行一次渲染 -->
        <div v-once>{{ message }}</div>
        <div> <input type="text" v-model="message"></div>
        <div>{{ message }}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "nihao"
            }
        })
    </script>
</body>

</html>
  1. v-pre 是原样输出不进行渲染
  2. v-cloak是渲染完成之后才进行显示
  3. v-once是只进行一次渲染

参考资料

  1. Vue2.0视频教程-内部指令