Vue

最新推荐文章于 2024-09-26 18:04:52 发布

weixin_30237719

最新推荐文章于 2024-09-26 18:04:52 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tujw/p/10672210.html

本文介绍了Vue.js中关键的概念和技术细节，包括条件渲染、计算属性、监听器、列表渲染等，并探讨了如何通过Vue.set方法正确更新响应式数据，避免DOM复用问题，以及使用v-bind:class进行样式绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.set(target, key, value)
来改变数据的数组, 直接改变无法渲染

vue.$set也是一样的 实例
key 做好用 id
这样能减少问题
<div v-if=isActive>
    Username : <input type="text" name="" key="username"/>
</div>
<div v-else>
    Email : <input type="text" name="" key="email" />
</div>
vue 会复用 dom 加key后就不会复用了

v-show  --> display:none;

两个标签中
v-if  中间不能插其他标签  
v-else-if   
v-else
如果要显示或隐藏多个元素，
可以包含在 template 中， 减少多余的元素

v-bind:class = "{active : isActive}"
v-bind:class = "[activeClass]"
data 中写对应的变量

计算属性，只有发生改变时才调用
计算属性可以写成一个对象，
里面可以写get 和set 就可以赋值了
computed : {
    getMsg : function () {
        console.log('调用计算属性');
        return this.author.split("").reverse().join("");
    }
},

监听器，当msg发生改变时调用
watch : {
    msg : function () {
        console.log("msg发生改变了");
        this.author = this.msg;
    }
}

对象可以用三个
v-for="(item,key,value) of obj"

添加属性时
Vue.set(target, key, value)
vue.$set(target, key, value)

在table tbody 中渲染时
需要用 <tr is="child"></tr>
否则会渲染在table外

ref 引用
<div ref="ele">
        This is a content of div
</div>
在函数中 使用 this.$refs.ele 就可以使用

View Code

类型检验
props : {
    counter : {
        type : [String, Number],
        
        是否一定要传值
        required : false,
        
        检验，满足条件才能通过
        validator : function (value) {
            console.log(value);
            return value.toString().length > 2;
        }
},

在 template 中 写个
<slot></slot>
就可以将 写在 使用标签的地方的内容
放在slot中

如果模板内 slot 有name 属性
那么外面的的标签需要有 slot 与name属性对应
才能够正常显示
没有 name 属性的为 默认插槽
标签没有 slot 属性的 都显示在
默认插槽

 子组件 
    <slot content="我是一段内容"></slot>
    
    将组件中的内容显示在外面
<child>
        <template slot-scope="props">
            {{props.content}}
        </template>
    </child>
    
<component :is="type"></component>
date 中 type 返回 组件名

<transition>
    这里的元素会用动画效果
    如果要一开始就有动画
    appear
    appear-active-class
</transition>
类名 ， 如果 transition 有name属性 那么 将v给成name属性
.v-enter-active
.v-leave-active

enter-active-class="enter"
leave-active-class="leave"

转载于:https://www.cnblogs.com/tujw/p/10672210.html