Skip to content

Commit 05fc14b

Browse files
dk-landk-lan
committed
modify by dk
1 parent 9ae15e1 commit 05fc14b

File tree

6 files changed

+272
-280
lines changed

6 files changed

+272
-280
lines changed

‎README.md‎

Lines changed: 8 additions & 277 deletions
Original file line numberDiff line numberDiff line change
@@ -29,29 +29,13 @@
2929
- 系统支持多语言切换
3030
- 系统权限
3131

32-
[登陆页效果](https://dk-lan.github.io/vue-erp/dist/index.html#/login)
33-
34-
# 项目文件结构
35-
- dist [构建目录]
36-
- demo [知识点讲解案例]
37-
- src [ERP 源代码]
38-
- assets [静态资源文件]
39-
- components [Vue 组件]
40-
- router [路由配置]
41-
- utils [ajax]
42-
- vuex [store]
43-
4432
# 技术点目录
45-
- 认识 Vue
46-
- 模版语法
47-
- 计算属性
48-
- 样式绑定
49-
- 指令
50-
- 组件
51-
- 生命周期
52-
- 路由
33+
- [认识 Vue](#vue)
34+
- [认识数据驱动模式](#dd)
35+
- [认识 MVVM 模式](#mvvm)
36+
- [模版语法](https://github.com/dk-lan/vue-erp/VueBasic/模版语法)
5337

54-
# 认识 Vue
38+
# 认识 Vue{vue}
5539
关于 Vue 的描述有不少，不外乎都会拿来与 Angular 和 React 对比，同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多，但到目前为止，Angular 在热度上已明显不及 Vue，性能已成为最大的诟病。
5640

5741
在我看来，Vue 和 Angular 的对比有种早些年 Java 和 ASP.NET 的对比，对于开发者而言，ASP.NET 官方本身已实现好了大量的框架和功能，使用起来非常的方便快捷，同时也提供了无限的可扩展性，对比起 Java 而言，后者在本身框架和功能上都不及 ASP.NET，但同样都拥有无限的可扩展性，相比之下，本来 ASP.NET 很有一统天下的可能，但现实终归现实，ASP.NET 本身的框架和功能实现并没有换来多少称赞，反在性能和安全性方面被诟病。回看 Vue 和 Angular 的阵营，我也总有这么一种感觉。
@@ -67,7 +51,7 @@
6751
})
6852
```
6953

70-
# 认识数据驱动模式
54+
# 认识数据驱动模式{#dd}
7155
开始接触前端编程的基本上都是先学习 DOM 节点操作，jQuery 在这一领域上一度成为了标准，所以在前端编程的领域中，jQuery 几乎是每个开发者的标配。随着前后端分离的成熟，产品或项目都趋于分布式部署，开发者已不满足于操作 DOM 节点， 设计模式便慢慢的被前端化。
7256

7357
数据驱动的设计模式在思维逻辑上与 DOM 节点操作完全不一样。
@@ -92,7 +76,7 @@
9276

9377
```
9478

95-
# 认识 MVVM 模式
79+
# 认识 MVVM 模式{#mvvm}
9680
M：Model，称之为数据模型，在前端以对象的形式表现。
9781
``` javascript
9882
var data = {message: '我就是一个数据模型'}
@@ -105,257 +89,4 @@ V：View，视图，也就是 HTML
10589
```
10690
VM：ViewModel，就是连接数据和视图的桥梁，当 Model 发生改变的时候，ViewModel 便将数据映射到视图。
10791

108-
那么数据驱动模式和 MVVM 模式有什么关系，换句话说，MVVM 是数据驱动模式的一种实现，Vue 是 MVVM 的一种实现。
109-
110-
111-
# 模版语法
112-
模版语法已成为前端在数据驱动模式上 V 层最好的实现。
113-
114-
## 插值
115-
``` html
116-
<div id="app">
117-
<!-- 文本 当对 data.message 发生改变时，对应插值的内容也会自动改变-->
118-
<fieldset>
119-
<legend>文本</legend>
120-
<div>{{message}}</div>
121-
</fieldset>
122-
123-
<!-- 纯 HTML {{}} 这种形式最终会被解释成文本，如果要想输入 HTML 结构，使用要用到 v-html="对象"-->
124-
<fieldset>
125-
<legend>纯 HTML</legend>
126-
<div v-html="rawHtml"></div>
127-
</fieldset>
128-
129-
<!-- 属性 元素的任意属性（包含自定义属性）都可以和对象绑定 :属性名(或者 v-bind:属性名)=“对象”-->
130-
<fieldset>
131-
<legend>属性</legend>
132-
<img :src="src" alt="" />
133-
<img v-bind:src="'../imgs/red.jpg'" alt="" />
134-
</fieldset>
135-
136-
<!-- js 表达式 {{}} 可以用来解释 js 的表达式-->
137-
<fieldset>
138-
<legend>js 表达式</legend>
139-
<div>{{1 + 1}}</div>
140-
<div>{{status ? 'YES' : 'NO'}}</div>
141-
<div>{{message.split('').reverse().join('')}}</div>
142-
</fieldset>
143-
</div>
144-
```
145-
146-
``` javascript
147-
var vm = new Vue({
148-
el: '#app',
149-
data: {
150-
message: '我是文本',
151-
rawHtml: '<h1>我是 h1 标签</h1>',
152-
src: '../imgs/green.jpg',
153-
status: true,
154-
}
155-
})
156-
```
157-
[插值效果](https://dk-lan.github.io/vue-erp/dist/demo/%E6%A8%A1%E7%89%88%E8%AF%AD%E6%B3%95/%E6%8F%92%E5%80%BC-%E6%96%87%E6%9C%AC.html)
158-
159-
## 缩写
160-
### v-bind 缩写
161-
``` html
162-
<!--完整写法-->
163-
<img v-bind:src="'../imgs/red.jpg'" alt="" />
164-
<!--缩写-->
165-
<img :src="src" alt="" />
166-
```
167-
### v-on 缩写
168-
``` html
169-
<!--完整语法-->
170-
<button v-on:click="greet">Greet</button>
171-
<!--缩写语法-->
172-
<button @click="greet">Greet</button>
173-
```
174-
175-
## 指令
176-
指令（Directive），换句话说就是元素的自定义属性，在 Vue 中是以 v- 为前缀的自定义属性，属性值为对象或 js 表达式
177-
178-
<table>
179-
<thead>
180-
<tr>
181-
<th>指令</th><th>类型</th><th>用法</th>
182-
</tr>
183-
</thead>
184-
<tbody>
185-
<tr><td>v-text</td><td>string</td><td><!--v-text-->
186-
187-
``` html
188-
<span v-text="msg"></span>
189-
<!--效果等同于-->
190-
<!--v-text 的权重高于 {{}}-->
191-
<span>{{msg}}</span>
192-
```
193-
194-
</td></tr>
195-
<tr><td>v-html</td><td>string</td><td><!--v-html-->
196-
197-
``` html
198-
<div v-html="html"></div>
199-
```
200-
201-
</td></tr>
202-
<tr><td>v-show</td><td>boolean</td><td><!--v-show-->
203-
204-
``` html
205-
<!--show 的值会直接影响 div 在文档中是否显示-->
206-
<div v-show="show"></div>
207-
```
208-
209-
</td></tr>
210-
<tr><td>v-if</td><td>boolean</td><td><!--v-if-->
211-
212-
``` html
213-
<!--status 的值会直接影响 div 在文档中是否存在-->
214-
<div v-if="status"></div>
215-
```
216-
217-
</td></tr>
218-
<tr><td>v-else-if</td><td>boolean</td><td><!--v-else-if-->
219-
220-
``` html
221-
<div v-if="flag == 1">1</div>
222-
<!--必须跟 v-if 或者 v-else-if 元素后面-->
223-
<div v-else-if="flag == 2">2</div>
224-
```
225-
226-
</td></tr>
227-
<tr><td>v-else</td><td>不需要表达式</td><td><!--v-else-->
228-
229-
``` html
230-
<div v-if="flag == 1">1</div>
231-
<div v-else-if="flag == 2">2</div>
232-
<!--必须跟 v-if 或者 v-else-if 元素后面-->
233-
<div v-else>2</div>
234-
```
235-
236-
</td></tr>
237-
<tr><td>v-for</td><td>Array | Object | Number | String</td><td><!--v-for-->
238-
239-
``` html
240-
<!--
241-
data = 3
242-
结果会生成 3 个 div，
243-
value 的值分类为 1, 2, 3
244-
index 的值分别为 0, 1, 2
245-
-->
246-
<div v-for="(value, index) in data">
247-
<span v-text="value"></span>
248-
<span>{{index}}</span>
249-
</div>
250-
<!--也可以这样写-->
251-
<div v-for="value in data">
252-
<span v-text="value"></span>
253-
</div>
254-
255-
<!--
256-
data = "abc"
257-
结果会生成 data.length 个 div，
258-
value 的值分类为 a, b, c
259-
index 的值分别为 0, 1, 2
260-
-->
261-
<div v-for="(value, index) in data">
262-
<span v-text="value"></span>
263-
<span>{{index}}</span>
264-
</div>
265-
<!--也可以这样写-->
266-
<div v-for="value in data">
267-
<span v-text="value"></span>
268-
</div>
269-
270-
<!--
271-
data = {name: 'dk', age: 18}
272-
结果会生成 data 属性个数 个 div，
273-
value 的值分类为 dk, 18
274-
key 的值分别为 name, age
275-
-->
276-
<div v-for="(value, key) in data">
277-
<span v-text="key"></span>
278-
<span>{{value}}</span>
279-
</div>
280-
<!--也可以这样写-->
281-
<div v-for="value in data">
282-
<span v-text="value"></span>
283-
</div>
284-
285-
<!--
286-
data = [{name: 'dk1', age: 18}, {name: 'dk2', age: 20}]
287-
结果会生成 data.length 个 div，
288-
obj 的值分类为 data[0], data[1]
289-
index 的值分别为0, 1
290-
-->
291-
<div v-for="(obj, index) in data">
292-
<span v-text="JSON.stringify(obj)"></span>
293-
<span>{{index}}</span>
294-
</div>
295-
<!--也可以这样写-->
296-
<div v-for="obj in data">
297-
<span v-text="JSON.stringify(obj)"></span>
298-
</div>
299-
```
300-
301-
</td></tr>
302-
<tr><td>v-on</td><td>Function</td><td><!--v-on-->
303-
304-
``` html
305-
<!--click事件直接绑定一个方法-->
306-
<button v-on:click="say1">say1</button>
307-
<!--缩写方式-->
308-
<!--click事件使用内联语句-->
309-
<button @click="say2('调用了 say2', $event)">say2</button>
310-
```
311-
312-
</td></tr>
313-
<tr><td>v-bind</td><td>Object</td><td><!--v-bind-->
314-
315-
``` html
316-
<img v-bind:src="'imgs/red.jpg'" />
317-
<!--缩写方式-->
318-
<img :src="'imgs/yellow.jpg'" />
319-
```
320-
321-
</td></tr>
322-
<tr><td>v-model</td><td>表单元素的值</td><td><!--v-model-->
323-
324-
``` html
325-
<!--仅限于表单元素-->
326-
<input type="text" v-model="mess"/>
327-
```
328-
329-
</td></tr>
330-
<tr><td>v-pre</td><td>不需要表达式</td><td><!--v-pre-->
331-
332-
``` html
333-
<!--{{}} 不编辑，当字符串输出-->
334-
<span v-pre>{{mess}}</span>
335-
```
336-
337-
</td></tr>
338-
<tr><td>v-cloak</td><td>不需要表达式</td><td><!--v-cloak-->
339-
340-
``` html
341-
<!--
342-
mess = 'abc'
343-
span 还没被 vue 解析的时候会显示 {{mess}}
344-
解析后会显示 123
345-
用于解决这两个转换的过程不友好的显示
346-
尤其是在页面加载过慢的情况很容易出现这种情况
347-
-->
348-
<span v-cloak>{{mess}}</span>
349-
```
350-
351-
</td></tr>
352-
<tr><td>v-once</td><td>不需要表达式</td><td><!--v-once-->
353-
354-
``` html
355-
<!--内容只解释一次，当改变 mess 时不会再次映射到 span-->
356-
<span v-once>{{mess}}</span>
357-
```
358-
359-
</td></tr>
360-
</tbody>
361-
</table>
92+
那么数据驱动模式和 MVVM 模式有什么关系，换句话说，MVVM 是数据驱动模式的一种实现，Vue 是 MVVM 的一种实现。

‎VueBasic/README.md‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)