VUE
前端大流中的小菜鸡
这个作者很懒,什么都没留下…
展开
-
VUE初学--组件 component data
组件中的data组件中也可以自己的data组件中的data属性只能是一个函数,函数内部必须返回一个object对象组件中的data和Vue实例中的data数据使用方法一样组件中的data只能在各自的组件模板中使用各自组件的data数据Vue实例对象中的data不能够在组件中使用<div id="app"> <p>{{message}}</p> <my-component></my-component><br>原创 2020-06-09 14:05:31 · 2967 阅读 · 0 评论 -
VUE初学--组件 component 注册
component 是vue.js 最强的功能之一组件可以扩展 HTML 元素,封装可重用的代码组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树注册组件先使用 **Vue.extend()**创建组件<div id="app"> <my-component></my-component></app><template id="myComponent"> <h3>我.原创 2020-06-09 11:03:58 · 798 阅读 · 0 评论 -
VUE初学--组件prop的属性名不能使用驼峰命名
在使用vue组件props的属性名使用驼峰命名<div id="app"> <example v-bind:messageProp="messageProp"></example></div>Vue.component('example',{ props:['messageProp'], template:'<div>example测试-----》{{ messageProp.name }}{{messageProp.age原创 2020-05-19 10:30:32 · 1680 阅读 · 1 评论 -
VUE初学--表单输入与v-model
1、基本用法1、v-modle 在input的基本用法表单控件在实际业务需求中运用是非常常见,比如,输入框、下拉框、多选、单选等,一般常见于,用户登录注册等,用他们完成数据录入,校验,提交等Vue提供了 v-model 指令在表单元素上创建 双向数据绑定 他会根据控件类型自动选取正确的方法来更新元素 <div id="app"> <input type="text" ...原创 2019-12-13 15:07:20 · 1142 阅读 · 0 评论 -
VUE初学---事件处理 v-on:click、v-on:keyup
为什么在 HTML 中监听事件?你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无...原创 2019-11-22 15:59:29 · 3967 阅读 · 0 评论 -
VUE初学--列表渲染v-for
列表渲染 v-forv-for 指令基于一个数组来渲染一个列表,需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法,itemList 是元数据素组, item 是被迭代的数组元素的 别名注:我们可以用 of 替代 in 作为分隔符,它更接近 JavaScript 迭代器的语法 <div id...原创 2019-11-19 09:26:33 · 846 阅读 · 0 评论 -
VUE初学--条件渲染v-if、v-else、v-else-if 以及 v-if管理复用 key 学习、v-show
v-if原创 2019-11-15 11:07:59 · 764 阅读 · 0 评论 -
VUE初学 -- class与style绑定
操作元素的 class 列表和 内联样式(style)是数据绑定的一个常见需求,通常在html中进行绑定是 <style> .active{ color:#f00; } </style> // class 绑定 <div class="active">Give me five</div> // style 绑定 <di...原创 2019-11-14 14:10:36 · 288 阅读 · 0 评论 -
VUE初学--关于VUE的计算属性computed
计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护 <div id="app"> <div>{{ cityList.split('').reverse().join('-') }}</div> </div> var vm = new Vue({ el:'#app', d...原创 2019-11-18 10:02:15 · 254 阅读 · 0 评论