vue
MZ小白
记录自己学前端的一点一滴
展开
-
Vue之自定义指令的创建和使用
Vue之自定义指令的创建和使用 Vue自带的指令很多,如v-for/v-if/v-else/v-else-if/v-model/v-bind… 但是这些指令都是比较偏向于工具化,有些时候在实现具体业务逻辑的时候,发现不够用,那如何来自定义指令? 1.自定义指令 <body> <div id="container"> <p>{{msg}}&...原创 2019-08-13 17:03:02 · 418 阅读 · 0 评论 -
Vue其他常用指令
Vue其他常用指令 v-bind:将变量中的值通过v-bind绑定到元素指定的属性 eg:v-bind:style v-bind:class v-bind也支持简写(v-on:相当于 :) v-show:v-show=“表达式” ,根据表达式执行的结果的真假,来切换display显示还是隐藏 v-text:v-text=“变量”,根据变量更新对应的文本内容 v-html:v-html=“变量...原创 2019-08-12 10:33:37 · 161 阅读 · 0 评论 -
Vue的常用指令之事件绑定(v-on)
Vue的常用指令之事件绑定(v-on) v-on:通过v-on去给指定的事件绑定一个处理函数 语法:<any v-on:eventName="处理函数的名字"></any> eg:<button v-on:click="handleClick">clickMe</button> 当触发click事件就回调用handleClick方法 注意:方法在定义...原创 2019-08-12 10:26:27 · 932 阅读 · 0 评论 -
Vue的常用指令之选择指令(v-if)
Vue的常用指令之选择指令(v-if) v-if指令:根据表达式执行的结果的真假,来选择是否要挂载到DOM上 第一种语法:<any v-if="表达式"></any> 第二种语法: <any v-if="表达式"></any> <any v-else-if="表达式"></any> <any v-else="表达式"&g...原创 2019-08-12 10:15:34 · 855 阅读 · 0 评论 -
Vue的常用指令之循环指令(v-for)
Vue的常用指令之循环指令(v-for) v-for:根据in关键词后的集合,去循环创建多个标签 语法1:<any v-for="tamp in 集合"></any> 语法2:<any v-for="(value,key)in 集合"></any> 例子: <body> <div id="container"> ...原创 2019-08-12 10:10:57 · 536 阅读 · 0 评论 -
Vue的基础使用
Vue的基础使用 1**.第一个例子** <body> <div id="container"> <h1>{{msg}}</h1> </div> <script> new Vue({ el: "#container", d...原创 2019-08-11 21:22:09 · 144 阅读 · 0 评论 -
Vue的概述
Vue的概述 什么是Vue? Vue的开发者是尤雨溪,是受到angular的启发,是一个实现UI层的渐进式的js框架。 Vue用到哪里? Vue.js可以用在很多地方,从简单的表单验证到复杂的大型企业应用程序,vue都可以胜任,核心库是实现UI层的。 为什么用Vue? (1)有非常好的中文文档 (2)学习曲线比较缓和(易上手) (3)速度快 (4)体积小 (5)基于组件化的开发方式(web com...原创 2019-08-11 21:12:34 · 787 阅读 · 0 评论 -
Vue之组件
Vue之组件 W3C为什么有组件概念? 现在的前端领域,对于代码的质量和数量有着非常高的要求,特别容易出问题。 通过组件的方式来完成代码的管理和编写 组件:是一个可以被反复使用,带有指定功能的视图 组件化编程一切都是组件component,把可以被反复使用的任何的视图,都可以封装成组件 组件化的好处(封装): (1)提高了代码的复用率 (2)提高开发速度 (3)降低测试难度 (4)降低整个应用的耦...原创 2019-08-13 17:29:51 · 237 阅读 · 0 评论 -
Vue之自定义过滤器的创建和使用
Vue之自定义过滤器的创建和使用 作用:实现数据的筛选,过滤,格式化。 1.过滤器创建(过滤器的本质是有一个参数,有返回值的方法) <body> <div id="container"> <h1>{{msg}}</h1> <h1>{{price}}</h1> <h...原创 2019-08-13 17:11:51 · 342 阅读 · 0 评论 -
Vue中的v-model
Vue中的v-model 双向数据绑定: 方向1:data----->view 之前所接触的循环,判断,显示隐藏等指令,主要的功能是将数据绑定到视图 方式:(1)双花括号 (2)常见的指令 方向2:view----->data 将表单控件中用户操作的结果绑定到数据 方式:v-model v-model指令本身就是一个双向数据绑定的指令,即可以将数据绑定到视图,又可以将视图中的结果绑...原创 2019-08-12 10:44:20 · 438 阅读 · 0 评论