android keylayout by VUE
图中铅笔图标代表是note，在vue里可以看到其内容，这里转成了图片就不能看了； 来源： oschina 链接： https://my.oschina.net/u/1453251/blog/202043
vue
ECharts
ECharts ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 来源： oschina 链接： https://my.oschina.net/u/3685205/blog/1557463
Vue（二）header组件开发
一、 header 组件开发 之数据的传递 1. App.vue 引入组件 import header from './components/header/header' 2. App.vue 中注册组件 export default { components:{ v-header:header } } 3. 使用组件 <v-header :sell="sellerObj"></v-header> 解释：:sell="sellerObj",这里就像一个函数传参一样把sell当成形参，sellerObj就是实参，那么父组件实参是怎么传给子组件的，通过什么传 4. 父组件向子组件传递数据 在父组件中需要将sellerObj作为数据导出，子组件通过props从父组件中获得数据，且要指定数据类型 export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } } 小结： 子组件在props中创建一个属性，用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 5. 调用数据 <div class="logo"> <img :src="sell.avatar" alt="" width='64' height='64'/> </div>
vue-百度地图
Vue Baidu Map： https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 全局注册 全局注册将一次性引入百度地图组件库的所有组件。 import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' }) <template> <baidu-map class="bm-view"> </baidu-map> </template> <style> .bm-view { width: 100%; height: 300px; } </style> 局部注册 如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件 必须 声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和
vue中使用axios简单的封装post请求,并使用返回的数据
发现在学习vue的时候,不论你用的是哪种编程工具,是否使用打包和脚手架,都需要手工的多练习,只能说步步是坑. 在使用的过程中一定要多按F12，多写console.log来看输出的值是什么，非常有助于排错和知道返回的是啥东西 1、在vue的data中定义一个数组pingxuanren，用于存放从服务器端请求来的数据 data:{ pingxuanren:[], //需要评分的人员信息 userinfo:[], //用户自己的身份信息 userxx:'' }, 2、然后简单的封装一下axios的post请求，我也是从网上看了很多，抄了一下，自己并不会写。 //封装一下axios的POST请求 axiosPost:function(url,params){ return new Promise((resolve, reject) => { axios({ url: url, method: 'post', data: params, transformRequest: [function(data) { let ret = '' for(let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content
vue生命周期
1.beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 2.created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3.beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 4.mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。 5.beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 6.updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 然而在大多数情况下， 你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。 7.beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。 8
vue中公共样式
html, body, h1, h2, h3, h4, h5, h6, p, textarea, input, select, ul, ol, li, fieldset, figure { margin: 0; padding: 0; border: none; } html,body{ height: 100%; } ul, li { list-style: none; } body, textarea, input, select { font-size: 14px; color: #222222; font-weight: normal; font-family:"Helvetica Neue", Helvetica, STHeiTi, 'Microsoft Yahei',sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline: none; } a { text-decoration: none; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -ms-transition: all 0.25s ease; -o-transition: all 0.25s
vue-传值校验
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue1</title> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script> <link rel="stylesheet" type="text/css" href="vue.css"> </head> <body> <div id="app"> <comp :msg="msg"></comp> </div> <script> var comp={ //父组件传给子组件可以进行值校验， props:{ msg:{ type:String, //required:true, default:"hello,sa" // validator:function(){ // } } }, template:`<div>{{msg}}</div>`, //父组件传来的值要先接收，再修改 data(){ return { info:"" } }, created:function(){ this.info=this.msg+"ttt" console.log(this.info) } } var app=new Vue({ el:"#app", data:{ msg:"aaa" },
关于webstorm 对 vue的设置
1. 首先安装vue插件，安装方法： setting --> plugin ，点击plugin，在内容部分的左侧输入框输入vue，会出现两个关于vue的插件，点击安装即可。安装完成后，就可以看到，新建文件时，会有vue文件的提示。 如下图所示： 2. 设置vue新建文件模板。 步骤： settings --> file and code templates .在内容区域左侧点击vue file，修改对应的模板内容即可。 如下图所示： 3. 设置vue文件支持的编码格式（例如：支持的缩进是2）： 步骤：settings --> code style,把code style 下面所有你认识、觉得会用到的内容都设置成 2，当然也包括other file types，也是设置vue格式最关键的一步。 如下图所示： 4. vue 使用的是es6语法， 所以要将javascript的版本改成es6 步骤：settings --> languages& frameworks -- > javascript ,选择javascript,修改内容区域的javascript language version: ECMAScript 6 即可。 5. 如果你在修改vue文件，ctrl+s 之后，dev不自动编译，请参考 http://www.cnblogs
vue中dom元素和组件的获取
Vue中获取DOM元素 <div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <script> var vm = new Vue({ el:'#app', data: { }, methods: { getElement(){ console.log(this.$refs.myh3.innerText) } }, }) </script> 还可以直接获取组件中的数据和方法，直接调用 <div id="app"> <input type="button" value="获取元素" @click="getElement" ref="button"> <h3 ref="myh3">今天天气真好啊</h3> <hr> <login ref="mylogin"></login> </div> <script> var login={ template:'<h1>登录组件</h1>', data(){ return { msg: 'son msg' } }, methods: { show(){ console.log("调用了子组件中的方法") } }, } var vm = new Vue({ el:'#app', data: { },