Vue
是Ryan吖
讀書 / 工作 / 遠方
展开
-
Vue-过渡&动画
1. Vue中的CSS动画原理如果要元素具有动画效果,则需要在元素外部包裹一个transition(过渡)标签,这样Vie就会自动帮我们构建一个动画流程;同时我们可以给标签通过name属性取一个名字,(如果不取名,Vue默认的class前缀是v)例如: <div id="root"> <transition name="fade"> <div v-if="show">Hello</div> &l原创 2020-05-15 18:02:34 · 437 阅读 · 0 评论 -
Vue-动态组件与v-once指令
动态组件——会根据is绑定数据的变化,动态地加载组件, 每一次切换时,都会销毁再创建一个组件,会消耗性能通过v-once指令可以提高静态内容的展示效率,它会把组件缓存到内存中,之后需要的时候再取出渲染举个栗子:我们要实现一个点击按钮,然后两个不同的div块交替显示<div id="root"> <!-- <child01 v-if="show==='01'"></child01> <child02 v-if="show=原创 2020-05-15 10:34:18 · 175 阅读 · 0 评论 -
Vue-插槽(slot)
目录1.插槽是什么?2.插槽的作用域3.后备内容(默认内容)插槽4.具名插槽5.作用域插槽在开始讲插槽之前,我们来思考一下:我们都知道,父组件可以随意地向子组件传递一个值,那么问题来了,如果我们要传递一个dom元素,比如说p标签呢?这个时候,我们会发现,p标签被转义了,没有直接渲染出来:(为了p标签的正常渲染,可以使用v-html,但是与此同时,它外层又会多了一个div标签:聪明的童鞋可能想到——用模板占位符template啊!其实在这里它么得用,是渲染不出来的:害,这也不行,那也不行,那究原创 2020-05-14 10:45:47 · 206 阅读 · 0 评论 -
Vue-非父子组件间传值
非父子组件间传值主要通过两种方式:vuex(一般用于大项目,耦合度很高,需要大量的储存一些 data,组件之间通信频繁。)bus通过 一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。...原创 2020-05-13 21:31:52 · 307 阅读 · 0 评论 -
Vue-给组件绑定原生事件
当我给一个组件绑定一个事件的时候,实际上这个事件绑定的是自定义的事件,也就是你真正的鼠标点击触发的事件,并不是我绑定的click事件。所以在下面这个例子里,点击子组件,并不会有弹窗提示。如果想触发自定义的click事件,就得在子组件里对元素进行事件绑定,这个事件才是真正的原生事件。在元素上绑定的事件,监听的是原生事件在组件上绑定的事件,监听的是自定义事件,需要用this.$emit()来触发。也就是酱婶的:在开发的过程中这样写有点太麻烦,假如我有这样的需求,我就想在子组件上监听原生的事件原创 2020-05-13 17:49:40 · 1898 阅读 · 0 评论 -
Vue-组件参数校验与非props特性
1.组件参数校验——父组件向子组件传递一些内容,子组件有权对接收的内容进行一些约束(即组件接收的参数是有规则可定义的),这些约束就是组件参数校验。子组件通过props接收传递参数,并说明传递参数的属性:type——参数类型required——是否必传default ——默认传的值validator——自定义校验器,要求字符串长度等2.props特性——子组件里声明了对父组件传递的属性的接收(父子组件之间有对应关系)(1)传递的属性不会在控制台的dom标签上显示(2)子组件模板可以通过插值原创 2020-05-13 17:36:42 · 133 阅读 · 0 评论 -
Vue-父子组件传值
1.父组件向子组件传值父组件通过props的方式向子组件传值2.子组件向父组件传值子组件通过$emit的方式向父组件传值$emit绑定一个自定义事件, 当这个语句被执行时, 就会触发事件并将参数传递给父组件,父组件通过v-on监听并接收参数。3.Vue有一个特性——单向数据流父组件可以向子组件传递数据,子组件只能接收,但不能直接修改,可以通过拷贝一个数据的副本进行修改。举个栗子:假如,有个慷慨的父组件想把100w传给他的子组件,这是完全ojbk的!那这个接收到了100w的子组件只能够去用原创 2020-05-13 17:23:10 · 95 阅读 · 0 评论 -
Vue-组件使用的细节点
1.用is标签解决组件使用当中可能出现的小bug模板标签使用时(table、ul)出现的bug:页面使用子组件模板来渲染table里的tr、td标签时, 会被作为无效的内容提升到外部,并导致最终渲染结果出错,tr显示会跟table同级,这不符合html规范——html只支持在table里写tr,ul里写lo,select里写option。这是无效的写法:<table> <blog-post-row></blog-post-row></table>原创 2020-05-12 09:27:58 · 102 阅读 · 0 评论 -
Vue-列表渲染
目录1.Vue怎么渲染一个列表?2.维护状态:key3.数组更新4.显示过滤/排序后的结果5.在 v-for 里使用值范围6.在 template标签上使用 v-for7.在组件上使用 v-for1.Vue怎么渲染一个列表?基于数组使用v-for 指令v-for 指令需要使用 item in items 语法,不过我们更推荐使用of代替in,因为这样更接近js迭代器的语法。其中 items...原创 2020-05-05 18:34:42 · 227 阅读 · 0 评论 -
Vue-条件渲染
1.v-ifv-if用于条件性地渲染一块内容。后边跟的依旧是一个js表达式,这个表达式的返回值决定了这块内容是否会被真实地挂载到页面上。(这块内容只会在指令的表达式返回 truthy 值的时候被渲染)<div v-if="show">Hello World</div>也可以用 v-else 添加一个“else 块”,不过一定要连写在一起使用:<div v-...原创 2020-05-03 20:58:36 · 169 阅读 · 0 评论 -
Vue-样式绑定(Class与Style)
操作元素的 class 列表和内联样式是数据绑定的一个常见需求,我们可以通过v-bind(或者简写为:)进行绑定,它后边跟的就是一个表达式,其类型除了字符串之外,还可以是对象或数组。那么v-bind是如何绑定class的呢?1.对象语法(class的对象绑定)我们可以传给 v-bind:class 一个对象(对象中也可以传入更多字段),以动态地切换 class:<div v-bind...原创 2020-05-01 21:29:38 · 681 阅读 · 0 评论 -
Vue-计算属性的getter和setter
计算属性默认只有 getter,不过在需要时也可以提供一个 setter:<body> <div id="root">{{fullName}}</div> <script> var vm = new Vue({ el:"#root", data:{ ...原创 2020-03-25 09:38:02 · 340 阅读 · 0 评论 -
Vue-方法、计算属性(computed)、侦听器(watch)
方法func计算得到的结果不会被系统缓存,每当数据有变化就会重新计算<body> <div id="root"> <div>{{fullName()}}</div> <!-- 方法想在插值表达式进行调用的时候,需要在后面加括号 --> <div>{{age}}&l...原创 2020-03-24 11:52:35 · 73 阅读 · 0 评论 -
Vue-模板语法
插值表达式:{{ }}将数据解析为纯文本,不能输出真正的html在页面加载时显示{{}},所以通常使用v-html和v-text代替原始HTML:v-html输出真正的html文本:v-text将数据解析为纯文本,不能输出真正的html,与花括号的区别是在页面加载时不显示{{ }}<body> <div id="root"> ...原创 2020-03-23 16:31:36 · 355 阅读 · 0 评论 -
Vue-TodoList(父子组件传值)
在组件的模板里绑定点击事件handleItemClick,props接收content和index两个变量在组件的methods里声明handleItemClick方法,并用$emit触发当前实例上的事件,附加参数index传给监听器delete回调。在组件标签里添加监听事件delete在vue实例methods里声明delete方法(传参数index),利用splice()方法,从当前下...原创 2020-03-20 12:00:20 · 245 阅读 · 0 评论 -
Vue-TodoList(组件化改造)
1. Vue组件是什么组件(Component)是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代码,可以将组件看作自定义的HTML元素组件系统让我们可以用独立可复用的小组件来构建大型应用2. 如何使用组件(1)...原创 2020-03-20 11:39:57 · 317 阅读 · 0 评论 -
Vue实践TodoList(v-for、v-model、v-on)
通过v-for指令绑定数组的数据,来渲染一个项目列表:<body> <div id="todo"> <input type="text"> <button>commit</button> <ul> <li v-for = "item i...原创 2020-03-16 23:21:46 · 167 阅读 · 0 评论 -
Vue-声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:<body> <div id='app'>{{content}}</div> //通过插值表达式{{}}调用data里的数据进行渲染 <script> // var dom = document.getElementById('a...原创 2020-03-16 22:18:25 · 299 阅读 · 0 评论 -
Vue的安装
Vue官网教程https://cn.vuejs.org/v2/guide/installation.html直接下载Vue.js包(建议下载开发版本的包,包含完整的警告和调试模式)html文档中用script标签引入包,Vue 会被注册为一个全局变量。<script src="vue.js"></script>...原创 2020-03-16 16:59:53 · 58 阅读 · 0 评论 -
Vue实现跑马灯效果
实现跑马灯效果的分析:给按钮绑定 点击事件 用v-on 或者@在按钮的事件处理函数中 写相关业务逻辑代码:拿到msg字符串,调用substring进行字符串的截取操作(截取第一个放到最后位置)为了实现“跑起来”的效果,也就是自动循环截取功能,需把步骤2放到定时器步骤:导入vue包创建控制区域定义vue实例注意:在vue实例中,需通过this.属性/方法名,才能访问da...原创 2020-03-16 16:49:14 · 2100 阅读 · 0 评论 -
前端框架模式MVC、MVP和MVVM的区别
1. 概述三种常见的前端架构模式——MVC、MVP、MVVM通过分离关注点来改进代码的组织方式。MVC模式是MVP、MVVM模式的基础这两种模式更像是MVC模式的优化改良版他们三个的MV(model,view)相同,不同的是MV之间的纽带部分2. MVC允许在不改变视图的情况下,改变视图对用户输入的响应方式用户对View的操作交给了Controller处理在Con...原创 2019-10-10 16:04:40 · 361 阅读 · 0 评论 -
框架和库的区别
1、框架用三个字概括就是大而全框架提供了一整套的解决方案对项目的侵入性较大项目如果需要更换框架,则需要重新架构整个项目2、库用三个字概括就是小而巧只提供了特定的API,也就是提供某一个小功能对项目的侵入性较小如果某个库无法完成某些需求,可以很容易切换到其它库实现需求,而代码无需做很大的修改...原创 2019-10-10 16:03:26 · 142 阅读 · 0 评论 -
Vue.js是什么
Vue.js是什么?是前端的主流框架之一,和Angular.js、React.js 一起并称为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,有配套的第三方类库,可以整合起来做大型项目的开发主要工作就是和界面打交道,来制作前端页面效果;为什么要学习流行框架?为了提高开发效率,时间就是效率,效率就是金钱提高开发效率的发展历程:原生JS -...原创 2019-10-10 16:01:42 · 87 阅读 · 0 评论