Vue2.x秘籍（上）

最新推荐文章于 2024-06-13 23:47:14 发布
最新推荐文章于 2024-06-13 23:47:14 发布
阅读量398 收藏 2
点赞数 1
分类专栏： Vue笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LQlove1/article/details/126689351
版权

文章目录

1.初识Vue


 1. el:'#app',//指定Vue为哪个容器服务
 2. data用于存储数据，供给el绑定的容器使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app"><h1>Hello {{name}}</h1></div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // 创建Vue实例
        const vm = new Vue({
            el:'#app',//指定Vue为哪个容器服务
            data:{//data用于存储数据，供给el绑定的容器使用
                name:'China'
            }
        })
    </script>
    
</body>
</html>

2.模板语法

  1. 使元素里面的属性值绑定data里面的数据要用v-bind
  2. <a v-bind:href='shool.url'>{{shool.name}}</a>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello {{name}}</h1>
        <a v-bind:href='shool.url'>{{shool.name}}</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // 创建Vue实例
        const vm = new Vue({
            el:'#app',//指定Vue为哪个容器服务
            data:{//data用于存储数据，供给el绑定的容器使用
                name:'China',
                shool:{
                    name:'四川三河职业学院官网',
                    url:'http://baidu.com'
                }
            }
        })
    </script> 
</body>
</html>

3.数据绑定

总结：

  1. 单向绑定(v-bind)：数据只能从data流向页面
  2. 双向绑定(v-model)：数据不仅可以从data流向页面还可以从页面流向data
    注意：
  3. 双向绑定一般都应用在表单类元素上（如inpuut、select等）
  4. v-model:value可以简写为v-model因为v-model 的默认值就是value
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        单向数据绑定: <input type="text" v-bind:value="value">
        <br>
        双向数据绑定: <input type="text" v-model:value="value">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        // 创建Vue实例
        const vm = new Vue({
            el:'#app',//指定Vue为哪个容器服务
            data:{//data用于存储数据，供给el绑定的容器使用
                value:'China'
            }
        })
    </script>
    
</body>
</html>

4.el和data的第二种写法

4-1.el第二种写法 ---- vm.$mount(‘#app’)

总结：

  1. new Vue的时候配置el属性
  2. 先创建Vue 实例，随后通过vm.$mount()指定el的值
const vm = new Vue({
            // el:'#app',第一种写法
            data:{
                name:'China'
            }
        })
        vm.$mount('#app')// 第二种写法

4-2.data第二种写法 ---- vm.$mount(‘#app’)

总结：

  1. 对象式
  2. 函数式（一般使用函数式）
  3. 用vue管理的函数一定不要用箭头函数
const vm = new Vue({
            el:'#app',
            // 第二种写法函数
            data:function(){
                return {
                    name:'world'
                }
            }
        })

5.MVVM模型

  1. M：模型（Model）：对应data中的数据
  2. V：试图（View）：对应页面中的东西
  3. VM：试图模型（ViewModel）：对应Vue这个实例对象

请添加图片描述

6.事件处理

总结：

  1. 给按钮添加事件用v-on：‘事件’=‘方法’
  2. 方法卸载methods：{里面}
  3. 如果要传参数就在v-on：‘事件’='方法’的方法后面加个括号传参
  4. 只传一个参数的话，会丢失事件对象要用$event占个位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>欢迎来到{{msg}}</h1>
        <button v-on:click='alert1'>点击我不传参</button>
        <button v-on:click='alert2($event,66)'>点击我传参用$event占位</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'事件点击'
            },
            methods:{
                alert1(){
                    alert('欢迎来到事件点击1')
                },
                alert2(event,num){
                   console.log(event,num); 
                }
            }
        })
    </script>
</body>
</html>

7.事件修饰符（六个）

7-1.prevent ---- 阻止默认事件

7-2.stop ---- 阻止事件冒泡

7-3.once ---- 事件值触发一次

7-4.capture ---- 使用事件的捕获模式

7-5.self； ---- 阻止默认事件

7-6.passive ---- 事件的默认行为立即执行，无需等待事件回调执行完毕

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    .stop{
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
    }
    .stop1{
        width: 100px;
        height: 100px;
        background-color: rgb(202, 139, 55);
    }
    .once{
        width: 50px;
        height: 50px;
        background-color: rgb(202, 139, 55);
    }
    .capture1{
        width: 100px;
        height: 100px;
        background-color: rgb(55, 202, 60);
    }
    .capture2{
        width: 50px;
        height: 50px;
        background-color: rgb(55, 202, 202);
    }
    .self1{
        width: 100px;
        height: 100px;
        background-color: rgb(192, 55, 202);
    }
    .self2{
        width: 50px;
        height: 50px;
        background-color: rgb(202, 55, 146);
    }
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- ## 7-1.prevent  ----  阻止默认事件-->
        <a @click.prevent = 'prevent' href="www.baidu.com">prevent阻止默认事件</a>
        <!-- ## 7-2.stop  ----  阻止事件冒泡-->
        <div class="stop" @click="stop" >2
            <button class="stop1" @click.stop="stop1">stop</button>
        </div>
        <!-- ## 7-3.once  ----  事件值触发一次-->
        <div class="once" @click.once="once">once</div>
        <!-- ## 7-4.capture  ----  使用事件的捕获模式-->
        <div class="capture1" @click.capture="capture1" >capture1
            <button class="capture2" @click="capture2">capture2</button>
        </div>
        <!-- ## 7-5.self；  ----  阻止默认事件-->
        <div class="self1" @click.self="self1" >self1
            <button class="self2" @click="self2">self2</button>
        </div>
        <!-- ## 7-6.passive  ----  事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- 意思就是不用等待回调函数执行完毕，先把默认的行为执行了 -->
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: function(){
                return {
                    msg:'时间修饰符'
                }
            },
            methods: {
                prevent() {
                    alert('欢迎来到事件点击1')
                },
                stop() {
                    alert(1)
                },
                stop1() {
                    alert(2)
                },
                once() {
                    alert('只触发一次')
                },
                capture1() {
                    alert('我是外层')
                },
                capture2() {
                    alert('我是内层')
                },
                self1() {
                    alert('我是外层')
                },
                self2() {
                    alert('我是内层')
                }
            }
        })
    </script>
</body>

</html>

8.键盘事件

8-1.常见的键盘事件的别名

  1. enter
  2. delet
  3. esc
  4. space
  5. tab（必须配合keydown使用）
  6. up
  7. down
  8. left
  9. right

8-2.系统修饰键

  1. ctrl
  2. alt
  3. shift
  4. meta
  5. 配合keyup使用，要按下该键的同时按其他键释放才可以触发
  6. 配合keydown正常触发

9.computed计算属性姓名案例

  1. computed里面必须包括get和set方法
  2. 当初次计算的时候调用一次get方法，算出fullName，然后computed里面有一个缓存 ,把fullName的值存储到里面供其他要用的地方使用
  3. 当fullName所依赖的属性值发生变化的时候，又会调用get方法
  4. 当fullName发送改变的时候会用到set方法，把fullName的值分割开，给到firstName和lastName
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello {{msg}}</h1>
        姓：<input type="text" v-model='firstName'><br>
        名：<input type="text" v-model='lastName'><br>
        全名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'computed',
                    firstName:'李',
                    lastName:'四'
                }
            },
            computed:{
                fullName:{
                    get(){
                        console.log('get被调用了');
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
                        var arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                        console.log('set被调用了');
                    }
                }
            }
        })
        
    </script> 
</body>
</html>

10.watch监听属性

总结：

  1. whach里面写要监听的对象，然后在这个对象里面写处理函数handler，可以接收旧值和新值
  2. 第二种写法在实例外写$vm.watch(‘监听的对象’，处理函数)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello {{msg}}</h1><br>
        <h2>今天天气很{{info}}</h2>
        <button @click="shift">点击切换天气</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'watch',
                    isHot:true
                }
            },
            computed:{
                info(){
                     return this.isHot ? '炎热':'凉爽'
                }
            },
            methods:{
                shift(){
                     return this.isHot = !this.isHot 
                }
            },
            watch:{
                isHot:{
                    handler(oldValue,newValue){
                    console.log('监听到了'+'修改前'+oldValue+'修改后'+newValue);
                }
                }
            }
        })
        
    </script> 
</body>
</html>

11.深度监视

总结：

  1. Vue中的watch默认不监视对象内部值的变化（一层）
  2. 配置deep配置可以监视对象内部值的变化（多层）
  3. Vue自身可以检测对象内布值的改变，但是Vue提供的watch默认不可以
  4. 使用watch时根据数据的具体结构，决定是否采用深度监视
watch:{
            // 如果说要监视num下面的a 的变化就要把监听对象写成'num.a'
                // 'num.a':{
                //     handler(){
                //         console.log('a变化了');
                //     }
                // }
            // 如果说要监视num下面的所有属性值的变化就要在监听对象里添加一个配置对象deep:true
            num:{
                deep:true,
                handler(){
                    console.log('num里的属性值变化了');
                }
            }
            }

12.computed和watch的区别

总结：

  1. computed能完成的功能，watch都可以完成
  2. watch能完成的功能computed不一定能完成
  3. watch可以进行异步操作，computed不行
  4. 所有被Vue管理的函数，最好写成普通函数，这样的this才可以指向vm
  5. 所有不被Vue管理的函数（定时器的回调函数和ajax的回调函数）最好写成箭头函数，这样this的指向才是vm或者组件实例对象

13.绑定样式

13-1.字符串写法，适用于动态指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    .basic{
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .sad{
        background-color: aquamarine;
    }
    .happy{
        background-color: brown;
    }
    .normal{
        background-color: burlywood;
    }
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 绑定class样式字符串写法 -->
        <div class="basic" v-bind:class="mood" @click="changeMood"></div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'绑定样式',
                    mood:'normal'
                }
            },
            methods:{
                changeMood(){
                    let arr = ['normal','sad','happy']
                    const index = Math.floor(Math.random()*3)
                    console.log(index);
                    this.mood = arr[index]
                }
            }
        })
        
    </script> 
</body>
</html>

13-2.数组写法适用于样式个数不确定

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 绑定class样式字符串写法 -->
        <div class="basic" v-bind:class="arr" @click="changeMood"></div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'绑定样式',
                    arr:['sad']
                }
            },
            methods:{
                // changeMood(){
                //     let arr = ['normal','sad','happy']
                //     const index = Math.floor(Math.random()*3)
                //     console.log(index);
                //     this.mood = arr[index]
                // }
            }
        })
        
    </script> 
</body>

13-3.对象写法适用于样式个数确定，名字确定，但不确定用不用

data:function(){
                return{
                    msg:'绑定样式',
                    arr:{
                        sad:false
                    }
                }
            }

14.条件渲染

总结：

  1. v-show不删除节点
  2. v-if删除节点
  3. v-else-if和if else用法一样
  4. template只能和v-if一起用

14-1.v-show

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="n++">点击n就加一:{{n}}</button>
        <div v-show="n===1">我是v-show,不删除节点</div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'条件渲染',
                    n:0
                }
            },
        })
        
    </script> 
</body>

14-2.v-if

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="n++">点击n就加一:{{n}}</button>
        <!-- <div v-show="n===1">我是v-show,不删除节点</div> -->
        <br>
        <div v-if="n === 1">等于{{n}}我显示</div><br>
        <div v-if="n === 2">等于{{n}}我显示</div><br>
        <div v-if="n === 3">等于{{n}}我显示</div><br>
        <div v-if="n === 4">等于{{n}}我显示</div><br>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'条件渲染',
                    n:0
                }
            },
        })
        
    </script> 
</body>

15.列表渲染

15-1.列表渲染

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <li v-for="p in filterArr" :key="persons.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'列表渲染过滤',
                    persons:[
                        {id:1,name:'马冬梅',age:19,sex:'女'},
                        {id:2,name:'周冬雨',age:20,sex:'女'},
                        {id:3,name:'周杰伦',age:22,sex:'男'},
                        {id:4,name:'艾伦',age:23,sex:'男'}
                    ],

                }
            }
        })
        
    </script> 
</body>

15-2.列表过滤filter（（obj）=>{}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="keyWords" placeholder="模糊搜索">
        这里就是列表渲染
        <li v-for="p in filterArr" :key="persons.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'列表渲染过滤',
                    keyWords:'',
                    persons:[
                        {id:1,name:'马冬梅',age:19,sex:'女'},
                        {id:2,name:'周冬雨',age:20,sex:'女'},
                        {id:3,name:'周杰伦',age:22,sex:'男'},
                        {id:4,name:'艾伦',age:23,sex:'男'}
                    ],
                    filterArr:[]
                }
            },
            watch:{
                // 1.监听input里的值
                keyWords:{
                    immediate:true,//初始化把persons的值给filterArr
                    handler(val){
                        this.filterArr = this.persons.filter((p)=>{
                        // 2.如果包含input里面的值旧return
                        return p.name.indexOf(val) !== -1
                    })
                    }
                }
            }
        })
        
    </script> 
</body>
</html>

15-3.列表排序

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="keyWords" placeholder="模糊搜索">
        <button @click="sortType = 2">年龄升序2</button>
        <button @click="sortType = 1">年龄降序1</button>
        <button @click="sortType = 0">原顺序0</button>
        <li v-for="p in filpersons" :key="persons.id">{{p.name}}-{{p.age}}-{{p.sex}}</li>
        
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return{
                    msg:'列表渲染过滤',
                    keyWords:'',
                    sortType:0,
                    persons:[
                        {id:1,name:'马冬梅',age:19,sex:'女'},
            ![请添加图片描述](https://img-blog.csdnimg.cn/6f794e1100fe44e09ace472e4679e19f.png)
            {id:2,name:'周冬雨',age:20,sex:'女'},
                        {id:3,name:'周杰伦',age:22,sex:'男'},
                        {id:4,name:'艾伦',age:23,sex:'男'}
                    ],

                }
            },
            computed:{
                filpersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWords) !== -1
                    })
                    // 判断是否需要排序
                    if(this.sortType){
                        arr.sort((a,b)=>{
                            return this.sortType === 1 ? a.age - b.age : b.age - a.age
                        })
                    }
                    return arr
                }
            }
            
        })
        
    </script> 
</body>

16.监测数据改变原理

16-1.监测对象

总结：

  1. Vue.set（）要改变的对象，不能是vm实例上面的,或者实例的跟数据对象，必须是data里面的对象里面的东西
  2. vm.$set
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <li>姓名：{{students.name}}-年龄：{{students.age}}</li>
        <li>性别：{{students.sex}}</li>
        <button @click.once="addSex">点击添加一个属性，性别为男</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return {
                    msg:'监测对象',
                    students:{name:'张三',age:'21'},
                }
            },
            methods:{
                addSex(){
                    Vue.set(this.students,'sex','男')
                }
            }
        })
        
    </script> 
</body>
</html>

16-2.监测数组

总结：

  1. 必须使用Vue提供对数组修改的方法
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <li v-for="stu in students">姓名：{{stu.name}}-年龄：{{stu.age}}</li>
        <button @click.once="addStu">点击添加一个老六</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:function(){
                return {
                    msg:'监测数组',
                    students:[
                        {name:'张三',age:21},
                        {name:'李四',age:21},
                        {name:'王五',age:21},
                    ]
                }
            },
            methods:{
                addStu(){
                    this.students.unshift({name:'老六',age:21})
                }
            }
        })
        
    </script> 
</body>
</html>

17.过滤器

总结：

  1. 注册过滤器的两种方法，Vue.filter( name,fn), ---- new Vue({ filters:{}})
  2. 过滤器可以接收额外参数，也可以多个多个过滤器串联
  3. 没有改变原本的数据而是产生新的数据
  4. 只能普通使用或者配合v-bind使用

17-1.局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <li>{{fil | filtersStr}}</li>
        
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'过滤器',
                fil:'需要被过滤的字符串'
            },
            filters:{
                filtersStr(value){
                  return value.slice(1,5)
                }
            }
        })
        
    </script> 
</body>
</html>

17-2.全局过滤器

<script type="text/javascript">
        Vue.filter('filtersStr',function(value){
            return value.slice(1,5)
        })
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'过滤器',
                fil:'需要被过滤的字符串'
            },
        })
        
    </script>

18.内置指令

  1. v-text ---- 更新div里面所有的内容
  2. v-html ---- 跟v-text差不多，但是可以解析标签
  3. v-once ---- 加了这个指令的标签，只渲染一次
  4. v-pre ---- 加了这个的标签跳过Vue的渲染
  5. v-cloak ---- 配置css使用
  6. v-bind ---- 单向绑定
  7. v-model ---- 双向绑定
  8. v-if ---- 条件显示或隐藏
  9. v-show ---- 显示
    10.v-for ---- 遍历对象或者数组

19.自定义指令

19-1.局部函数式

总结：

  1. 在vm节点上添加属性directivers
  2. directives里面有一个自定义的函数名，回调函数接收两个参数，一个是绑定element绑定的元素，一个是binding是绑定的属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h1>h1的n的大小{{n}}</h1>
        <h1>*10后n的值: <span v-big="n"></span></h1>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                 msg:'局部函数式',
                 n:1
            },
            directives:{
                'big':function(element,binding){
                    element.innerText = binding.value *10
                }
            }
        })
    </script>
    
</body>
</html>

19-2.全局函数式

  1. Vue.directive(‘big’,function(element,binding){
    element.innerText = binding.value *10
    })
<script type="text/javascript">
        Vue.directive('big',function(element,binding){
            element.innerText = binding.value *10
        })
        const vm = new Vue({
            el:'#app',
            data:{
                 msg:'局部函数式',
                 n:1
            },
            // directives:{
            //     'big':function(element,binding){
            //         element.innerText = binding.value *10
            //     }
            // }
        })
    </script>

19-3.局部对象式

总结:

  1. 对象式里多了三个回调函数分别是
  2. bind 指令与元素绑定成功时就调用
  3. inserted 指令所在元素被插入页面时被调用
  4. update 指令所在的模板被重新解析时
<script type="text/javascript">
        
        const vm = new Vue({
            el:'#app',
            data:{
                 msg:'局部对象式',
                 n:1
            },
            directives:{
                'fbind':{
                    // bind:指令与元素绑定成功时就调用
                    bind(element,binding){
                        // console.log('bind');
                        element.value = binding.value
                    },
                    // inserted:指令所在元素被插入页面时被调用
                    inserted(element,binding){
                        // console.log('inserted');
                        element.focus()
                        element.value = binding.value
                    },
                    // uptade:指令所在的模板被重新解析时
                    update(element,binding){
                        // console.log('uptade');
                        element.value = binding.value
                    }
                }
            }
        })
    </script>

19-4.全局对象式

 Vue.directive('fbind',{
                // bind:指令与元素绑定成功时就调用
                    bind(element,binding){
                        // console.log('bind');
                        element.value = binding.value
                    },
                    // inserted:指令所在元素被插入页面时被调用
                    inserted(element,binding){
                        // console.log('inserted');
                        element.focus()
                        element.value = binding.value
                    },
                    // uptade:指令所在的模板被重新解析时
                    update(element,binding){
                        // console.log('uptade');
                        element.value = binding.value
                    }
        })

20.生命周期

**总结：**八个阶段

  1. beforeCreate
  2. created
  3. beforeMounte
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestroy
  8. destroyed

总结：重要注意事项

  1. mounted ： 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等
  2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅等收尾工作

总结：关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息
  2. 销毁后自定义事件会失效，但原生dom事件依然有效
  3. 一般不会有beforeDestroy操作数据，即使操作了数据，也不会触发更新流程了

请添加图片描述

忧郁火龙果
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue2.x生命周期执行顺序
Luo的博客
02-20 626
1.介绍 vue每个组件都是独立的，每个组件都有一个属于它的生命周期。从一个组件的创建、挂载、更新、销毁，这就是一个组件的生命周期。 2.生命周期图 本图来源于vue官网 3.单组件执行顺序 进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted beforeCreate：在执行该函数时，$el、$data、methods、computed在this中【无法获取】 created：在执行该函数时，$.
Vue@2.x系列之生命周期
小栗子的博客
02-25 78
Vue@2.x系列之生命周期1. 生命周期图示2. 组件初次渲染时调用的钩子函数3. 组件数据改变时调用的钩子函数4. 组件被销毁5. 实例方法/生命周期 1. 生命周期图示 该图示来自官网-生命周期 。 HelloWorld组件js部分： export default { name: 'HelloWorld', data() { return { list: ['list1', 'list2', 'list3'] } }, props: { msg: String },
vue click.stop 阻止点击事件继续传播（阻止事件冒泡）
且听风吟的博客
08-05 1238
vue click.stop 阻止点击事件继续传播（阻止事件冒泡）
vue Template模板中针对属性如何写空白字符串占位符?（\u00a0）会是一个好的空格占位解决方案
韩旭的博客
09-05 2276
解决空白占位符的几种方案
前端之vue事件处理
weixin_46372074的博客
04-25 1019
前端之vue事件处理事件处理元素绑定事件无参有参，事件用 `$event` 占位事件修饰符(6个).prevent.stop.once.self键盘事件 事件处理 事件的基本使用： 1,使用v-on:xxx或@xxx绑定事件，其中xxx是事件名; 2,事件的回调需要配置在methods对象中，最终会在vm上;(没有代理) 3,methods中配置的函数，不要用箭头函数！否则this就不是vm了; 4,methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象; 5.@click
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue2.X+Cesium
09-23
antd+vue2.X+Cesium加载三维球的示例
Vue2.x和Vue3.x面试常问知识点-面试题-JackieDYH - CSDN博客.pdf
09-07
Vue2.x和Vue3.x面试常问知识点-面试题 Vue2.x和Vue3.x面试常问知识点-面试题 Vue2.x和Vue3.x面试常问知识点-面试题 Vue2.x和Vue3.x面试常问知识点-面试题 Vue2.x和Vue3.x面试常问知识点-面试题 Vue2.x和Vue3.x面试常...
基于Vue2.X的路由和钩子函数详解
08-28
下面小编就为大家分享一篇基于Vue2.X的路由和钩子函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.x-reactive:vue2.x源码分析
05-25
vue2.x-reactive 调试方法 参考1.html，直接在浏览器控制台通过手动更改vm.xxx值即可看到结果
vue数据丢失的4中情况和解决方法（附视频教程）
chen801090的博客
07-14 4454
数据丢失是框架的BUG，vue中的数据绑定是通过ES5中属性的特性实现的。所以没有设置特性的数据，就会丢失。以下mounted中的四种操作都会导致数据丢失。 <template> <div> <div>{{ colors }}</div> <div>{{ obj }}</div> <div>{{ intro }}</div> </div> </template
关于VUE监听窗口变化事件问题
热门推荐
世界这么大我很想去躺会儿
06-27 1万+
Vuejs 本身就是一个 MVVM 的框架。但是在监听 window 上的 事件 时，往往会显得 力不从心。 比如 这次是 window.resize恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。 问题： 今天我也 遇到了这样一个问题， 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度备注： 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版
vue的事件总线（EventBus）
丢失的Litte_志伟的博客
12-02 287
vue的事件总线 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 创建EventBus Vue实例（两种方式） 一：在main.js里面创建 因为，我们是通过emit这个方法来触发EventBus的，而emit这个方法来触发E
Vue点击事件失效
m0_56800567的博客
09-20 8432
Vue点击事件失效 ,在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true;导致子组件的点击事件失效。1. div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，2. 还有一种可能被默认事件阻止了，我们加个这个就能解决，
解决VUE页面刷新，数据丢失「建议收藏」
cc蒲公英的博客
08-09 4170
解决VUE页面刷新，数据丢失
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 303
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 501
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Vue中 .passive 修饰符的作用
Keep trying, keep going
06-09 191
传统的事件监听器在事件触发时，会先执行事件处理函数，然后再决定是否阻止事件的默认行为（如阻止滚动）。这会导致性能问题，因为浏览器需要等待 JavaScript 执行完成后才能继续处理其他任务，如滚动页面。修饰符可以告诉浏览器，事件处理函数不会阻止事件的默认行为，这样浏览器就不需要等待 JavaScript 执行完成，可以立即进行其他任务。这可以提高页面的滚动性能，尤其是在移动端设备上。它的使用场景通常是针对那些需要频繁触发的事件，例如。来阻止事件的默认行为，因为浏览器会忽略这个调用。需要注意的是，当使用。
Vue3-滑动到最右验证功能
最新发布
地理信息的专栏
06-13 164
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue2.x和vue2
07-27
Vue2.x是目前国内市场上最流行的前端应用开发框架之一，而Vue3.x则是最新版本。Vue2.x的官方文档可以在https://v2.cn.vuejs.org找到，而Vue3.x的官方文档可以在https://cn.vuejs.org找到。\[1\] 使用Vue2.x的步骤...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

忧郁火龙果

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值