Taegan1_1-优快云博客

原创 Vue之watch

Vue中采用watch用于侦听数据的变化，并在数据发生变化时做出相应。1. watch的一般用法<html> <head> <meta charset="utf-8"> <title>Vue-test</title> </head>  <body>...

2020-02-23 16:38:28 167

原创 283. Move Zeroes

Given an array nums, write a function to move all 0’s to the end of it while maintaining the relative order of the non-zero elements.Example:Input: [0,1,0,3,12]Output: [1,3,12,0,0]Note:You must d...

2020-02-16 22:15:25 183

原创 Vue实战之数字输入框

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input number</title> </head> <body> ...

2020-02-16 16:02:24 782 1

原创 Vue之render函数

在很多文章类型的网站中，都区分一级标题、二级标题、三级标题等，为方便分享url，它们都被做成了锚点，点击一下，会将内容加载网址后面，以#分割。将其封装为组件，一般写法如下：<body> <div id="app"> <anchor :level="2" title="特性">特性</a...

2020-02-09 22:56:39 386

原创 Vue之 x-templates

在组件template内容很冗长、复杂的情况下，如果在Javascript中拼接字符串，代码的可读性，以及编码效率都是很低的。Vue提供了另外一种定义模板的方式，在<script>标签中使用text/x-template类型，并且指定一个id，将这个id赋给template：<body> <div id="...

2020-02-06 21:05:56 338

原创 Vue之$nextTick

为了理解$nextTick的作用，先来看这样一个场景：有一个div，默认用v-if隐藏，点击一个按钮，改变v-if的值，让它显示出来，同时拿到这个div的文本内容，代码如下：<body> <div id="app"> <div id="div" v-if="showDiv">这是div...

2020-02-06 20:54:36 243

原创 Vue之组件高级用法

1. 递归组件组件在它的模板内可以递归地调用自己，只要给组件设置name选项即可，并且必须给一个条件来**限制递归数量，否则会抛出错误。<body> <div id="app"> <child-component :count="1"></child-component> </div> &lt...

2020-02-06 18:14:13 212

原创 Vue之slot插槽

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot。这个过程叫做内容分发。其主要特点为：子组件不知道它的挂载点会有什么内容，挂载点的内容是由其父组件决定的。子组件有自己的模板。1. 作用域首先需要了解一个概念：编译的作用域。父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。slot分发的内容，作用域是在父组件上的。2. ...

2020-02-06 12:02:15 281

原创 Vue之组件通信

总体来说，Vue中组件之间的通信场景如下图：可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。1. 自定义事件子组件–>父组件：采用自定义事件，子组件用$emit()来触发事件，父组件用$on()来监听子组件事件，父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件：<body> <...

2020-02-05 22:22:27 173

原创 Vue组件基础

1. 组件注册组件需要注册后才可以使用。组件有全局注册和局部注册两种方式。全局注册后，任何Vue实例都可以使用。此外，使用components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。<body> <div id="app"> <global-component></g...

2020-02-04 19:15:42 144

原创 Vue中的表单与v-model

1. v-model基本用法Vue中通过指令v-model对表单完成双向绑定。1.1 文本输入框<body> <div id="app"> <input type="text" v-model="message" placeholder="Please input text"> ...

2020-02-04 11:39:06 330

原创 Vue常用指令

1. v-cloakv-cloak不需要表达式，其会在Vue实例结束编译时从绑定的HTML元素上移除，常与CSS中的display:none配合使用，其目的是为了解决在未加载代码导致的闪烁现象：<html> <head> <meta charset="utf-8"> <title>Vue-05</title> ...

2020-02-04 10:02:30 230

原创 Vue绑定class与绑定内联样式--v-bind

1. 绑定class–对象语法为v-bind:class设置一个对象，可以动态切换class：<body> <div id="app">  <div :c...

2020-02-03 21:06:06 485

原创 Vue计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。1. 计算属性的用法所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。计算属性的常见用法是自动监听数据变化，其可以依赖多个Vue实例的数据，只要其中一个数据发生变化，计算属性就会重新执行，视图也会...

2020-02-03 16:52:23 199

原创初始Vue

1. MVVM模式Vue采用MVVM(Model-View-ViewModel)模式实现，MVVM模式由MVC演变而来当View层变化时，会自动更新到ViewModel层，反之亦然，View层与ViewModel层通过双向绑定建立连接。2. Vue实例<html> <head> <meta charse...

2020-02-03 16:07:16 144