vue | 易学教程

vue的组件传值方式

阅读更多关于 vue的组件传值方式

1、路由传参 ①定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法: to="'路径/'＋value"』 ②在跳转到的页面加上参数props:[‘name’] ③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{{ name}}』 2、父组件向子组件传值 ①父组件内设置要传的数据『data(){ id: value}』 ②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『< myBtn :atrid=‘id’></ mybtn>』 ③在子组件添加参数props:[‘atrid’],即可 3、子组件向父组件传值 ①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』 ②在子组件中触发自定义事件，并传参。『this.$ emit(‘父组件中的自定义事件’,参数)』 4、组件之间传值（1）方法一、 ①建立一个公共的通信组件( Vue)，需要传值的组件里引入该通信组件 ②在一个中绑定一个事件this.on(‘eventname’, this. id) ③在另一个组件中触发事件this.$ emit(‘eventname’,( options)=>{}) (2)方法二、

vue解决跨域问题

阅读更多关于 vue解决跨域问题

一.什么是跨域　　跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了二.如何解决跨域问题　　1.使用jsonp实现，网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。 <script src="http://www.test.com/getData?callback=getData"></script> // 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字 // 处理服务器返回回调函数的数据 <script type="text/javascript"> // 服务器返回的数据会放到回调函数里面 function getData(res){ // 处理获得的数据 console.log(res.data) } </script> 　　2.使用Jquery ajax实现， $.ajax({ url: 'http://www.test.com:8888

记一次vue插槽出现问题：vue模板只能有一个根对象

阅读更多关于记一次vue插槽出现问题：vue模板只能有一个根对象

最近要做vue框架的前端需求，抱着“既然用这个语言了就把vue语法都过一遍”。今天做slot实例时浏览器报错，报错信息如下： vue. js : 634 [Vue warn] : Error compiling template : Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 1 | 2 | <div>我是todo-list组件</div> 3 | <slot></slot> | ^^^^^^^^^^^^^ 4 | | ^^^^^^^^^^^^ found in ---> <TodoList> <Root> 报错提示为：vue模板只能有一个根对象。然后我又看了toDoList组件template 内的html代码没有用一个div来或是别的标签来包裹全部的元素报错前端代码为： <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Document </ title > </ head > < body > < div id =

Electron+vue聊天仿微信界面|electron-vue聊天实践

阅读更多关于 Electron+vue聊天仿微信界面|electron-vue聊天实践

简介 electron-vchat实践聊天项目是基于electron+vue+electron-vue+vuex+Node技术开发的仿微信客户端界面聊天室。有实现消息发送/表情，图片/视频预览，拖拽上传/粘贴截图发送/微信dll截图，右键菜单、朋友圈/红包/换肤等功能。效果图技术架构框架技术：electron + electron-vue + vue 状态管理：Vuex 地址路由：Vue-router 字体图标：阿里iconfont字体图标库弹窗插件：wcPop 打包工具：electron-builder 图片预览：vue-photo-preview 视频组件：vue-video-player /** * @Desc 公共及全局组件配置 * @about Q：282310962 wx：xy190310 */ // 引入公共组件 import winBar from './components/winbar' import sideBar from './components/sidebar' // 引入公共样式 import './assets/fonts/iconfont.css' import './assets/css/reset.css' import './assets/css/layout.css' // 引入弹窗wcPop import wcPop from

VUE深度监听一个对象数组

阅读更多关于 VUE深度监听一个对象数组

项目开发中需要监听Vue 组件data中的一个数组的变化：studentList 使用 watch 直接监听数组 studentList的变化，没有效果，原因是：由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 解决：使用 deep 属性设置深度监听 watch 的 API 里面，有一个属性： deep ，使用它就可以对数组等嵌套对象进行深度监听。 watch: { items: { handler (val, oldVal) { this.val = val this.oldVal = oldVal this.difference = _.differenceWith(val, oldVal, (i, k) => JSON.stringify(i) === JSON.stringify(k)) this.lastUpdateTime = new Date().toISOString() }, // 这里是关键，代表递归监听 items 的变化 deep: true }, } 深度监听是能够响应数组里面的元素每一次的变化，但旧的值并没有被记录。原因在官网文档也有指明。注意

Vue源码9个基础方法

阅读更多关于 Vue源码9个基础方法

基础判断 function isUndef(v) { return v === undefined || v === null } function isDef(v) { return v !== undefined && v !== null } function isTrue(v) { return v === true } function isFalse(v) { return v === false } 检查是否是原始值 function isPrimitive(value) { return ( typeof value === 'string' || typeof value === 'number' || // $flow-disable-line typeof value === 'symbol' || typeof value === 'boolean' ) } 快速对象检查 function isObject(obj) { return obj !== null && typeof obj === 'object' } 获取值的原始类型字符串 var _toString = Object.prototype.toString; function toRawType(value) { return _toString.call(value).slice(8,

Vue CLI

阅读更多关于 Vue CLI

项目地址：https://cli.vuejs.org/zh/ 参考文章：https://www.cnblogs.com/jiangwenli/p/7338030.html 一、安装 npm install -g @vue/cli 二、创建项目 1.先安装cli-init； npm install -g @vue/cli-init 2.创建项目，打开cmd，进入到需要创建项目的位置（D:\Workplace），运行以下命令创建： vue init webpack vue-demo 3.安装依赖包，进入项目位置，使用以下命令安装依赖包和启动项目； npm install npm run dev 4.打开浏览器访问地址即可；来源： oschina 链接： https://my.oschina.net/discussjava/blog/3163731

node.js vue项目配置

阅读更多关于 node.js vue项目配置

main.js 全局配置 import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios';//全局配置axios 使用ajax axios.defaults.baseURL = 'http://localhost:8082';//配置全局请求路径 //axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; Vue.prototype.$http = axios; //将axios挂载在vue Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) index.js 路由相当于Controller import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Login

Laravel Vuejs 实战：开发知乎（2）用户登录

阅读更多关于 Laravel Vuejs 实战：开发知乎（2）用户登录

1.安装一个给用户提示的扩展包：二选一： https://github.com/laracasts/flash 【我选的这个】 https://github.com/oanhnn/laravel-flash-message 使用方法：在需要使用falsh消息的控制器中，调用flash方法即可：如： 1 public function store() 2 { 3 //flash('Welcome Aboard!'); 4 flash()->overlay('Welcome Aboard!', '登录提示'); 5 return home(); 6 } 同时可以如下方式调用： 1 flash('Message')->success(): Set the flash theme to "success". 2 flash('Message')->error(): Set the flash theme to "danger". 3 flash('Message')->warning(): Set the flash theme to "warning". 4 flash('Message')->overlay(): Render the message as an overlay. 5 flash()->overlay('Modal Message', 'Modal Title'):

antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标

阅读更多关于 antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标

table 组件错位导致问题出现的原因很多； 1. 内容区超过td范围， ant 组件并不像ele 提供了 tool-tip展示，解决办法：在每个单元格外包一层div 设置宽度 css 样式处理成文本溢出省略号代替显示当然你回发现这样处理过后文本是不会超出了，但是错位问题还是没有解决。 2. index 列和 check 列同时出现会存在错位。 index 列 ant 是不支持配置的，只能这样，在表头数据中插入一项 arr.unshift({ title: "序号", dataIndex: "index", width: this.indexWidth, render: (text, record, index) => `${index + 1}` }); 当你缩放页面，你会发现表头的缩放过程和表体不一致，这有导致了错位，，原因竟然是复选列和序号列的表头宽度和标题宽度不一致，这时又一个属性出现了 :scroll="{ x: scrollX, y: scrollY }"，通过设置 scroll 属性，官方意见是这样的 3. scroll 若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x。起初scrollX，为所有列之和，

订阅 vue