v-cloak

cloak掩盖

• 一般与display:none进行绑定

v-once

• 定义它的元素和组件只渲染一次

<span v-once>{{oncedata}}</span>

image.png

条件渲染指令

v­if, v­eles­if ,v­else

v-if基本用法

<div id="app">
        v-if接的是等号： 等号后的内容必须是布尔值
        <p v-if="6<3">{{apple}}</p>
        <p v-else-if="9>5">{{pineapple}}</p>
        <p v-else>{{banana}}</p>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                apple: 'apple',
                banana: 'banana',
                pineapple: 'pineapple'
            }
        })
    </script>

v-if的实例用法

用法： 必须跟着屁股走
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了

解决方法：加key，唯一，提供key值可以来决定是否复用该元素

 <div id="app">
        <div v-if="type==='name'">
            用户名: <input type="text" placeholder="请输入用户名" key='name'>
        </div>
        <div v-else>
            密码: <input type="text" placeholder="请输入密码" key='psd'>
        </div>
        <button v-on:click="toggleType"> 切换</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
    </script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                type: 'name'
            },
            methods: {
                toggleType: function () {
                    //三目运算符
                    this.type = (this.type === 'name' ? 'password' : 'name')
                }
            }
        })
    </script>

v­if和v­show的比较

v­if:
实时渲染：页面显示就渲染，不显示。我就给你移除
v­show:
v­show的元素永远存在也页面中，只是改变了css的display的属性

v-for

用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到 列表
渲染指令 v­for。
两种使用场景：
遍历多个对象
遍历一个对象的多个属性

 var app = new Vue({
            el: '#app',
            data: {
                //每个对象对应一个li，数组
                vueMethods: [{
                        name: '多思考'
                    },
                    {
                        name: '多练习'
                    },
                    {
                        name: '多上课'
                    }
                ],
                nvshen: {
                    girl1: '高圆圆',
                    girl2: '杨幂',
                    girl3: '张柏芝'
                }
            }
        })

<div id="app">
        v-for的用法: v-for一定是写在要遍历的元素上<br>
        遍历多个对象一定是数组

        1.遍历多个对象: <br>
        学好vueJs的方法是
        <ul>
            <li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
        </ul>
        <hr>
        带索引的写法: 括号的第一个变量，代表item,第二个代表index
        <ul>
            <li v-for="(vueMth,index) in vueMethods">{{index}}-----{{vueMth.name}}</li>
        </ul>
        <hr>

        2.遍历一个对象的多个属性
        <span v-for='value in nvshen'>{{value}}</span>
        <hr>

        拿到value,key,index的写法 v-k-i (外开)
        <div v-for='(value,key,index) in nvshen'>第一个{{index}}女生:--键是{{key}}---值是{{value}}</div>
    </div>

数组的更新过滤

改变数组的一系列方法：
• push() 在末尾添加元素
• pop() 将数组的最后一个元素移除
• shift() 删除数组的第一个元素
• unshift（）：在数组的第一个元素位置添加一个元素
• splice() ：可以添加或者删除函数—返回删除的元素
三个参数：

• 第一个参数 表示开始操作的位置
• 第二个参数表示：要操作的长度
• 第三个为可选参数：
  • sort（）：排序
  • reverse()

<div id="app">
        <div v-for='study in arr'>{{study}}</div>
        <button @click='sortArr'>点我排序</button>
        <button @click='reserveArr'>点我进行数组的翻转</button>
        <hr>
        <button @click='changeOne'>改变数组的指定项</button>
        <button @click='changArrLength'>改变数组的长度</button>
        {{mathOO}}

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                arr: ['book', 'pen', 'pencil']
            },
            computed: {
                mathOO: function () {
                    //参数代表要过滤的每一项
                    return this.arr.filter(function (book) {
                        return book.match(/oo/)
                    })
                }
            },
            methods: {
                sortArr: function () {
                    this.arr.sort(function (a, b) {
                        return a.length - b.length;
                    })
                },
                reserveArr: function () {
                    this.arr.reverse()
                },
                //改变数组的指定项
                changeOne: function () {
                    this.arr[0] = 'car'
                },
                //改变数组的长度
                changArrLength: function () {
                    this.arr.length = 1
                }
            }
        })
        //改变vue的第一项
        Vue.set(app.arr, 1, "car")
    </script>

点击传输的是event对象，如果是字符串则点击的传的是参数

方法和事件

<div id="app">
        点击次数： {{count}}
        <button @click='handle()'>点我每次加一</button>
        <button @click='handle(8)'>点我每次加8</button>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                handle: function (count) {
                    // console.log(count)
                    count = count || 1;
                    this.count += count;
                }
            }
        })
    </script>

image.png

如果方法中带有参数，但是你没有加括号，默认传原生事件对象event

vue.js 的修饰符号

在vue中传入event对象用 $event
向上冒泡
stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法

可以监听键盘事件：
<input @keyup.13 ="submitMe"> ——­指定的keyCode
vueJS为我们提供了：
.enter
.tab
.delete

<div id="app">
        <!-- 向上冒泡 -->
        stop用法: <br>
        <div @click.self='divclick' style="height: 100px;width: 100px;background-color: red;">
            <button @click='btnclick'>点击</button>
        </div>
        <hr>
        prevent的用法:
        每次提交表单都会重载页面
        <form action="" @submit.prevent='hangle'>
            <button type='submit'>提交表单</button>
        </form>
        <hr>
        once: <br>
        <button @click='onceMethod'>执行无限次</button>
        <button @click.once='onceMethod'>只执行一次</button>
        <hr>
        监听键盘事件:
        <br>
        <input @keyup.13='submitMe'> ---keyCode
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                divclick: function () {
                    alert('div被点击了')
                },
                btnclick: function () {
                    alert('button被点击了')

                },
                hangle: function () {
                    alert('我不重载，页面也不刷新了')
                },
                onceMethod: function () {
                    alert('执行一次method')
                },
                submitMe: function () {
                    alert('您按下了enter键')
                }
            }
        })
    </script>