随笔分类 -  深入浅出Vue基础

vue中set方法
摘要：先上一坨代码 <body> <div id="app"> <div v-for="(item, key, index) of userInfo"> {{item}} {{key}} {{index}} </div> </div> <script> var vm = new Vue({ el: '#a 阅读全文
posted @ 2021-04-05 01:02 倦梦还 阅读(16592) 评论(0) 推荐(0)
vue中的条件渲染和条件渲染
摘要：vue中的条件渲染 v-if v-show 控制模板标签是否在页面上显示 v-if 对应的js表达式为false：移除该标签dom节点 v-show 对应的js表达式为false：只控制了display属性为none，dom节点依然存在 v-show 性能好一点，因为不会去频繁的操作dom v-if 阅读全文
posted @ 2021-04-04 19:22 倦梦还 阅读(859) 评论(0) 推荐(0)
样式绑定的两种方法
摘要：通过class绑定 :class="{ activated:isActivated}",根据isActivated的true或false决定dom是否有class="activated"属性 <head> <script src="../vue.js"></script> <style> .acti 阅读全文
posted @ 2021-04-04 19:05 倦梦还 阅读(219) 评论(0) 推荐(0)
computed的 getter 和 setter
摘要：computed对象：里面的属性为计算属性，其中计算属性的方式有2种。 第一种：计算属性fullName为方法 fullName:function(){return ...} 第二种：计算属性fullName为对象，此时此对象有2个方法，get与set方法 get方法：取值 set方法：此方法会传入 阅读全文
posted @ 2021-03-15 01:18 倦梦还 阅读(1017) 评论(0) 推荐(0)
computed & methods & watch
摘要：computed <div id="app"> {{firstName + " " + lastName}} </div> ​ <script> var vm = new Vue({ el: '#app', data:{ firstName:"peng", lastName:"yidong" } } 阅读全文
posted @ 2021-03-14 23:14 倦梦还 阅读(59) 评论(0) 推荐(0)
Vue的生命周期
摘要：先放上一张经典大图 生命周期函数就是Vue实例在某一个时间点会自动执行的函数 beforeCreate 在实例初始化之后，数据和事件配置之前被调用。el和data都还没初始化，所以data、methods和computed等都用不了。一般用来在组件挂在之前渲染一些东西。 created 这时候上面的 阅读全文
posted @ 2021-03-14 21:57 倦梦还 阅读(126) 评论(0) 推荐(0)
Vue实例
摘要：创建一个vue实例 <div id="root" @click="handleClick">{{message}}<div> <script> var vm = new Vue({ el: '#root', data: { message: 'Peng' }, methods:{ handleCli 阅读全文
posted @ 2021-03-14 20:29 倦梦还 阅读(140) 评论(0) 推荐(0)