├── .gitignore ├── 13.对象.html ├── 12数组.html ├── 10.for数据遍历.html ├── 6.计算属性.html ├── 24.slot.html ├── 9.v-ifv-show-v-else.html ├── 8.闪烁问题.html ├── 4.test.html ├── 19.style.html ├── 25.动态的组件.html ├── 2.vue的实例.html ├── 3.vue暴露的方法.html ├── 11.双重循环.html ├── 14.v-bind.html ├── 16.修饰符.html ├── 22.组件.html ├── 5.vue的生命周期.html ├── 17.keyCode.html ├── 7.set和get.html ├── 1.了解vue.html ├── 18.class.html ├── 23.验证.html ├── 20.通过过滤器写回数据.html ├── 1.观察者.js ├── 21.表单.html ├── 20.过滤器.html ├── 22.语法糖.html └── 15.books.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /13.对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 |
10 | {{$key}}{{book}} //遍历出来的都是值 11 | //{{$key}}是当前对象的键 12 |
13 |
14 | 15 | 23 | 24 | -------------------------------------------------------------------------------- /12数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 |
11 | {{book}} 12 |
13 |
14 | 15 | 28 | 29 | -------------------------------------------------------------------------------- /10.for数据遍历.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 |
10 | {{$index}}{{book.name}} {{book.price}} 11 |
12 |
13 | 14 | 27 | 28 | -------------------------------------------------------------------------------- /6.计算属性.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | {{name}} 10 | {{b}} 11 |
12 | 13 | 29 | 30 | -------------------------------------------------------------------------------- /24.slot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 |
world
11 |
die
12 | 13 |
14 | 19 | 20 | 30 | 31 | -------------------------------------------------------------------------------- /9.v-ifv-show-v-else.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 |
hello world
10 | 15 | 16 |
world die
17 | 18 | 19 | 20 |
21 | 22 | 31 | 32 | -------------------------------------------------------------------------------- /8.闪烁问题.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 |
19 |
{{name}}
20 | 21 |
22 | 23 | 31 | 32 | -------------------------------------------------------------------------------- /4.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | {{message}} 10 |
11 | 12 | 32 | 33 | -------------------------------------------------------------------------------- /19.style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 |
13 | //都是行内样式 数组方式要取对应数据 14 |
hello
15 | //直接写死 16 |
hello
17 |
18 | 19 | 20 | 30 | 31 | -------------------------------------------------------------------------------- /25.动态的组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | home 10 | page 11 | 12 |
13 | 14 | 30 | 31 | -------------------------------------------------------------------------------- /2.vue的实例.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | {{mess.name}} 10 | {{mess.age}} 11 |
12 | 13 | 31 | 32 | -------------------------------------------------------------------------------- /3.vue暴露的方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
第一个{{message}}
9 | 10 | 33 | 34 | -------------------------------------------------------------------------------- /11.双重循环.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 |
11 | {{book.name}} {{index}} 12 | 13 |
14 | 父亲{{index}}{{$index}} 15 |
16 |
17 |
18 | 19 | 32 | 33 | -------------------------------------------------------------------------------- /14.v-bind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | hello 11 |
hello world
12 |
13 | 14 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /16.修饰符.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 | 11 |
12 | 父亲 13 |
some
14 | 15 |
16 | 儿子 17 |
18 |
19 | goBD 20 |
21 | 22 | 35 | 36 | -------------------------------------------------------------------------------- /22.组件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 20 | 21 | 39 | 40 | -------------------------------------------------------------------------------- /5.vue的生命周期.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | {{name}} 10 |
11 | 12 | 42 | 43 | -------------------------------------------------------------------------------- /17.keyCode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | {{l}} 14 |
15 |
16 | 17 | 39 | 40 | -------------------------------------------------------------------------------- /7.set和get.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | {{name}} 10 | {{b}} 11 | {{age}} 12 | 13 |
14 | 15 | 44 | 45 | -------------------------------------------------------------------------------- /1.了解vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | {{{name}}} 11 | {{name}} 12 |
13 |
14 | 15 | 双向{{name==='hello world1'?'zfpx':name}} 16 | {{3+5*2}}
17 | 18 | {{*name}}
19 | {{name}} 20 | 21 | 22 |
23 | 24 | 42 | 43 | -------------------------------------------------------------------------------- /18.class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 |
13 |
123
14 | //直接动态引入数据 15 |
123
16 | //不是true就是false 17 |
123
18 | //绑定数组 19 |
536
20 | //三元表达式写法 21 |
536
22 | //最简单的用法 数组和对象并用 23 | 24 |
789
25 | 26 | 27 |
28 | 29 | 30 | 39 | 40 | -------------------------------------------------------------------------------- /23.验证.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 16 | 17 | 49 | 50 | -------------------------------------------------------------------------------- /20.通过过滤器写回数据.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 10 | 11 | {{capitalize}} 12 |
13 | 14 | 51 | 52 | -------------------------------------------------------------------------------- /1.观察者.js: -------------------------------------------------------------------------------- 1 | //有发射 有绑定 2 | //一个观察者 对应多个事件 一对多 3 | //一个事件名字 对应一个事件池 4 | function Event(){ 5 | this._events = {} 6 | } 7 | //一个event 对应多个callback 8 | Event.prototype.on = function (eventName,callback) { 9 | //有的话直接放到数组里没有的话创建 10 | if(this._events[eventName]){ 11 | this._events[eventName].push(callback); 12 | }else{ 13 | //一个事件名称 对应多个callback 14 | this._events[eventName] = [callback] 15 | } 16 | }; 17 | Event.prototype.once = function (eventName,callback) { 18 | 19 | }; 20 | Event.prototype.off = function (eventName,callback) { 21 | var arr = this._events[eventName] 22 | if(arr){ 23 | this._events[eventName] = arr.filter(function (item) { 24 | return item!=callback 25 | }) 26 | } 27 | } 28 | Event.prototype.emit = function (eventName) { 29 | //取出除了名字外的所有参数 30 | var args = Array.prototype.slice.call(arguments,1); 31 | //取出所有callback 32 | var that = this; 33 | var arr = this._events[eventName] 34 | if(arr){ 35 | arr.forEach(function (item) { 36 | item.apply(that,args); 37 | }) 38 | } 39 | }; 40 | // on off emit 41 | var e = new Event(); 42 | function eat(who) { 43 | console.log('我饿了'+who); 44 | } 45 | function eat1(who) { 46 | console.log('我饿了1'+who); 47 | } 48 | e.once('我饿了', eat); 49 | //发射多次 但是只执行一次 50 | e.emit('我饿了','你'); 51 | e.emit('我饿了','你'); 52 | e.emit('我饿了','你'); 53 | e.emit('我饿了','你'); 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /21.表单.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | //取value值 对应的checkbox 必须是数组
10 | 11 | 12 | 13 | {{name}} 14 | 15 | 男 16 | 女 17 | {{radio}} 18 | //取selects的值就是我们对应的当前选中的值 19 | 25 | 26 | 31 | 32 | 33 | {{name}} 34 |
35 | 36 | 53 | 54 | -------------------------------------------------------------------------------- /20.过滤器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | //参数用空格隔开
10 | {{'abcdfgs' | capitalize 2 6}}
11 | {{'abcdfgs' | uppercase}}
12 | {{'ABCDEFG' | lowercase}}
13 | //第一个参数是添加开头符号 第二个参数 是保留多少位
14 | {{123.43123 | currency '￡' 5}}
15 | //除了1都是 单个
16 | {{6}}{{1 | pluralize 'item'}}
17 | //最大到9 18 | {{9 | pluralize 'item' 'item2' 'item3' 'item4' 'item5' 'item6' 'item7' 'item8' 'item9' 'item10' 'item11'}} 19 | 
{{json | json 4}}
20 |
21 | 给事件进行延迟 事件名后 | debounce 5000 22 | 23 | 27 | 31 | //排序根据正1和-1进行排序 32 | 33 |
34 | {{a.name}} 35 |
36 | 37 | 38 | 39 | {{'abcdefg' | capitalize 2}} 40 |
41 | 42 | 83 | 84 | -------------------------------------------------------------------------------- /22.语法糖.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |
9 | 12 | //给parent 模板传递了一个msg变量 13 | 14 | 15 | 16 | 全局下的 17 | 18 | 19 | 25 | 29 |
30 | 31 | 106 | 107 | -------------------------------------------------------------------------------- /15.books.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 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 |
序列号名称价格数量小计操作
{{$index+1}}{{phone.name}}{{phone.price}}{{phone.price*phone.count}}
总价格{{total}}
31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 |
51 | 52 | 105 | 106 | --------------------------------------------------------------------------------