1.组件是什么 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织； 1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#a...
最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。 但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。 而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。 1、自定义表头代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，headerDatas.label其实就是表头的...
Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发： - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍，下面来创建工程。首先利用 vue-cli3 搭建一个 SPA ...
1.单项数据绑定<div id="di"> <input type="text" :value="input_val"> </div><script> var app = new Vue({ el: #di, data: { input_val: hello world } }) </script> 通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue' 我们通过 vue 对象修改数据可以直接影响到 DOM 元素，但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据；我们把这种现象称为 单向数据绑定 ； 2.双向数据绑定v-model：<div id="di"><input t...
1、npm 引入 npm install mxgraph --save 2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须将mxBasePath选项提供给工厂函数，而不是将其定义为一个全局变量。 var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })工厂函数返回一个“命名空间对象”，通过它可以访问mxGraph包的所有对象。例如，mxEvent对象在mxgraph.mx...
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue表单绑定（单选按钮，选择框（单选时，多选时）</title></head><body><!-- 单选按钮 --><div id="app"><input type="radio" value="选择1" v-model="radio"/><label>选择1</label><input type="radio" value="选择2" v-model="radio"/><label>选择2</label><p>所选择：{{radio}}</p></div><!-- 选择框（单选时） --><div id="app1"><select v-model="select"><option...
用vue监听单行文本框是最最最容易的事。 只需用到 v-model 就能监听。 <template><div id="app"><input type="text" v-model="msg"><p>{{msg}}</p></div> </template><script> export default {name: app,data () {return {msg: }} } </script>在 data 里面创建一个 msg 变量，用来存储输入框的输入的内容。 在 input 用 v-model 绑定 msg 。 这时输入框输入的所有内容，都会实时更新到 msg 里。 所以 <p> 标签里的内容也会实时更新...
考虑以下菜单数据： [{name: "About",path: "/about",children: [{name: "About US",path: "/about/us"},{name: "About Comp",path: "/about/company",children: [{name: "About Comp A",path: "/about/company/A",children: [{name: "About Comp A 1",path: "/about/company/A/1"}]}]}]},{name: "Link",path: "/link"} ];需要实现的效果： 首先创建两个组件 Menu 和 MenuItem // Menuitem<template><li class="item"><slot /></...
先给大家展示下效果图：1.html代码<div class="form-group" style="display: flex;"><div><span>验证码：</span><input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码" /></div><div class="login-code" @click="refreshCode"><!--验证码组件--><s-identify :identifyCode="identifyCode"></s-identify></div></div>2.css样式/*验证码样式*/ .code{width:124px;height:31px;border:1px solid ...
插槽分为默认插槽和具名插槽： 默认插槽： //父组件 <div><h3>父组件</h3><testChild><div>默认插槽</div></testChild> </div>//子组件 <div><h4>子组件</h4><slot></slot> </div> 具名插槽： 注意：具名插槽需要包裹在 template 标签中，否则会报错 //父组件 <div><h3>父组件</h3><testChild><template v-slot:test>//v-slot: + 插槽名<ul><li v-for="item in list">{{item.name}}</li></ul></template></testChild></div> /...
transition动画 //使用动画库animate.css <transition enter-active-class=animated bounceIn leave-active-class=animated bounceOut :duration=200> //其中duration是绑定动画的时间 统一设置进入与出去的时间 <h3 v-if=flag>这里是动画的内容</h3> </transition > //也可以这样使用 <transition enter-active-class=bounceIn leave-active-class=bounceOut :duration={enter:200,leave:400}> //其中duration是绑定动画的时间 <h...
有些路由页面需要用户登陆之后才能访问如（用户中心），如果用户没有登陆就访问这些页面的话就应该转换到登陆页面，登陆成功之后在进入该页面。 需要用到的知识点有：H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆。 const router = new Router({mode: history,base: process.env.BASE_URL,routes: [{path: "/login",name...
最近要写个弹框，发现element-ui弹框样式还可以，就copy下来改吧改吧。也不分步骤详细介绍了直接上代码。 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来message文件夹src文件夹 index.jsimport Message from ./src/main.js; export default Message;mian.jsimport Vue from vue; import Main from ./main.vue; let MessageConstructor = Vue.extend(Main); let instance; let instances = []; let seed = 1;...
先看下vue-cli的使用 1：安装node 2：npm i vue-cli -gnpm install --global vue-cli 3：vue list 可以查看模板 4：选择一个模板，初始化项目，例如vue init webpack myPro 5：cd myPro 进入项目根目录 6：npm install 安装依赖 7：npm run dev 运行项目正文开始 公司有个项目要实现一个聊天功能,需求如下图,略显随意公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开...
父组件如何给子组件传值 使用props 举个例子： 子组件：fromTest.vue，父组件 app.vue fromTest.vue <template> <h2>{{title}}</h2> //title必须是父组件传递的 </template> <script>export default (){props:["title"] //可以是数组，也可以是对象//如何对title进行校验//props:{// type:String,required:true //如果父组件不传值就会报错//}} </script>父组件 app.vue <template> <from-test title = "你好 "></from-test> //...