![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
crazy_univer
undefined
展开
-
Vue计算属性(computed)(Vue08)
计算属性原创 2021-02-22 17:35:13 · 153 阅读 · 0 评论 -
Vue侦听器(watch)(Vue07)
侦听器原创 2021-02-04 14:47:05 · 122 阅读 · 0 评论 -
ref获取dom(Vue06)
每一个组件(实例)下,都有一个名为“$refs”的属性。打印这个属性,会显示一个对象,里面有添加量ref属性的dom元素。 <div ref="odiv"> <span ref="ospan"> this.$refs { odiv:div, ospan:span } 获取 this.$refs['odiv'] this.$refs.ospan 例:按按钮,字体变蓝 <div id="app"> <div class="box" re原创 2020-10-22 16:36:48 · 152 阅读 · 0 评论 -
Vue中的class和style(Vue05)
Vue中的class const vm = new Vue({ el: '#app', data: { a: 'box', b: 'box2', isActive:false } }) <div id="app"> <div :class="a"></div> <!-- div class="box" --> <di原创 2020-10-15 21:47:30 · 123 阅读 · 0 评论 -
循环渲染v-for(Vue04)
列表渲染 (循环渲染) 循环数组 <div id="app"> <ul> <li v-for="(item, index) in arr"> //item是元素,index是下标。(只写一个是元素) {{index}}==>{{item}} </li> </ul> </div> const vm = new Vue({ el: '#app', data:原创 2020-10-14 21:55:53 · 227 阅读 · 0 评论 -
条件渲染v-if(Vue03)
v-if 控制元素 显示、消失 v-if v-else-if v-else <div id="app"> <button @click="change">改变</button> <div class="box1" v-if="a%3==0">1</div> <div class="box2" v-else-if="a%3==1">2</div> <div class="box3原创 2020-10-14 21:17:46 · 113 阅读 · 1 评论 -
Vue的指令(Vue02)
扩展了 普通html属性的功能(用法同自定义属性) 用法: v-指令名=“值” <div v-xxx="值"> 总结: <元素 v-指令=“xxx”> 指令的值需要写在引号中: 1.也是js环境 2.里面可以写表达式 不能写语句 3.全局函数 只能使用白名单中 相当于模板中的语法 v-model将表单控件的value 属性 与 vue中的 数据 进行双向绑定 v-text将元素 的文本内容 与 一个vue的数据进行绑定 v-html渲染富文本数据(不管是v-text还是{{}}都不原创 2020-10-14 19:36:29 · 114 阅读 · 0 评论 -
Vue的结构(Vue01)
vue是什么 是一个js的 mvvm 渐进式 视图 框架 mvc m model 数据层 c controller 核心业务代码 v view 视图 html/css mvvm m 数据 v 视图mv vm(vmodel vue实例) 当数据改变时,视图自动刷新 (通过vmodel vue的实例控制刷新) vue雏形 <div id="app"> {{ msg }} </div> <script src="./vue.js"></script&g原创 2020-10-10 11:47:44 · 156 阅读 · 0 评论