-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
66 lines (66 loc) · 11.3 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[父子组件通信：pros、$emit]]></title>
<url>%2F2019%2F08%2F19%2F%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%EF%BC%9Apros%E3%80%81-emit%2F</url>
<content type="text"><![CDATA[父组件1234567891011121314151617181920212223242526272829303132<template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法，调用自己的parentSay方法--> <!--通过:msg将父组件的数据传递给子组件--> <children :msg="msg" @say="parentSay"></children> </div></template><script>import Children from './children.vue'export default { data () { return { msg: 'hello, children' } }, methods: { // 参数就是子组件传递出来的数据 parentSay(msg){ console.log(msg) // hello, parent } }, // 引入子组件 components:{ children: Children }}</script> 子组件1234567891011121314151617181920212223242526272829303132333435363738<template> <div class="hello"> <div class="children" @click="say"> 我是子组件 <div> 父组件对我说：{{msg}} </div> </div> </div></template><script> export default { //父组件通过props属性传递进来的数据 props: { msg: { type: String, default: () => { return '' } } }, data () { return { childrenSay: 'hello, parent' } }, methods: { // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件 say(){ this.$emit('say' , this.childrenSay); } } }</script> 结果vue父子通信.png 总结vue的父子组件间通信可以总结成一句话：父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递。 PS:看了一下dom简介明了。转：https://segmentfault.com/a/1190000014381699]]></content>
<categories>
<category>vue</category>
</categories>
<tags>
<tag>vue</tag>
</tags>
</entry>
<entry>
<title><![CDATA[input输入框中文输入法处理]]></title>
<url>%2F2019%2F08%2F19%2FUntitled%2F</url>
<content type="text"><![CDATA[功能要求比如一个搜索框，要求输入中文的时候请求，不能在拼音的时候请求。 MDN： compositionstart 当浏览器有非直接的文字输入时，compositionstart事件会以同步模式触发 compositionend 当浏览器时直接的文字输入时，compositionend会以同步模式触发 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Input中文处理</title></head><body> <div> <input id="input1" type="text" placeholder="输入中文"> </div> <script type="text/javascript"> var a = document.getElementById('input1'); a.addEventListener('compositionstart',function (e) { console.log("开始拼写"); console.log(e.target.value); }); a.addEventListener('compositionend',function (e) { console.log("拼写结束"); console.log(e.target.value) }) </script></body></html> 12345//console输出开始拼写拼写结束啊 使用这两个方法就可以处理中文输入法问题，可以在这两个函数里写一些操作。可以把Dom复制一份体会一下。]]></content>
<categories>
<category>web前端</category>
</categories>
<tags>
<tag>javascript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Vue、iview组件库-Dropdown 下拉菜单组件支持上下按键选中并可以回车，填充相关信息]]></title>
<url>%2F2019%2F08%2F07%2FVue%E3%80%81iview%E7%BB%84%E4%BB%B6%E5%BA%93-Dropdown-%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81%E4%B8%8A%E4%B8%8B%E6%8C%89%E9%94%AE%E9%80%89%E4%B8%AD%E5%B9%B6%E5%8F%AF%E4%BB%A5%E5%9B%9E%E8%BD%A6%EF%BC%8C%E5%A1%AB%E5%85%85%E7%9B%B8%E5%85%B3%E4%BF%A1%E6%81%AF%2F</url>
<content type="text"><![CDATA[Dropdown 下拉菜单组件支持上下按键选中并可以回车，填充相关信息vue动态搜索组件.png 123456789101112131415161718192021<Dropdown class="auto-complete-dropdown" width="500" placement="bottom-start" @on-click="invoiceDropdownClick" @on-visible-change="visivle"> <input href="javascript:void(0)" @keyup.enter="invoiceDropdownClick(listSelectedName)" @keyup.up="upClick" @keyup.down="downClick" class="auto-complete-input" placeholder="请输入名称" v-model="invoiceDetails.purchaserName" type="text"> <DropdownMenu slot="list"> <DropdownItem ref="list" :selected="listSelected===index?true:false" :name="item.id" v-for="(item,index) indata2" :key="index">{{item.customerName}}</DropdownItem> </DropdownMenu></Dropdown> 123456789101112data(){ return{ listSelected: -1, //默认选择名称列表项 listSelectedName: "", //列表id、选中项ID }} 需要用到 @on-visible-change="visivle" @keyup.enter @keyup.up @keyup.down 原理是：在DropdownItem上绑定ref，通过操作$refs.xxx进行选中和回车事件 1234567891011//显示关闭下拉菜单重置选中项(可根据需求更改，默认不写此方法会再次打开下拉菜单会选中上一次选中的菜单项)visivle(e) { if (e === false) { this.listSelected = -1; }}, 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061//listSelectedName接受的是组件:name属性的"item.id"的值。根据需求可能绑定的值不一样。这块的name是根据选中项的ID给其他输入框填充信息//下方向键downClick() { let listLength = this.$refs.list.length; if (this.listSelected < listLength - 1) { this.listSelected++; this.listSelectedName = this.$refs.list[this.listSelected].name; this.listVisible = false; } else { this.listSelected = 0; }},//上方向键upClick() { let listLength = this.$refs.list.length; if (this.listSelected <= 0) { this.listSelected = listLength - 1; } else { if (this.listSelected < listLength) { this.listSelected--; this.listSelectedName = this.$refs.list[this.listSelected].name; this.listVisible = false; } else { this.listSelected = listLength - 1; } }},//回车事件、单击事件。回车事件和单击事件根据具体需求可以写成一个。invoiceDropdownClick(e){//将选中项ID传过来，通过for循环进行对比，匹配成功后给需要填充值的输入框填充对应的值即可。}]]></content>
<categories>
<category>vue</category>
</categories>
<tags>
<tag>vue</tag>
<tag>iviewui</tag>
</tags>
</entry>
<entry>
<title><![CDATA[html-webpack-plugin使用问题]]></title>
<url>%2F2019%2F07%2F30%2Fhtml-webpack-plugin%E4%BD%BF%E7%94%A8%E9%97%AE%E9%A2%98%2F</url>
<content type="text"><![CDATA[html-webpack-plugin使用问题 中文文档：Html-webpack-plugin 安装npm install --save-dev html-webpack-plugin 配置webpack.config.js 1234567891011var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin()]}; 如果使用默认生成的.html文档时，它是没有需要挂载<div id="root"></div>。比如Vue和React需要在.html里写一段需要挂载div，所以需要设置模板。 123456789101112131415var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template:"public/index.html" }) ]}; 设置好模板后，打包如果出现下面的错误 ERROR in Template execution failed: ReferenceError: BASE_URL is not defined ERROR in ReferenceError: BASE_URL is not defined 就需要配置一个 html-loader loader，对html文件进行转换。文档处(拉到最下面):The template option However this also means that in the following example webpack will use the html loader for your template. This will cause html minification and it will also disable the ejs fallback loader. { module: { loaders: [ { test: /\.html$/, loader: 'html-loader' }], }, plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' }) ] } 安装npm install html-loader -D，配置好后，再打包就没问题了。具体是什么原因导致的不清楚，没查出来。望有大佬不吝赐教。]]></content>
<categories>
<category>webpack</category>
</categories>
<tags>
<tag>webpack</tag>
</tags>
</entry>
<entry>
<title><![CDATA[MockJS笔记]]></title>
<url>%2F2019%2F07%2F08%2FMockJS%E7%AC%94%E8%AE%B0%2F</url>
<content type="text"><![CDATA[MockJS安装Npm install mockjs —save-dev 2.在src里创建mock文件夹 3.在mock文件夹里创建mock.js 4.在main.js引入mock Require(‘./mock/mock.js’);5.在mock.js开始写配置 以post方式为例： 12345678910111213141516171819202122//引入mockjsconst Mock = require("mockjs");// 获取 mock.Random 对象const Random = Mock.Random;//使用mockjs模拟数据Mock.mock("/api/login",'post',(req, res) => { //当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据 const login = JSON.parse(req.body); if (login.req === "admin" && login.res === 123123) { return { state: "ok" }; } else { return { state: "error", string: "账号或密码错误" }; }}); 12345678910111213//login.vue axios .post("/api/login", { req: "admin", res: 123123 }) .then(res => { console.log(res); }) .catch(res => { alert("wrong"); }); 语法格式：Mock.mock 定义接口里需要有return返回接口结果 Mock.mock(rurl, function(options)) 如果是GET请求，那么要从options.url里面拿，然后自己解析出来； 如果是普通的POST请求，那么要从options.body里面拿，然后自己解析类似a=1&b=2这种格式； 如果参数是JSON格式并且是POST，那么要从options.body里面拿，然后JSON.parse()再获取；]]></content>
<categories>
<category>mockjs</category>
</categories>
<tags>
<tag>javaScript</tag>
<tag>mockjs</tag>
<tag>模拟接口</tag>
</tags>
</entry>
<entry>
<title><![CDATA[Hello World]]></title>
<url>%2F2019%2F07%2F08%2Fhello-world%2F</url>
<content type="text"><![CDATA[第一次玩这博客，经理了一下午琢磨，现在已经完成了。只不过需要后续的完善。 有时间继续吧！]]></content>
</entry>
</search>