Vue从入门到精通
文章平均质量分 50
每一个知识点都有对应的案例练习,Vue学习不二之选
解甲归田1
种一棵树最好的时间是十年前,其次是现在。
展开
-
19-Vue组件之间传值
Vue组件之间传值父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 APP中嵌套着...原创 2020-03-16 22:22:39 · 152 阅读 · 0 评论 -
18-Vue组件注册、全局注册及局部注册
组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名...原创 2020-03-16 22:19:41 · 200 阅读 · 0 评论 -
17-Vue图书列表案例
图书列表案例静态列表效果基于数据实现模板效果处理每行的操作按钮1、 提供的静态数据数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: ''...原创 2020-03-16 22:15:33 · 427 阅读 · 0 评论 -
16-Vue动态数组响应式数组
动态数组响应式数据Vue.set(a,b,c) 让 触发视图重新更新一遍,数据动态起来a是要更改的数据 、 b是数据的第几项、 c是更改后的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document<...原创 2020-03-16 22:13:05 · 556 阅读 · 0 评论 -
15-Vue数组变异方法和替换数组
数组变异方法在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素,成功返回当前数组的长度pop()删除数组的最后一个元素,成功返回删除元素的值shift()删除数组的第一个元素,成功返回删...原创 2020-03-16 22:12:20 · 581 阅读 · 0 评论 -
14-Vue声明周期
生命周期事物从出生到死亡的过程Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数####常用的 钩子函数beforeCreate在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了created在实例创建完成后被立即调用此时data 和 me...原创 2020-03-16 22:11:07 · 165 阅读 · 0 评论 -
13-Vue侦听器 watch 过滤器 过滤器传递参数
侦听器 watch使用watch来响应数据的变化一般用于异步或者开销较大的操作watch 中的属性 一定是data 中 已经存在的数据当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听 <div id="app"> <div> ...原创 2020-03-16 22:09:59 · 632 阅读 · 0 评论 -
12-Vue计算属性computed
计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!-- 当多次调用 ...原创 2020-03-16 22:08:54 · 100 阅读 · 0 评论 -
11-Vue自定义指令、Vue.directive注册全局指令、Vue自定义全局指令
自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --><input type="text" v-focus><script>// 注意点: // 1、...原创 2020-03-16 22:06:57 · 1436 阅读 · 0 评论 -
10-Vue表单基本操作、表单修饰符
表单基本操作获取单选框中的值通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监...原创 2020-03-16 22:04:03 · 183 阅读 · 0 评论 -
09-Vue实现tab栏切换案例
选项卡案例1、 HTML 结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { ...原创 2020-03-15 13:46:56 · 2294 阅读 · 0 评论 -
08-Vue循环结构、遍历数组与对象实例
循环结构v-for用于循环的数组里面的值可以是对象,也可以是普通元素<ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.messag...原创 2020-03-15 13:44:03 · 1484 阅读 · 0 评论 -
07-Vue分支结构
分支结构v-if 使用场景1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换<div id="app"> <!-- 判断是否加载,如果为真,就加载,否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! ...原创 2020-03-15 13:41:27 · 206 阅读 · 0 评论 -
06-Vue样式绑定
绑定class2、 v-bind 中支持绑定一个数组 数组中classA和 classB 对应为data中的数据这里的classA 对用data 中的 classA这里的classB 对用data 中的 classB<ul class="box" :class="[classA, classB]"> <li>学习Vue</li>...原创 2020-03-15 13:41:04 · 141 阅读 · 0 评论 -
05-Vue实现简单计算器案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>简单计算器<...原创 2020-03-15 13:33:51 · 502 阅读 · 0 评论 -
04-Vue事件绑定、事件修饰符、按键修饰符
v-on用来绑定事件的形式如:v-on:click 缩写为 @click;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body&g...原创 2020-03-15 13:32:57 · 304 阅读 · 0 评论 -
03-Vue双向数据绑定
双向数据绑定当数据发生变化的时候,视图也就发生变化当视图发生变化的时候,数据也会跟着同步变化v-modelv-model是一个指令,限制在 <input>、<select>、<textarea>、components中使用 <div id="app"> <div>{{msg}}</div> ...原创 2020-03-15 13:27:33 · 157 阅读 · 0 评论 -
02-Vue指令
指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏 */ [v-cloak]{ /* 元素隐藏 */ display: none; } </sty...原创 2020-03-15 13:24:22 · 192 阅读 · 0 评论 -
01-Vue实现helloworld
Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2020-03-15 13:20:12 · 331 阅读 · 0 评论