-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
173 lines (93 loc) · 64.5 KB
/
atom.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Judy</title>
<subtitle>Never Give Up</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2018-05-16T01:37:51.658Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>Judy</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>面试知识点笔记-js</title>
<link href="http://yoursite.com/2018/05/15/JS-note1/"/>
<id>http://yoursite.com/2018/05/15/JS-note1/</id>
<published>2018-05-15T09:41:39.225Z</published>
<updated>2018-05-16T01:37:51.658Z</updated>
<content type="html"><![CDATA[<h5 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h5><p>JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。<br>JavaScript 只有声明的变量会提升，初始化的不会。<br>js中创建函数有两种方式：函数声明式和函数字面量式,只有函数声明才存在函数提升。<br>函数声明优先于变量声明。</p><h5 id="闭包的理解"><a href="#闭包的理解" class="headerlink" title="闭包的理解"></a>闭包的理解</h5><p>有权访问另一个函数作用域内变量的函数都是闭包<br><a href="https://www.cnblogs.com/JIANGCHEN520/p/7118656.html" target="_blank" rel="external">参考原地址</a><br>通俗来说，一般情况一个函数（函数作用域）执行完毕，里面声明的变量会全部释放，被垃圾回收器回收。但闭包利用一个技巧，让作用域里面的变量，在函数执行完之后依旧保存没有被垃圾回收处理掉。<br>举例来说，当点击一组button按钮的时候，通过for循环来为每一个btn添加点击事件，通过把i传入自执行函数来绑定click事件，由于i一直在被引用中，不会被回收掉，所以就形成了闭包。</p><h5 id="原型及原型链"><a href="#原型及原型链" class="headerlink" title="原型及原型链"></a>原型及原型链</h5><h5 id="iframe缺点"><a href="#iframe缺点" class="headerlink" title="iframe缺点"></a>iframe缺点</h5><p>样式难调，会增加服务器的http请求，无法被一些搜索引擎解读，iframe会阻塞主页面Onload事件。<br> iframe优点： 能够直接把嵌入的网页展示出来，第三方图标广告</p><h5 id="Ajax的原生写法"><a href="#Ajax的原生写法" class="headerlink" title="Ajax的原生写法"></a>Ajax的原生写法</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js01.jpg" alt="image"></p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js02.jpg" alt="image"></p><h5 id="同源策略"><a href="#同源策略" class="headerlink" title="同源策略"></a>同源策略</h5><p>限制了一些不同源的脚本，从一个域上加载的脚本不允许访问另外一个域的文档属性。</p><h5 id="前端处理跨域"><a href="#前端处理跨域" class="headerlink" title="前端处理跨域"></a>前端处理跨域</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js03.jpg" alt="image"></p><ol><li>jsonp跨域通过动态创建script标签，请求一个带参数的路径及一个回调函数，缺点是只能get请求</li><li>document.domain + iframe跨域,缺点是仅限主域相同，子域不同的跨域应用(父:(<a href="http://www.domain.com/a.html),子：(http://child.domain.com/b.html" target="_blank" rel="external">http://www.domain.com/a.html),子：(http://child.domain.com/b.html</a>))</li><li><p>postMessage跨域html5中的属性，可跨window属性之一<br><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js04.jpg" alt="image"></p></li><li><p>跨域资源共享，只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。主流的跨域解决方案</p></li><li>node.js中间件代理：通过启一个代理服务器，实现数据的转发<h5 id="判断两个对象是否相等"><a href="#判断两个对象是否相等" class="headerlink" title="判断两个对象是否相等"></a>判断两个对象是否相等</h5>instance of(能在实例的原型对象链中找到该构造函数的prototype属性所指向的原型对象，就返回true)<br>instanceof用于判断一个变量是否某个对象的实例.<br>typeof用以获取一个变量或者表达式的类型<h5 id="性能优化处理"><a href="#性能优化处理" class="headerlink" title="性能优化处理"></a>性能优化处理</h5>1.减少http请求，合并压缩css,js文件 2.减少dom操作 3.json格式的数据交换，以为json是一种轻量级的数据格式。4.标签语义化，利于seo优化 5.css文件放在head头部和js放在body下部<h5 id="es6箭头函数this"><a href="#es6箭头函数this" class="headerlink" title="es6箭头函数this"></a>es6箭头函数this</h5>this指向是在定义函数时绑定的，不是执行时绑定的。继承的是父执行上下文里面的this<h5 id="es6的set方法"><a href="#es6的set方法" class="headerlink" title="es6的set方法"></a>es6的set方法</h5>set是一个构造函数，[…new Set(array)]数组去重，类似于数组，map类似于键值对<h5 id="对象及数组的深拷贝"><a href="#对象及数组的深拷贝" class="headerlink" title="对象及数组的深拷贝"></a>对象及数组的深拷贝</h5>数组的浅拷贝，就是利用“=“来实现的，但是浅拷贝缺点是，被拷贝的数组变化，拷贝的数组也会随之变化。所以深拷贝就成为必要的。</li></ol><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js05.jpg" alt="image"></p><p>对比下来啊，对象的深拷贝也就不困难了</p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/js06.jpg" alt="image"></p>]]></content>
<summary type="html">
<h5 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h5><p>JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。<br>JavaScript 只有声明的变量会提升，初始
</summary>
<category term="javascript" scheme="http://yoursite.com/categories/javascript/"/>
<category term="js基础知识" scheme="http://yoursite.com/tags/js%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/"/>
</entry>
<entry>
<title>面试知识点笔记-css</title>
<link href="http://yoursite.com/2018/05/15/CSS-note1/"/>
<id>http://yoursite.com/2018/05/15/CSS-note1/</id>
<published>2018-05-15T09:40:51.532Z</published>
<updated>2018-05-16T01:44:46.722Z</updated>
<content type="html"><![CDATA[<h5 id="布局方式：盒模型和flex布局"><a href="#布局方式：盒模型和flex布局" class="headerlink" title="布局方式：盒模型和flex布局"></a>布局方式：盒模型和flex布局</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css01.jpg" alt="image"></p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css02.jpg" alt="image"></p><p>flex布局主要有水平的主轴和垂直的交叉轴，交叉点为开始位置.</p><h5 id="水平居中的方法"><a href="#水平居中的方法" class="headerlink" title="水平居中的方法"></a>水平居中的方法</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css03.jpg" alt="image"></p><p>（1.3.1将元素放入table,然后margin:auto 居中，1.3.2将块状元素设置行内元素，然后text-align:center居中，1.3.3设置元素）</p><h5 id="水平垂直居中的方法"><a href="#水平垂直居中的方法" class="headerlink" title="水平垂直居中的方法"></a>水平垂直居中的方法</h5><h6 id="固定宽高的div"><a href="#固定宽高的div" class="headerlink" title="固定宽高的div"></a>固定宽高的div</h6><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css04.jpg" alt="image"></p><h6 id="不定宽高的div"><a href="#不定宽高的div" class="headerlink" title="不定宽高的div:"></a>不定宽高的div:</h6><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css05.jpg" alt="image"></p><h6 id="不定宽高设置display-table"><a href="#不定宽高设置display-table" class="headerlink" title="不定宽高设置display:table"></a>不定宽高设置display:table</h6><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css06.jpg" alt="image"></p><h5 id="animate和transform属性"><a href="#animate和transform属性" class="headerlink" title="animate和transform属性"></a>animate和transform属性</h5><p>animate主要有animation-name，animation-duration，animation-iteration-count（名称，时间，次数）keyframes设置动画变化过程</p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css07.jpg" alt="image"></p><p>transform主要有<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">translate(x,y),translateX(x),translateY(y),translateZ(z),scale(x,y),scaleX(x),scaleY(y),scaleZ(z),rotate(angle),rotateX(angle),</div><div class="line">rotateY(angle),rotateZ(angle)(x,y,z轴转换，缩放，旋转等基于2d)</div></pre></td></tr></table></figure></p><h5 id="设置宽高比为16：9"><a href="#设置宽高比为16：9" class="headerlink" title="设置宽高比为16：9"></a>设置宽高比为16：9</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css08.jpg" alt="image"></p><h5 id="css左高度随右栏高度适应"><a href="#css左高度随右栏高度适应" class="headerlink" title="css左高度随右栏高度适应"></a>css左高度随右栏高度适应</h5><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css09.jpg" alt="image"></p><h5 id="浏览器兼容性"><a href="#浏览器兼容性" class="headerlink" title="浏览器兼容性"></a>浏览器兼容性</h5><p>css样式添加前缀</p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css10.jpg" alt="image"></p><p>过渡效果不支持ie8,用js渲染<br>background-size不支持ie8, 用img<br>css hack</p><p><img src="https://raw.githubusercontent.com/Judy-zeng/Image/master/images/css11.jpg" alt="image"></p><p>ie8不支持nth-child，但支持first-child和last-child</p>]]></content>
<summary type="html">
<h5 id="布局方式：盒模型和flex布局"><a href="#布局方式：盒模型和flex布局" class="headerlink" title="布局方式：盒模型和flex布局"></a>布局方式：盒模型和flex布局</h5><p><img src="https://
</summary>
<category term="css" scheme="http://yoursite.com/categories/css/"/>
<category term="css相关知识" scheme="http://yoursite.com/tags/css%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86/"/>
</entry>
<entry>
<title>react-native pad项目</title>
<link href="http://yoursite.com/2017/11/28/RN-note2/"/>
<id>http://yoursite.com/2017/11/28/RN-note2/</id>
<published>2017-11-28T05:32:30.480Z</published>
<updated>2018-05-16T01:49:55.322Z</updated>
<content type="html"><![CDATA[<h2 id="RN中关于侧导航的tab切换设计思想"><a href="#RN中关于侧导航的tab切换设计思想" class="headerlink" title="RN中关于侧导航的tab切换设计思想"></a>RN中关于侧导航的tab切换设计思想</h2><p><strong>RN对于pad这块的应用以及组件比较少，项目中想要设计侧导航，但是并没有找到类似侧导航的组件。所以自己做了一个简单的tab切换，但是缺点就是点击的时候切换会比较慢，有待改进。</strong></p><pre><code>1. 首先配置json数组，数组中封装了导航需要的标题、icon、选中的icon以及切换的组件。2. 设置初始状态flag。切换状态时切换成相应的组件。3. 分别在组件中设置stack/tab路由则可以实现组件内部路由切换。</code></pre><h2 id="RN中关于扫码功能"><a href="#RN中关于扫码功能" class="headerlink" title="RN中关于扫码功能"></a>RN中关于扫码功能</h2><p>扫码的组件在RN的社区中还是能够找到几种的。同时适配android，ios我只找到了两个： react-native-barcode-scanner-universal和ac-qrcode。安装第一种的时候总会报各种各样的花式错误，所以果断舍弃了第一种，拥抱第二种。</p><pre><code>1. npm install ac-qrcode --save2. 此外还需要安装npm install react-native-camera3. 需要同react-native-camera link后才能使用：react-native link4. 引用组件：</code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><QRScannerView</div><div class="line"> onScanResultReceived={this.barcodeReceived.bind(this)}</div><div class="line"></div><div class="line"> renderTopBarView={() => this._renderTitleBar()}</div><div class="line"></div><div class="line"> renderBottomMenuView={() => this._renderMenu()}</div><div class="line"> cornerColor='#34b5ee'</div><div class="line"> scanBarColor='#34b5ee'</div><div class="line"> rectWidth={300}</div><div class="line"> rectHeight={300}</div><div class="line"> /></div></pre></td></tr></table></figure><p>这个组件的好处是可以自定义扫码的样式以及展现形式</p><h2 id="RN中禁止屏幕横屏-竖屏显示"><a href="#RN中禁止屏幕横屏-竖屏显示" class="headerlink" title="RN中禁止屏幕横屏/竖屏显示"></a>RN中禁止屏幕横屏/竖屏显示</h2><h3 id="android版本"><a href="#android版本" class="headerlink" title="android版本"></a>android版本</h3><p>pad的app应用规定只能横屏显示，只需要修改配置文件即可。landscape-横屏，portrait-竖屏。<br>在AndroidManifest.xml文件中</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><activity </div><div class="line"> android:name=".DemoActivityt" </div><div class="line"> android:theme="@android:style/Theme.NoTitleBar" </div><div class="line"> android:screenOrientation="portrait" </div><div class="line"> ></activity></div></pre></td></tr></table></figure><p>另外，android中每次屏幕方向切换时都会重启Activity，所以应该在Activity销毁前保存当前活动的状态，在Activity再次Create的时候载入配置。要避免在转屏时重启activity，可以通过在androidmanifest.xml文件中重新定义方向(给每个activity加上android:configChanges=”keyboardHidden|orientation”属性)，并根据Activity的重写onConfigurationChanged(Configuration newConfig)方法来控制，这样在转屏时就不会重启activity了，而是会去调用onConfigurationChanged(Configuration newConfig)这个方法。<br><em>原创：<a href="http://www.open-open.com/lib/view/open1328278861750.html" target="_blank" rel="external">http://www.open-open.com/lib/view/open1328278861750.html</a></em></p><h3 id="iOS-版本"><a href="#iOS-版本" class="headerlink" title="iOS 版本"></a>iOS 版本</h3><ol><li>在Xcode 中的General>Deployment中修改orientation中相应的项。</li><li>在info.plist>support interface orientation 中不相关的项删除</li></ol><h2 id="RN中设置桌面图标及名称"><a href="#RN中设置桌面图标及名称" class="headerlink" title="RN中设置桌面图标及名称"></a>RN中设置桌面图标及名称</h2><p>1.名称修改打开android/app/src/main/res/values/strings.xml：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><resources></div><div class="line"> <string name="app_name">app名称</string></div><div class="line"></resources></div></pre></td></tr></table></figure><p>2.图标修改android\app\src\main\res\mipmap-xxxxxx中直接覆盖图标就可以. <br></p><h2 id="RN中设置启动页避免启动白屏问题"><a href="#RN中设置启动页避免启动白屏问题" class="headerlink" title="RN中设置启动页避免启动白屏问题"></a>RN中设置启动页避免启动白屏问题</h2><p>在网络上找到几个关于启动页白屏的插件，其中react-native-splash-screen深得朕心。不过使用的时候要注意对RN的版本限制，React Native >= 0.47.0 use v3.+, for React Native < 0.47.0 use v2.0.0+。因为是pad端所以启动页图片尺寸设置的是屏幕的分辨率</p><ol><li>安装：npm install react-native-splash-screen –save</li><li>react-native link react-native-splash-screen</li><li><p>在MainApplication.java中添加</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">import com.cboy.rn.splashscreen.SplashScreenReactPackage;</div><div class="line">public class MainApplication extends Application implements ReactApplication {</div><div class="line"></div><div class="line"> private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {</div><div class="line"> @Override</div><div class="line"> protected List<ReactPackage> getPackages() {</div><div class="line"> return Arrays.<ReactPackage>asList(</div><div class="line"> new MainReactPackage(),</div><div class="line"> new SplashScreenReactPackage() //here</div><div class="line"> );</div><div class="line"> }</div><div class="line"> };</div><div class="line">}</div></pre></td></tr></table></figure></li><li><p>在MainActivity.java中添加</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">import android.os.Bundle;</div><div class="line">import com.facebook.react.ReactActivity;</div><div class="line">import com.cboy.rn.splashscreen.SplashScreen; // here</div><div class="line"></div><div class="line">public class MainActivity extends ReactActivity {</div><div class="line"> @Override</div><div class="line"> protected void onCreate(Bundle savedInstanceState) {</div><div class="line"> SplashScreen.show(this); // here</div><div class="line"> super.onCreate(savedInstanceState);</div><div class="line"> }</div><div class="line"> // ...other code</div><div class="line">}</div></pre></td></tr></table></figure></li><li><p>在js入口文件中导入react-native-splash-screen</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">import SplashScreen from 'react-native-splash-screen'</div></pre></td></tr></table></figure></li><li><p>在app/src/main/res/layout中创建launch_screen.xml文件</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><?xml version="1.0" encoding="utf-8"?></div><div class="line"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"</div><div class="line"> android:orientation="vertical" android:layout_width="match_parent"</div><div class="line"> android:layout_height="match_parent"</div><div class="line"> android:background="@drawable/launch_screen"></div><div class="line"></LinearLayout></div></pre></td></tr></table></figure></li><li><p>在app/src/main/res/下创建下列文件夹，并且添加名为launch_screen.png文件：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">drawable-xhdpi</div><div class="line">drawable-xxhdpi</div></pre></td></tr></table></figure></li><li><p>在js入口文件中使用：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">import SplashScreen from 'react-native-splash-screen'</div><div class="line"></div><div class="line">export default class WelcomePage extends Component {</div><div class="line"></div><div class="line"> componentDidMount() {</div><div class="line"> // do stuff while splash screen is shown</div><div class="line"> // After having done stuff (such as async tasks) hide the splash screen</div><div class="line"> SplashScreen.hide();</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure></li></ol><h2 id="RN中关于文件管理的展示（类似面包屑功能）"><a href="#RN中关于文件管理的展示（类似面包屑功能）" class="headerlink" title="RN中关于文件管理的展示（类似面包屑功能）"></a>RN中关于文件管理的展示（类似面包屑功能）</h2><p>主要思想是使用react-native状态控制该显示哪一条数据，刚开始想用react-native导航路由跳转实现，问题是数据不固定，导航不适用。以下为主要代码：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div></pre></td><td class="code"><pre><div class="line">/**</div><div class="line"> * Created by admin on 2017/9/19.</div><div class="line"> */</div><div class="line"></div><div class="line">import React,{Component} from 'react'</div><div class="line">import {StyleSheet,Dimensions, ScrollView, Text,View,Image, TouchableHighlight, TouchableOpacity,ImageBackground} from 'react-native'</div><div class="line">const window = Dimensions.get('window');</div><div class="line">const file =</div><div class="line"> [{</div><div class="line"> id:0,</div><div class="line"> title:'体系文件',</div><div class="line"> children:[</div><div class="line"> {id:1,title:'文件夹1',children:[</div><div class="line"> {id:3,title:'文件夹1-1',children:[</div><div class="line"> {id:5,title:'文件夹1-1-1',children:[]}</div><div class="line"> ]},</div><div class="line"> {id:4,title:'文件夹1-2',children:[]},</div><div class="line"> ]},</div><div class="line"> {id:2,title:'文件夹2',children:[]},</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> {</div><div class="line"> id:6,title:'公司文档',children:[]</div><div class="line"> }];</div><div class="line"></div><div class="line"> export default class Crumbs extends Component {</div><div class="line"> constructor(props) {</div><div class="line"> super(props);</div><div class="line"> this.state = {</div><div class="line"> itemList: file,</div><div class="line"> showChild:false,</div><div class="line"> backChild:false,</div><div class="line"> crumbs:[]</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> render(){</div><div class="line"> var arr = [];</div><div class="line"></div><div class="line"> var showItem = function (data,index) {</div><div class="line"> arr.push(<TouchableOpacity key={data.id} onPress={this.showChild.bind(this,data)}></div><div class="line"> <View style={styles.menuText}></div><div class="line"> <Image source={require('../img/files.png')}/></div><div class="line"> <Text style={{marginLeft:15,fontSize:16}}>{data.title}</Text></div><div class="line"> </View></div><div class="line"> </TouchableOpacity>)</div><div class="line"> }.bind(this);</div><div class="line"></div><div class="line"> var item = this.state.crumbs.map((item,index)=>{</div><div class="line"> return <TouchableOpacity key={index} onPress={this.backChild.bind(this,item)}></div><div class="line"> <View style={{flexDirection:'row'}}></div><div class="line"> <Text style={{textAlignVertical:'center',fontSize:16,paddingLeft:10}}>{item.title.title}</Text></div><div class="line"> <Image source={require('../img/crumb-right.png')}/></div><div class="line"> </View></div><div class="line"> </TouchableOpacity></div><div class="line"> },this);</div><div class="line"></div><div class="line"> this.state.itemList.map((data)=>{</div><div class="line"> showItem(data,0)</div><div class="line"> });</div><div class="line"></div><div class="line"> return(</div><div class="line"> <View style={styles.fileStyle}></div><div class="line"> <View style={styles.fileUrl}></div><div class="line"> <TouchableOpacity onPress={this.showHome.bind(this)}></div><div class="line"> <View style={{flexDirection:'row'}}></div><div class="line"> <Text style={{textAlignVertical:'center',fontSize:16,paddingLeft:10}}>主页</Text></div><div class="line"> <Image source={require('../img/crumb-right.png')}/></div><div class="line"> </View></div><div class="line"> </TouchableOpacity></div><div class="line"> {item}</div><div class="line"> </View></div><div class="line"> <ScrollView></div><div class="line"> <View style={styles.fileContent}></div><div class="line"> {this.state.showChild ? this.renderChild(): (this.state.backChild ? this.renderBackChild(): arr)}</div><div class="line"> </View></div><div class="line"> </ScrollView></div><div class="line"> </View></div><div class="line"> )</div><div class="line"> }</div><div class="line"></div><div class="line"> showChild(data){</div><div class="line"> this.state.crumbs.push({id:data.id,title:data});</div><div class="line"> this.setState({showChild:true,childContent:data});</div><div class="line"> }</div><div class="line"></div><div class="line"> showHome(){</div><div class="line"></div><div class="line"> this.setState({showChild:false,backChild:false});</div><div class="line"></div><div class="line"> for(let i=0;i<this.state.crumbs.length;i++){</div><div class="line"> this.state.crumbs.splice(0,this.state.crumbs.length);</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> backChild(data){</div><div class="line"></div><div class="line"> this.setState({backChild:true,backChildContent:data,childContent:data,showChild:false});</div><div class="line"></div><div class="line"> for(let i=0;i<this.state.crumbs.length;i++){</div><div class="line"> if(this.state.crumbs[i].id == data.id){</div><div class="line"> this.state.crumbs.splice(i+1,this.state.crumbs.length);</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> }</div><div class="line"> renderChild(){</div><div class="line"> var arr = [];</div><div class="line"> var child = this.state.childContent;</div><div class="line"> this.mapChild(child,arr);</div><div class="line"> return arr</div><div class="line"> }</div><div class="line"></div><div class="line"> mapChild=(data,arr1)=>{</div><div class="line"> var child = data.children || data;</div><div class="line"> if(child.length){</div><div class="line"> child.map(function (m,i) {</div><div class="line"> arr1.push(<TouchableOpacity key={m.id} style={styles.menuText} onPress={this.showChild.bind(this,m)}></div><div class="line"> <Image source={require('../img/files.png')}/></div><div class="line"> <Text style={{marginLeft:15,fontSize:16}}>{m.title}</Text></div><div class="line"> </TouchableOpacity>)</div><div class="line"> }.bind(this))</div><div class="line"> }else{</div><div class="line"> arr1.push(<View style={styles.noTextContent} key={'id'}></div><div class="line"> <Text style={styles.noTextStyle}>没有内容</Text></div><div class="line"> </View>)</div><div class="line"> }</div><div class="line"> };</div><div class="line"></div><div class="line"> renderBackChild(){</div><div class="line"> var arr = [];</div><div class="line"> var child = this.state.backChildContent;</div><div class="line"> this.mapBackChild(child,arr);</div><div class="line"> return arr</div><div class="line"> }</div><div class="line"></div><div class="line"> mapBackChild(data,arr2){</div><div class="line"> var child = data.title.children || data.title;</div><div class="line"> if(child.length){</div><div class="line"> child.map(function (m,i) {</div><div class="line"> arr2.push(<TouchableOpacity key={m.id} style={styles.menuText} onPress={this.showChild.bind(this,m)}></div><div class="line"> <Image source={require('../img/files.png')}/></div><div class="line"> <Text style={{marginLeft:15,fontSize:16}}>{m.title}</Text></div><div class="line"> </TouchableOpacity>)</div><div class="line"> }.bind(this))</div><div class="line"> }else{</div><div class="line"> arr2.push(<View style={styles.noTextContent} key={'id'}></div><div class="line"> <Text style={styles.noTextStyle}>没有内容</Text></div><div class="line"> </View>)</div><div class="line"> }</div><div class="line"> }</div><div class="line"> }</div><div class="line"></div><div class="line"> const styles = StyleSheet.create({</div><div class="line"> fileContent:{</div><div class="line"> borderColor:'#d5d5d5',</div><div class="line"> borderWidth:0.5,</div><div class="line"> backgroundColor:'#fff',</div><div class="line"> marginTop:-1,</div><div class="line"> },</div><div class="line"> fileStyle:{</div><div class="line"> margin:10,</div><div class="line"> marginBottom:0,</div><div class="line"> backgroundColor:'#fff',</div><div class="line"> height:window.height</div><div class="line"> },</div><div class="line"> menuText:{</div><div class="line"> height:60,</div><div class="line"> borderBottomColor:'#d5d5d5',</div><div class="line"> borderBottomWidth:0.5,</div><div class="line"> paddingLeft:15,</div><div class="line"> flexDirection:'row',</div><div class="line"> alignItems:'center'</div><div class="line"> },</div><div class="line"> fileUrl:{</div><div class="line"> height:50,</div><div class="line"> paddingLeft:10,</div><div class="line"> backgroundColor:'#f5f5f5',</div><div class="line"> flexDirection:'row',</div><div class="line"> alignItems:'center',</div><div class="line"> borderColor:'#d5d5d5',</div><div class="line"> borderWidth:0.5,</div><div class="line"> },</div><div class="line"> noTextContent:{</div><div class="line"> height:window.height-50,</div><div class="line"> },</div><div class="line"> noTextStyle:{</div><div class="line"> fontSize:16,</div><div class="line"> textAlignVertical:'center',</div><div class="line"> textAlign:'center',</div><div class="line"> color:'#999',</div><div class="line"> marginTop:250</div><div class="line"> }</div><div class="line"></div><div class="line"> });</div></pre></td></tr></table></figure></p><p>觉得代码量比较多，还有更简单的方法，待改进。</p><h2 id="RN中native-echarts组件打包时遇到的问题"><a href="#RN中native-echarts组件打包时遇到的问题" class="headerlink" title="RN中native-echarts组件打包时遇到的问题"></a>RN中native-echarts组件打包时遇到的问题</h2><p>使用：</p><ol><li>npm install native-echarts –save</li><li><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">import Echarts from 'native-echarts'</div><div class="line"><Echarts option={alarmBarOption}/></div></pre></td></tr></table></figure></li></ol><p>打包生成apk-release时无法显示统计图表：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">android release版本通过“把tpl.html文件放在android/app/src/main/assets文件里</div><div class="line">修改的是 \node_modules\native-echarts\src\components\Echarts\index.js中的代码，具体如下：</div><div class="line">源代码为：source={require('./tpl.html')}</div><div class="line">修改为：source={{uri:'file:///android_asset/tpl.html'}}</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h2 id="RN中关于侧导航的tab切换设计思想"><a href="#RN中关于侧导航的tab切换设计思想" class="headerlink" title="RN中关于侧导航的tab切换设计思想"></a>RN中关于侧导航的tab切换设计思想</h2><p><stron
</summary>
<category term="react-native" scheme="http://yoursite.com/categories/react-native/"/>
<category term="pad" scheme="http://yoursite.com/tags/pad/"/>
</entry>
<entry>
<title>RN打包生成apk步骤、遇到的问题及解决办法</title>
<link href="http://yoursite.com/2017/11/28/RN-note1/"/>
<id>http://yoursite.com/2017/11/28/RN-note1/</id>
<published>2017-11-28T02:25:29.201Z</published>
<updated>2018-05-16T01:56:06.025Z</updated>
<content type="html"><![CDATA[<h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><h3 id="命令行下生成签名密钥"><a href="#命令行下生成签名密钥" class="headerlink" title="命令行下生成签名密钥"></a>命令行下生成签名密钥</h3><p>在C:\Program Files\Java\jdkx.x.x_x\bin目录下找到keytool.exe文件，前提是一定要<strong>以管理员的身份运行</strong>此命令：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000</div></pre></td></tr></table></figure><p>其中alias后边的别名可以自定义。此命令会生成一个==my-release-key.keystore==的密钥文件<br><strong><em>注意妥善保管密钥库文件</em></strong></p><h3 id="设置gradle变量"><a href="#设置gradle变量" class="headerlink" title="设置gradle变量"></a>设置gradle变量</h3><p>把my-release-key.keystore文件放到你工程中的android/app文件夹下。编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的<strong><em>*替换为相应密码）</em></strong>此处有坑<em>*</em><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">MYAPP_RELEASE_STORE_FILE=my-release-key.keystore</div><div class="line">MYAPP_RELEASE_KEY_ALIAS=my-key-alias</div><div class="line">MYAPP_RELEASE_STORE_PASSWORD=*****</div><div class="line">MYAPP_RELEASE_KEY_PASSWORD=*****</div></pre></td></tr></table></figure></p><h3 id="添加签名到项目的gradle配置文件"><a href="#添加签名到项目的gradle配置文件" class="headerlink" title="添加签名到项目的gradle配置文件"></a>添加签名到项目的gradle配置文件</h3><p>编辑你项目目录下的android/app/build.gradle：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">...</div><div class="line">android {</div><div class="line"> ...</div><div class="line"> defaultConfig { ... }</div><div class="line"> signingConfigs {</div><div class="line"> release {</div><div class="line"> storeFile file(MYAPP_RELEASE_STORE_FILE)</div><div class="line"> storePassword MYAPP_RELEASE_STORE_PASSWORD</div><div class="line"> keyAlias MYAPP_RELEASE_KEY_ALIAS</div><div class="line"> keyPassword MYAPP_RELEASE_KEY_PASSWORD</div><div class="line"> }</div><div class="line"> }</div><div class="line"> buildTypes {</div><div class="line"> release {</div><div class="line"> ...</div><div class="line"> signingConfig signingConfigs.release</div><div class="line"> }</div><div class="line"> }</div><div class="line">}</div><div class="line">...</div></pre></td></tr></table></figure><h3 id="生成发行apk包"><a href="#生成发行apk包" class="headerlink" title="生成发行apk包"></a>生成发行apk包</h3><p>注意：powershell下./gradlew，cmd命令行下直接gradlew</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">cd android && ./gradlew assembleRelease</div></pre></td></tr></table></figure><h3 id="测试应用的发行版本"><a href="#测试应用的发行版本" class="headerlink" title="测试应用的发行版本"></a>测试应用的发行版本</h3><p>将打包好的apk安装到模拟器或连接的设备上</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">cd android && ./gradlew installRelease</div></pre></td></tr></table></figure><h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><h3 id="问题1"><a href="#问题1" class="headerlink" title="问题1"></a>问题1</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">Execution failed for task ':app:bundleReleaseJsAndAssets'. </div><div class="line">> Process 'command 'cmd'' finished with non-zero exit value 1</div></pre></td></tr></table></figure><p>解决办法：<br>查到的解决办法是修改node_module下的\node_modules\react-native\packager\react-packager\src\SocketInterface目录，但是我的本地并没有这个包，索性全部关掉重新运行之后神奇的好用了</p><h3 id="问题2"><a href="#问题2" class="headerlink" title="问题2"></a>问题2</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">* Where:</div><div class="line">Build file 'F:\ReactAppProject\RNSimpleApp\android\app\build.gradle' line: 109</div><div class="line"> </div><div class="line">* What went wrong:</div><div class="line">A problem occurred evaluating project ':app'.</div><div class="line">> Could not get unknown property 'MYAPP_RELEASE_STORE_FILE' for SigningConfig_Decorated{name=release, storeFile=null, storePassword=null, keyAlias=null, keyPassword=null, storeType=null, v1SigningEnabled=true, v2SigningEnabled=true} of type com.android.build.gradle.internal.dsl.SigningConfig.</div></pre></td></tr></table></figure><p>解决办法：gradle.properties文件应该使用RNProject/android/下面的gradle.properties<br>也就是说在gradle.properties里面添加</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">MYAPP_RELEASE_STORE_FILE=my-release-key.keystore</div><div class="line">MYAPP_RELEASE_KEY_ALIAS=my-key-alias</div><div class="line">MYAPP_RELEASE_STORE_PASSWORD=*****</div><div class="line">MYAPP_RELEASE_KEY_PASSWORD=*****</div></pre></td></tr></table></figure><h3 id="问题3"><a href="#问题3" class="headerlink" title="问题3"></a>问题3</h3><p>打包后图片等资源文件没有显示<br>解决办法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/</div></pre></td></tr></table></figure></p>]]></content>
<summary type="html">
<h2 id="步骤"><a href="#步骤" class="headerlink" title="步骤"></a>步骤</h2><h3 id="命令行下生成签名密钥"><a href="#命令行下生成签名密钥" class="headerlink" title="命令行下生
</summary>
<category term="react-native" scheme="http://yoursite.com/categories/react-native/"/>
<category term="pad" scheme="http://yoursite.com/tags/pad/"/>
</entry>
<entry>
<title>vue.js基础学习笔记</title>
<link href="http://yoursite.com/2017/07/21/vue-note3/"/>
<id>http://yoursite.com/2017/07/21/vue-note3/</id>
<published>2017-07-21T02:50:48.482Z</published>
<updated>2018-05-16T02:02:56.598Z</updated>
<content type="html"><![CDATA[<h1 id="vue基础学习笔记"><a href="#vue基础学习笔记" class="headerlink" title="vue基础学习笔记"></a>vue基础学习笔记</h1><p><strong>指令</strong>（当表达式的值改变后相应的dom元素也会改变）：</p><pre><code>- v-if （v-if/v-else/v-else-if）- v-show 简单的切换css的display属性，始终在dom元素上- v-for （可以遍历json及数组）- v-on <=> @ :绑定事件（click/change）- v-modal 双向绑定- v-html 渲染html页面- v-bind <=> : &nbsp; 也可以绑定html标签的属性（id/disabled）</code></pre><p><strong>props传值</strong><br>父子组件间的传值，在父组件中定义props,在子组件中v-bind绑定props名字即可：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">Vue.component('todo-item', {</div><div class="line"> // todo-item 组件现在接受一个 "prop"，</div><div class="line"> // 类似于一个自定义属性。</div><div class="line"> // 此 prop 名为 todo。</div><div class="line"> props: ['todo'],</div><div class="line"> template: '<li>{{ todo.text }}</li>'</div><div class="line">})</div></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><todo-item</div><div class="line"> v-for="item in groceryList"</div><div class="line"> v-bind:todo="item"</div><div class="line"> v-bind:key="item.id"></div><div class="line"></todo-item></div></pre></td></tr></table></figure><p><strong>计算属性</strong><br>计算的属性依赖于绑定的data的更新：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">var vm = new Vue({</div><div class="line"> el: '#example',</div><div class="line"> data: {</div><div class="line"> message: 'Hello'</div><div class="line"> },</div><div class="line"> computed: {</div><div class="line"> // a computed getter</div><div class="line"> reversedMessage: function () {</div><div class="line"> // `this` points to the vm instance</div><div class="line"> return this.message.split('').reverse().join('')</div><div class="line"> }</div><div class="line"> }</div><div class="line">})</div></pre></td></tr></table></figure><p>这段代码的计算属性reverseMessage依赖于message的变化。这种计算属性等同于调用methods里的reverseMessage()函数，但是==计算属性依赖于缓存==，不必反复执行函数。（如果希望有缓存，用methods代替）</p><p>v-bind:class 可以动态绑定class属性样式。class后可以跟数组及json格式。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><div v-bind:class="{ active: isActive }"></div></div><div class="line"><div v-bind:class="[activeClass, errorClass]"></div></div></pre></td></tr></table></figure><p><strong>事件修饰符</strong>（可以直接跟在事件后,可以串联）:</p><pre><code>- .prevent ---提交事件不再重载页面- .stop ---阻止单击事件冒泡- .once ---点击事件将只会触发一次</code></pre><h1 id="vue学习笔记-vuex-axios"><a href="#vue学习笔记-vuex-axios" class="headerlink" title="vue学习笔记-vuex+axios"></a>vue学习笔记-vuex+axios</h1><p> 首先安装环境<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install --save vuex vue-axios axios</div></pre></td></tr></table></figure></p><p><strong>vuex-state：</strong></p><pre><code>- mapState:当一个组件需要获取多个状态时候,使用 mapState 辅助函数帮助我们生成计算属性- ...mapState:对象展开运算符，将此对象展开，以便可以将对象整个全部传给computed</code></pre><p><strong>vuex-getter:</strong><br>有时需要在store中的state中派生出来一些其他的状态（多个组件需要用到的属性），比如筛选出列表中已完成的</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">const store = new Vuex.Store({</div><div class="line"> state: {</div><div class="line"> todos: [</div><div class="line"> { id: 1, text: '...', done: true },</div><div class="line"> { id: 2, text: '...', done: false }</div><div class="line"> ]</div><div class="line"> },</div><div class="line"> getters: {</div><div class="line"> doneTodos: state => {</div><div class="line"> return state.todos.filter(todo => todo.done)</div><div class="line"> }</div><div class="line"> }</div><div class="line">})</div></pre></td></tr></table></figure><p>Getters 会暴露为 store.getters 对象<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">store.getters.doneTodos</div></pre></td></tr></table></figure></p><ul><li>mapGetters：将store中的getter映射到局部计算属性</li><li>…mapGetters:展开运算符</li></ul><p><strong>Mutations：</strong><br>更改store中的状态，它会接受 state 作为第一个参数<br>（必须是同步函数）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">const store = new Vuex.Store({</div><div class="line"> state: {</div><div class="line"> count: 1</div><div class="line"> },</div><div class="line"> mutations: {</div><div class="line"> increment (state) {</div><div class="line"> // 变更状态</div><div class="line"> state.count++</div><div class="line"> }</div><div class="line"> }</div><div class="line">})</div></pre></td></tr></table></figure></p><p>调用方法：store.commit(‘increment’)，store.commit 传入额外的参数，即载荷payload:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">store.commit('increment', {</div><div class="line"> amount: 10</div><div class="line">})</div></pre></td></tr></table></figure><p>或者对象风格的提交方式：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">store.commit({</div><div class="line"> type: 'increment',</div><div class="line"> amount: 10</div><div class="line">})</div></pre></td></tr></table></figure><p>mutation.js文件：使用常量替代 Mutation 事件类型（多人协作的大型项目中）</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">// mutation-types.js</div><div class="line">1.export const SOME_MUTATION = 'SOME_MUTATION'</div><div class="line"></div><div class="line">2.import { SOME_MUTATION } from './mutation-types'</div><div class="line"></div><div class="line">3.mutations: {</div><div class="line"> [SOME_MUTATION] (state) {</div><div class="line"> // mutate state</div><div class="line"> }</div><div class="line"> }</div></pre></td></tr></table></figure><p><strong>action:</strong>提交的是 mutation，而不是直接变更状态;<br>Action 可以包含任意异步操作，功能与mutation类似。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">actions: {</div><div class="line"> increment (context) {</div><div class="line"> context.commit('increment')</div><div class="line"> }</div><div class="line"> }</div></pre></td></tr></table></figure><p>等价于</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">actions: {</div><div class="line"> increment ({ commit }) {</div><div class="line"> commit('increment')</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure><p>通过dispatch分发：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">store.dispatch('increment')</div></pre></td></tr></table></figure><p>…mapActions:辅助函数。<br><strong>Modules</strong>：允许把store模块化</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">const moduleA = {</div><div class="line"> state: { ... },</div><div class="line"> mutations: { ... },</div><div class="line"> actions: { ... },</div><div class="line"> getters: { ... }</div><div class="line">}</div><div class="line"></div><div class="line"></div><div class="line">const store = new Vuex.Store({</div><div class="line"> modules: {</div><div class="line"> a: moduleA,</div><div class="line"> b: moduleB</div><div class="line"> }</div><div class="line">})</div><div class="line"></div><div class="line">store.state.a // -> moduleA 的状态</div></pre></td></tr></table></figure>]]></content>
<summary type="html">
<h1 id="vue基础学习笔记"><a href="#vue基础学习笔记" class="headerlink" title="vue基础学习笔记"></a>vue基础学习笔记</h1><p><strong>指令</strong>（当表达式的值改变后相应的dom元素也会改变）
</summary>
<category term="iframe" scheme="http://yoursite.com/categories/iframe/"/>
<category term="vue" scheme="http://yoursite.com/categories/iframe/vue/"/>
<category term="vue" scheme="http://yoursite.com/tags/vue/"/>
</entry>
<entry>
<title>vue.js简单框架搭建</title>
<link href="http://yoursite.com/2017/07/11/vue-note2/"/>
<id>http://yoursite.com/2017/07/11/vue-note2/</id>
<published>2017-07-11T01:06:00.937Z</published>
<updated>2017-07-11T01:28:46.346Z</updated>
<content type="html"><![CDATA[<p></p><p><br>刚刚开始学习vue，已经看了基础的文档。现在想要学着搭一个基础的vue开发环境。此处用到的工具集包括：vue + vuex + vue-router + element-ui + axios。（此笔记是在node.js已经正确安装的条件下）<br></p><p></p><pre>1. cmd命令行下运行： <code>vue init webpack 项目名</code>2. 进入到项目目录下安装依赖项：<code>npm install</code>3. 然后开始安装element-ui框架：<code>npm i element-ui -S</code>4. 在项目的src/main.js中引入下面语句即可：<br><code>import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'Vue.use(ElementUI)</code>5. 最后启动,elementui引入好了：<code>npm run dev</code></pre>]]></content>
<summary type="html">
<p></p><p><br>刚刚开始学习vue，已经看了基础的文档。现在想要学着搭一个基础的vue开发环境。此处用到的工具集包括：vue + vuex + vue-router + element-ui + axios。（此笔记是在node.js已经正确安装的条件下）<br></
</summary>
<category term="iframe" scheme="http://yoursite.com/categories/iframe/"/>
<category term="vue" scheme="http://yoursite.com/categories/iframe/vue/"/>
<category term="vue" scheme="http://yoursite.com/tags/vue/"/>
</entry>
</feed>