modify by dk

Author: dk-lan

README.md

@@ -1,33 +1,9 @@
 # 教程简介
-本教程要实现一个简单的后台管理系统，包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能，教程会从 Vue 入门开始讲解，包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术，再到后台管理系统的一些常规功能，用 Vue 如何去实现。也许会有人质疑 Vue 和 jQuery 的搭配，在我本人看来，jQuery 本身已很成熟，而且包含了很多非常好用的插件，比如表单验证，会比 Vue 的成本低很多。在本教程中会用纯 Vue 和 Vue + jQuery 两种方式去实现某些功能，可用于对比两种方案在开发成本和性能上到底有多大的影响。
-
-# 后台管理系统的常规技术点
-- 数据请求 ajax
-  - 所有 ajax 请求都会有 loding 和遮罩层
-  - 所有的 ajax 的 url 都应该设置相对应的前缀方便发布
-- 数据列表 datagrid
-  - 可配置是否需要分页
-  - 可配置是否需要搜索功能
-  - 可配置数据列表是否能修改、删除、添加和查看详情
-  - 可配置水平滚动的固定列
-  - 可配置点击列头是否需要排序
-  - 可配置列表是否允许直接修改数据
-  - 可配置列表是否允许复制行
-  - 列表的数据在编辑时可自动生成对应的表单元素，比如编辑日期时会自动生成日期控件
-  - 列表在编辑时的验证规则
-  - 是否需要支持树形结构
-- 表单 form
-  - 信息分组显示
-  - 表单编辑权限
-  - 表单验证
-  - 表单控件自动生成
-  - 每行显示的元素数量
-  - 跨列显示
-- 数据完整性
-- 数据安全性
-- 数据查询性能
-- 系统支持多语言切换
-- 系统权限
+本教程要实现一个简单的后台管理系统，包含登陆、数据列表、数据查询、列表分页、添加数据、修改数据和删除数据等功能，教程会从 Vue 入门开始讲解，包含 es6、Sass、Webpack、Bootstrap、jQuery 等技术，再到后台管理系统的一些常规功能，用 Vue 如何去实现。
+
+也许会有人质疑 Vue 和 jQuery 的搭配，在我本人看来，jQuery 本身已很成熟，而且包含了很多非常好用的插件，比如表单验证，会比 Vue 的成本低很多。在本教程中会用纯 Vue 和 Vue + jQuery 两种方式去实现某些功能，可用于对比两种方案在开发成本和性能上到底有多大的影响。
+
+如果对 Vue 还不了解的建议先看看 Vue 基础教程，如果对 Vue 有一定了解的可以直接看 VueERP
 
 # 项目目录结构
 - VueBisc [Vue 基础教程]
@@ -38,6 +14,15 @@
 - 认识数据驱动模式
 - 认识 MVVM 模式
 - [模版语法](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/TemplateSyntax)
+- [样式绑定](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/StyleBinding)
+- [Vue 实例化时基本属性](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/VueBasicOptions)
+- [修饰符](https://github.com/dk-lan/vue-erp/tree/master/VueBasic/Modifiers)
+- 组件
+- 指令
+- 动画和过度效果
+- 路由
+- 钩子函数
+- Vuex
 
 # 认识 Vue
 关于 Vue 的描述有不少，不外乎都会拿来与 Angular 和 React 对比，同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多，但到目前为止，Angular 在热度上已明显不及 Vue，性能已成为最大的诟病。
@@ -49,9 +34,19 @@
 关于 Vue、React 和 Angular，其实都是在原生 JS 基础上，对面向对象不一样的实现方式而已，所以要想使用这三者中的任意一种，首先要有一定的 JS 基础和对面向对象有一定的认识。
 
 在代码层面，Vue 只是一个构造函数，整个 Vue 的实现都在实例化这个构造函数开始。
+``` html
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+```
+``` html
+  <div id="app"></div>
+```
 ``` javascript
   var vm = new Vue({
-    //选项
+    el: '#app'// Vue 实例元素
+    data: {
+      //数据
+    }
+    ...
   })
 ```
 

VueBasic/Modifiers/README.md

@@ -0,0 +1,5 @@
+# 事件修饰符
+对事件添加一些通用的限制，比如阻止事件冒泡，Vue 对这种事件的限制提供了特定的写法，称之为修饰符
+用法：v-on:事件.修饰符
+
+# 表单修饰符

VueBasic/StyleBinding/README.md

@@ -0,0 +1,105 @@
+# 绑定 class
+## 对象语法
+v-bind:class="{样式名: 结果为 boolean 的表达式}"，表达式结果为 true，则元素 class="样式名"，否则元素 class=""
+``` html
+    <div :class="{classNam1: 1 == 1, className2: 1 == 2}"></div>
+```
+渲染结果
+``` html
+    <div class="classNam1"></div>
+```
+
+也可以写成
+``` html
+    <div :class="classObject"></div>
+```
+``` javascript
+    data: {
+        classObject: {
+            className1: false,
+            className2: true
+        }
+    }
+```
+渲染结果
+``` html
+    <div class="className2"></div>
+```
+
+还可以通过计算属性的方式
+``` html
+    <div :class="classObjectComputed"></div>
+```
+``` javascript
+    computed: {
+        classObjectComputed: function(){
+            return{
+                className1: true,
+                className2: true
+            }
+        }
+    }
+```
+渲染结果
+``` html
+    <div class="className1 className2"></div>
+```
+
+## 数组语法
+v-bind:class="[]"，数组元素可以为表达式，也可以为字符串，如果是字符串则直接输出为样式名
+``` html
+    <div :class="[class1, class2, 'className3', active ? 'className4' : '']"></div>
+```
+``` javascript
+    data: {
+        class1: 'className1',
+        class2: 'className1',
+        active: true
+    }
+```
+渲染结果
+``` html
+    <div class="className1 className2 className3 className4"></div>
+```
+
+也可以用数据对象的方式，解析的逻辑和对象语法一样
+``` html
+    <div :class="[{className1: 1 == 1, className2: 1 == 2}, 'className3' ]"></div>
+```
+渲染结果
+``` html
+    <div class="className1 className3"></div>
+```
+
+# 绑定 style
+## 对象语法
+在对象当中，CSS 的属性名要用驼峰式表达：fontSize 解析成 font-size
+``` html
+    <div :style="{color: color, fontSize: fontSize, backgroundColor: '#ccc'}"></div>
+```
+``` javascript
+    data: {
+        color: 'red',
+        fontSize: '12px'
+    }
+```
+渲染结果
+``` html
+    <div style="color: red, font-size: 12px; background-color: #ccc"></div>
+```
+## 数组语法
+``` html
+    <div :style="[styleObject, {backgroundColor: '#ccc'}]"></div>
+```
+``` javascript
+    data: {
+        styleObject: {
+            color: 'red',
+            fontSize: '12px'
+        }
+    }
+```
+渲染结果
+``` html
+    <div style="color: red, font-size: 12px; background-color: #ccc"></div>
+```

VueBasic/TemplateSyntax/Directives.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <title>模版语法-指令</title>
-        <script src="https://unpkg.com/vue/dist/vue.js"></script>
+        <script type="text/javascript" src="../js/vue.min.js"></script>
         <style type="text/css" media="screen">
             [v-cloak]{
                 display: none;

VueBasic/TemplateSyntax/Example.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8">
 		<title>模版语法-综合案例</title>
 		<link rel="stylesheet" href="Example.css" />
-		<script src="https://unpkg.com/vue/dist/vue.js"></script>
+		<script type="text/javascript" src="../js/vue.min.js"></script>
 	</head>
 
 	<body>

VueBasic/TemplateSyntax/Interpolations.html

@@ -4,7 +4,7 @@
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>模版语法-插值</title>
-	<script src="https://unpkg.com/vue/dist/vue.js"></script>
+	<script type="text/javascript" src="../js/vue.min.js"></script>
 </head>
 <body>
 	<div id="app">

VueBasic/TemplateSyntax/README.md

@@ -220,7 +220,7 @@ var vm = new Vue({
       <tr><td>v-pre</td><td>不需要表达式</td><td><!--v-pre-->
       
   ``` html
-    <!--{{}} 不编辑，当字符串输出-->
+    <!--{{}} 不编译，当字符串输出-->
     <span v-pre>{{mess}}</span>
   ```
 
@@ -250,6 +250,6 @@ var vm = new Vue({
   </tbody>
 </table>
 
-[指令效果](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Directives.html)
+[指令效果预览](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Directives.html)
 
-[综合安全](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Example.html)
+[综合安全预览](https://dk-lan.github.io/vue-erp/VueBasic/TemplateSyntax/Example.html)