Vue深入-3【Vue中实例方法、指令】

最新推荐文章于 2024-05-10 17:57:11 发布

可乐雪碧薄荷糖

最新推荐文章于 2024-05-10 17:57:11 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110915724

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

(1).vue3的挂载

1.createApp创建

vue3的挂载方法不是通过new Vue挂载的，而是通过createApp创建和mount 挂载的

createSSRapp可以创建服务端

<body>
    <div id="app"></div>
    <script src="vue3引入"></script>
    <script>
        const Counter = {
            data(){
                return {
                    conunter:0
                }
            }
        }
        let app = Vue.createApp(Counter)
        app.mount('#app')
    </script>
</body>

2.es5的方式模板挂载/及手动挂载

let vm = new Vue({
    template:'<div>M</div>'
})
vm.$mount('#app');//手动挂载
如果mount没有传参数，那么就会渲染成document文档外的元素
document.getElementById('id').appendChild(vm.$el)//es5挂载

(2).vue2中的api

1.$options

可以获取到配置参数

let vm = new Vue({
    ...
})
log(vm.$options)

2. $watch('dataname',fn(new ,old){})

可以监听到新值的渲染,并可以从参数中拿到data中新的值和旧的值

let vm = new Vue({
    el:'#app',
    data(){
        return {
            message: 'Hello'
        }
    },
    template:'{{message}}'
})
vm.$watch('message',function(new,old){
    
})
vm.message = '1'
vm.message = '2'

如果多次改变，也只会执行一次。newValue为最后一次变更的值，oldValue为最初初始的值

其中vue改变值并不是同步，立马生效的，而是在下一轮loop中才会执行，

vm.message = 'xx'
console.log(vm.$el.textContent === 'xx') //false
Vue.nextTick(function(){
    console.log(vm.$el.textContent === 'xx')//true
})
这里会有个bug 如果你div中有空格 第二个会打印false

3.$delete(dataname,key)

强制更新视图

用来删除数组/对象中的一项的

4.$set(dataname,key,value)

强制更新视图

用来增加数组/对象中的数据

(3).指令

指令就是封装的do'm操作

1.v-once

只渲染一次

<body>
    <div id="app">
        <div v-once>{{message}}</div>
    </div>
    <script src="vue2引入"></script>
    <script>
       let vm = new Vue({
           el:'#app',
           data(){
               return{
                   message:'Hello'
               }
           }
       })
       vm.message = 'Bye'
    </script>
</body>
此时只会是hello bye是无效的

2.v-html

可以将值编译成dom元素，会将这个节点下所有的do'm都替换成编译后的dom

<body>
    <div id="app">
        <div v-html="imgSrc">xx</div>
    </div>
    <script src="vue2引入"></script>
    <script>
       let vm = new Vue({
           el:'#app',
           data(){
               return{
                   imgSrc:'<img onerror="console.log(`1`)">M</div>'
               }
           }
       })
       vm.message = 'Bye'
    </script>
</body> do'm元素中不会有xx

img标签中onerror在图片加载错误时，会触发

那么就会导致v-html时会有漏洞风险，可以通过纯文本插件(sanitize-html)来处理

3.v-if/v-for/v-show

if判断完则不会执行里面得语句了，v-show会执行

<div v-if="false">
    <div v-for="color in colors">{{color}}</div>
</div>    
页面上看不到任何结果，dom也没有改变

<div v-show="false">
    <div v-for="color in colors">{{color}}</div>
</div>    
页面上看不到任何结果，dom改变了

v-show是不能写在template标签上的，是不生效的。得写在div上得

元素如果频繁切换要使用v-show

<template v-show = "true">
xx
</template> 不会做判断也会渲染出xx

v-if和v-for不能连用，v-for会先执行循环3个div出来，而if得false又会把他们删除掉

<div v-for="color in colors" v-if="false" >
    <div>{{color}}</div>
</div>  页面是空的

(4).动态绑定类名

冒号后面只要没加引号得都是可以写变量得

<div :class="[{'active':flag},'test']"></div>数组得第一项必需是对象
<div :class="{'active':true,'test':true}]"></div>

(5).动态样式

冒号后面只要没加引号得都是可以写变量得

<div :style="[{color:'red'},{font-size:size}]"></div>
<div :style="{color:'red',dispaly:'none'}]"></div>

可乐雪碧薄荷糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue深入-3【Vue中实例方法、指令】

(1).vue3的挂载1.createApp创建vue3的挂载方法不是通过new Vue挂载的，而是通过createApp创建和mount 挂载的createSSRapp可以创建服务端<body> <div id="app"></div> <script src="vue3引入"></script> <script> const Counter = {
复制链接

扫一扫