一、组件间的通信 组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。如下图所示：二、 Prop — 父组件传递数据给子组件 ...
。。。啥也不说了，难受啊toggle-switch.vue<template><label role="checkbox" :class="[‘switch‘, { toggled }]"><input type="checkbox"class="switch-input"@change="toggle"/><div class="switch-core":style="{backgroundColor: toggled ? colorChecked : colorUnchecked}"><div class="switch-button":style="{transition: `transform ${speed}ms`,transform: toggled ? null: `translate3d(32px, 0px, 0px)`}"></div></d...
Vue.js是一个用于创建web交互界面的库。Vue.js专注于MVVM模型的ViewModel层。它通过双向数据绑定把View层和Model层连接了起来。实际的DOM封装和输出格式都被抽象为了Directives和Filters。Vue希望通过一个尽量简单的API来提供反应式的数据绑定和可组合、复用的视图组件。它不是一个大而全的框架，它只是一个简单灵活的视图层。您可以独立使用它快速开发原型、也可以混合别的库做更多的事情。它同时和诸如Firebase这一类的BaaS服务有...
指令什么是指令指令，directives，是vue非常常用的功能，在template里。都是以v-开头不是自己所为html元素，比如假设指令叫v-abc，没有<v-abc></v-abc>这种写法，这是组件（component）的写法，组件也是vue的一个强大功能都是在html元素里写，比如或者这样子的写法居多主要都是用于决定是否渲染，怎么渲染的功能v-if指令html元素根据v-if的结果是否为真从而决定是否渲染放在html元素里，比如div，也可以放在vue的<template>里（v-s...
SPA2019-11-13 23:20:48 by冲冲 1、概念（1）MPA（multi-page application）特点：每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站就是多页网站，也叫多页应用。（2）SPA（single-page application）① 原理：第一次进入页面时就会加载相应的HTML、JavaScript 和 CSS，需要切换内容时，通过JavaScript感知url变化，更换当前页面内容，但是并没有新的html文件请求。此时路由不再是后端做，而是前端做。...
来源：https://www.cnblogs.com/amunamuna/p/8997533.html先执行安装fastclick的命令。npm install fastclick -S之后，在main.js中引入，并绑定到body。import FastClick from ‘fastclick‘FastClick.attach(document.body);原文：https://www.cnblogs.com/zhaoyun4122/p/10818604.html
v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"> <p v-if="greeting">Hello</p> </div><script src="js/vue.js"></script> <script> var vm2 = new Vue({ el:‘#exa...
Vue.js笔记(一)Vue.js引入方法CDN引入下载vue.jsVue.js的使用1.创建Vue对象 new Vue({}) 2.属性el:element 需要获取的元素，一定是html的根容器元素data:用于数据的存储methods:用于存储各种方法3.在使用数据的地方使用{{ data的属性名}}或{{methods中方法名()}}4.代码示例 js代码：new Vue({el:"#vue-app",data:{name:"andy"，job:"java Web开发"},methods:{greet:function(time){return 'Good '+time+'!';}} });html代码：<!DOCT...
组件使用细节点解决元素标签位置错误的问题：is 属性<div id="app"><table><tbody><!--tbody里要用一个组件,但不能直接写组件名 会导致位置错误问题，使用 is 属性将自定义组件row 与 tr 标签绑定在一起 --><tr is=‘row‘></tr><tr is=‘row‘></tr><tr is=‘row‘></tr></tbody></table><ul><li is=‘row‘></li><li is=‘row‘></li><li is=‘row‘></li></ul></div><script>Vue.comp...
分为三个部分:1.template模版：123456<script type="text/x-template" > <form v-on:submit.prevent="addtodo(newtodo)"> <input type="text" v-model="newtodo.title"> <button type="submit">提交</button> </form></script>2.vue.js的js操作:12345678910111213141516Vue.component(‘todo-form‘,{ template:‘#todo-form-template‘, props:[‘todos‘], data(){ return { new...
演示地址：https://nirongxu.github.io/vue-xuAdmin/dist/#/login仓库地址：https://github.com/Nirongxu/vue-xuAdmin原文：https://www.cnblogs.com/gcgc/p/11865813.html
原文地址：http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"><input type="text" ref="input1"/><button @click="add">添加</button> </div><script> new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗}} }) </script>一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之...
By default, vue-router doesn’t lazy load the routes unless you tell it to do it. Lazy loading of the non-critical routes is one of the points of the PRPL pattern.This lesson will show you how you can use the dynamic import to lazy load non-critical routes. When we using Vue dynamice import syntax:const router = new VueRouter({routes: [{ path: ‘/images‘, component: () => import(‘./components/Im...
D:\vuejselement\workSpace\zutnlp_platform_show>cnpm install --save core-js/modules/es6.array.find-index × Install fail! Error: [@core-js/modules/es6.array.find-index] resolved target D:\vuejselement\workSpace\zutnlp_platform_show\core-js\modules\es6.array.find-index error: ENOENT: no such file or directory, lstat ‘D:\vuejselement\workSpace\zutnlp_platform_show\core-js‘ Error: [@core-js/modules/e...
import lodash from ‘lodash‘<input v-on:onclick ="doStuff">methods: { doStuff:loadsh.debounce(function () { // ... }, 500)} 每天学习一点点 编程PDF电子书免费下载： http://www.shitanlife.com/code原文：https://www.cnblogs.com/scode2/p/8671948.html