![](https://img-blog.csdnimg.cn/20200204100341708.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
你好呀Vue
持续学习Vue
Taegan1_1
这个作者很懒,什么都没留下…
展开
-
Vue之watch
Vue中采用watch用于侦听数据的变化,并在数据发生变化时做出相应。1. watch的一般用法<html> <head> <meta charset="utf-8"> <title>Vue-test</title> </head> <!-- watch使用 --> <body>...原创 2020-02-23 16:38:28 · 113 阅读 · 0 评论 -
Vue实战之数字输入框
<!-- 入口页面 --><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>input number</title> </head> <body> ...原创 2020-02-16 16:02:24 · 696 阅读 · 1 评论 -
Vue之render函数
在很多文章类型的网站中,都区分一级标题、二级标题、三级标题等,为方便分享url,它们都被做成了锚点,点击一下,会将内容加载网址后面,以#分割。将其封装为组件,一般写法如下:<!-- 锚点一般写法 --><body> <div id="app"> <anchor :level="2" title="特性">特性</a...原创 2020-02-09 22:56:39 · 311 阅读 · 0 评论 -
Vue之 x-templates
在组件template内容很冗长、复杂的情况下,如果在Javascript中拼接字符串,代码的可读性,以及编码效率都是很低的。Vue提供了另外一种定义模板的方式,在<script>标签中使用text/x-template类型,并且指定一个id,将这个id赋给template:<!-- x-template --><body> <div id="...原创 2020-02-06 21:05:56 · 267 阅读 · 0 评论 -
Vue之$nextTick
为了理解$nextTick的作用,先来看这样一个场景:有一个div,默认用v-if隐藏,点击一个按钮,改变v-if的值,让它显示出来,同时拿到这个div的文本内容,代码如下:<!-- $nextTick --><body> <div id="app"> <div id="div" v-if="showDiv">这是div...原创 2020-02-06 20:54:36 · 167 阅读 · 0 评论 -
Vue之组件高级用法
1. 递归组件组件在它的模板内可以递归地调用自己,只要给组件设置name选项即可,并且必须给一个条件来**限制递归数量,否则会抛出错误。<body> <div id="app"> <child-component :count="1"></child-component> </div> <...原创 2020-02-06 18:14:13 · 163 阅读 · 0 评论 -
Vue之slot插槽
当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot。这个过程叫做内容分发。其主要特点为:子组件不知道它的挂载点会有什么内容,挂载点的内容是由其父组件决定的。子组件有自己的模板。1. 作用域首先需要了解一个概念: 编译的作用域。父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译。slot分发的内容,作用域是在父组件上的。2. ...原创 2020-02-06 12:02:15 · 221 阅读 · 0 评论 -
Vue之组件通信
总体来说,Vue中组件之间的通信场景如下图:可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。1. 自定义事件子组件–>父组件: 采用自定义事件,子组件用$emit()来触发事件,父组件用$on()来监听子组件事件,父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件:<!-- 自定义事件 --><body> <...原创 2020-02-05 22:22:27 · 126 阅读 · 0 评论 -
Vue组件基础
1. 组件注册组件需要注册后才可以使用。组件有全局注册和局部注册两种方式。全局注册后,任何Vue实例都可以使用。此外,使用components选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。<!-- 组件注册 --><body> <div id="app"> <global-component></g...原创 2020-02-04 19:15:42 · 101 阅读 · 0 评论 -
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 · 266 阅读 · 0 评论 -
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 · 178 阅读 · 0 评论 -
Vue绑定class与绑定内联样式--v-bind
1. 绑定class–对象语法为v-bind:class设置一个对象,可以动态切换class:<!-- 绑定class-对象语法 --><body> <div id="app"> <!-- 类active依赖于数据isActive,当其为true时,div拥有类名Active --> <div :c...原创 2020-02-03 21:06:06 · 409 阅读 · 0 评论 -
Vue计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。1. 计算属性的用法所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算后的结果。计算属性的常见用法是自动监听数据变化,其可以依赖多个Vue实例的数据,只要其中一个数据发生变化,计算属性就会重新执行,视图也会...原创 2020-02-03 16:52:23 · 140 阅读 · 0 评论 -
初始Vue
1. MVVM模式Vue采用MVVM(Model-View-ViewModel)模式实现,MVVM模式由MVC演变而来当View层变化时,会自动更新到ViewModel层,反之亦然,View层与ViewModel层通过双向绑定建立连接。2. Vue实例<!-- 一个简单的Vue实例 --><html> <head> <meta charse...原创 2020-02-03 16:07:16 · 112 阅读 · 0 评论