├── .DS_Store ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── beibei.png ├── demos ├── .DS_Store ├── AjaxDouban.js ├── Async.js ├── CaesarCipher.js ├── DoubanMovies.js ├── LinkdeList.js ├── Vue-exemples │ ├── Directive.html │ ├── Mixin.html │ ├── Nav-Change.html │ ├── Prop.html │ ├── Search.html │ ├── Services.html │ ├── V+属性.html │ ├── Vue-router.html │ ├── action-Vue.html │ ├── component.html │ ├── computed and watch.html │ ├── nav.html │ ├── text.html │ ├── v-action.html │ ├── v-bind.html │ ├── v-model.html │ ├── v-model2.html │ ├── v-on.html │ ├── v-onBmi.html │ └── watch.html ├── dichotomy.js └── watchJd.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── .DS_Store ├── css │ ├── .DS_Store │ ├── common.css │ └── iconfont │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff ├── favicon.ico ├── images │ ├── .DS_Store │ ├── movie_1.jpg │ ├── movie_2.jpg │ └── person_1.webp └── index.html ├── src ├── App.vue ├── assets │ ├── logo.png │ └── maxs.png ├── components │ ├── CiList │ │ └── index.vue │ ├── City │ │ └── index.vue │ ├── ComingSoon │ │ └── index.vue │ ├── Header │ │ └── index.vue │ ├── JS │ │ ├── MessageBox │ │ │ └── index.vue │ │ └── index.js │ ├── Loading │ │ └── index.vue │ ├── Login │ │ └── index.vue │ ├── NowPlaying │ │ └── index.vue │ ├── Scroller │ │ └── index.vue │ ├── Search │ │ └── index.vue │ └── TabBar │ │ └── index.vue ├── main.js ├── routers │ ├── cinema │ │ └── index.js │ ├── index.js │ ├── mine │ │ └── index.js │ └── movie │ │ └── index.js ├── stores │ ├── city │ │ └── index.js │ └── index.js └── views │ ├── Cinema │ └── index.vue │ ├── Mine │ └── index.vue │ └── Movie │ └── index.vue ├── tests └── unit │ ├── .eslintrc.js │ └── example.spec.js └── vue.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Card007/Node-examples/e5c86ab1fa68f00683e38587ae76903ac9a48dbb/.DS_Store -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-example 2 | 3 | ![img](https://github.com/Card007/Node-examples/blob/master/beibei.png) 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Run your tests 21 | ``` 22 | npm run test 23 | ``` 24 | 25 | ### Lints and fixes files 26 | ``` 27 | npm run lint 28 | ``` 29 | 30 | ### Run your unit tests 31 | ``` 32 | npm run test:unit 33 | ``` 34 | 35 | ### Customize configuration 36 | See [Configuration Reference](https://cli.vuejs.org/config/). 37 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /beibei.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Card007/Node-examples/e5c86ab1fa68f00683e38587ae76903ac9a48dbb/beibei.png -------------------------------------------------------------------------------- /demos/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Card007/Node-examples/e5c86ab1fa68f00683e38587ae76903ac9a48dbb/demos/.DS_Store -------------------------------------------------------------------------------- /demos/AjaxDouban.js: -------------------------------------------------------------------------------- 1 | var log = function(){ 2 | console.log.apply(console, arguments) 3 | } 4 | 5 | index=0 6 | 7 | var e = function(selector){ 8 | return document.querySelector(selector) 9 | } 10 | 11 | var addHtml = function(elemnt, html){ 12 | elemnt.insertAdjacentHTML('beforeend', html) 13 | } 14 | 15 | var movieDiv = e('body') 16 | 17 | addHtml(movieDiv,` 18 |
19 |
20 |
21 |
22 | 23 | 24 |
25 |
26 | `) 27 | 28 | var ajax = function(method, path, responseCallback){ 29 | var r = new XMLHttpRequest() 30 | var l = [] 31 | r.open(method, path, true) 32 | r.onreadystatechange = function(){ 33 | if (r.readyState === 4){ 34 | l.push(responseCallback(r)) 35 | } 36 | } 37 | r.send() 38 | return l 39 | } 40 | 41 | var takeId = function(r){ 42 | log('start') 43 | var movie = JSON.parse(r.response) 44 | log(movie) 45 | // var movieList = movie.subjects 46 | // var l = [] 47 | // for (let i = 0; i < movieList.length; i++) { 48 | // l.push(movieList[i].id) 49 | // } 50 | // return l 51 | } 52 | 53 | var top250Url = 'https://api.douban.com/v2/movie/top250' 54 | var movieUrl = 'https://api.douban.com/v2/movie/' 55 | 56 | //所有id 57 | var movieId = ["1292052", "1291546", "1295644", "1292720", "1292063", "1292722", "1291561", "1295124", "3541415", "3011091", "2131459", "3793023", "1292001", "1291549", "1292064", "1292213", "1889243", "1291560", "1291841", "5912992"] 58 | 59 | 60 | for (let i = 0; i < movieId.length; i++){ 61 | movieList.push(movieUrl + movieId[i]) 62 | } 63 | 64 | var addImag = function(){ 65 | if (index < 21){ 66 | var imgDvi = e('#movie-img') 67 | var imgUrl = ajax('GET', top250Url, function(r){ 68 | var movie = JSON.parse(r.response) 69 | // addHtml(imgDvi, ` 70 | // 71 | // `) 72 | // index += 1 73 | log(movie) 74 | }) 75 | imgUrl 76 | } else { 77 | index = 0 78 | } 79 | } 80 | 81 | var removeImg = function(){ 82 | var imgList = e('#movie-img').children 83 | imgList[index].remove() 84 | index -= 1 85 | } 86 | 87 | var addButton = e('#add-button') 88 | var removeButton = e('#remove-button') 89 | 90 | addButton.addEventListener('click', addImag) 91 | removeButton.addEventListener('click', removeImg) 92 | 93 | -------------------------------------------------------------------------------- /demos/Async.js: -------------------------------------------------------------------------------- 1 | // const getWeb = function(){ 2 | // requestSomething() 3 | // setData() 4 | // return console.log("3.程序结束") 5 | // } 6 | 7 | // const requestSomething = function(){ 8 | // setTimeout(() => console.log('1.网页数据爬取完毕！'),2000) 9 | // } 10 | 11 | // const setData = function(){ 12 | // console.log('2.开始处理数据！') 13 | // } 14 | 15 | // getWeb() 16 | 17 | 18 | const getWeb = async function(){ 19 | await requestSomething().catch(e => console.log(e)) 20 | setData() 21 | return console.log("3.程序结束") 22 | } 23 | 24 | const requestSomething = function(){ 25 | return new Promise((resolve, reject) => { 26 | // let err = '1.爬取失败！' 27 | if(typeof err != 'undefined'){ 28 | reject(err) 29 | } else ( 30 | setTimeout(() => { 31 | console.log('1.网页数据爬取完毕！') 32 | resolve() 33 | },2000) 34 | ) 35 | }) 36 | } 37 | 38 | const setData = function(){ 39 | console.log('2.开始处理数据！') 40 | } 41 | 42 | getWeb() -------------------------------------------------------------------------------- /demos/CaesarCipher.js: -------------------------------------------------------------------------------- 1 | var lower = 'abcdefghijklmnopqrstuvwxyz' 2 | var upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' 3 | var code = 'VRPHWLPHV L ZDQW WR FKDW ZLWK BRX,EXW L KDYH QR UHDVRQ WR FKDW ZLWK BRX' 4 | 5 | var ensure = function(condition,message){ 6 | if (!condition) { 7 | console.log('测试失败！！' + message) 8 | } 9 | } 10 | 11 | var find = function(s1,s2){ 12 | var index = -1 13 | for (var i = 0; i < s1.length; i++){ 14 | if (s1[i] == s2){ 15 | index = i 16 | break 17 | } 18 | } 19 | return index 20 | } 21 | 22 | var trange = function(s){ 23 | var reselt = '' 24 | for(var i = 0; i < s.length; i ++){ 25 | n = find(lower,s[i]) 26 | reselt += upper[n] 27 | } 28 | return reselt 29 | } 30 | 31 | var testTrange = function(){ 32 | ensure(trange('nothlu') == 'NOTHLU', '转换失败！！！') 33 | } 34 | 35 | var encoding = function(coding, n){ 36 | var reselt = '' 37 | var index = 0 38 | for (var i = 0; i < coding.length; i++){ 39 | index = find(lower, coding[i]) 40 | if (index != -1){ 41 | reselt += lower[(index + n + 26) % 26] 42 | } else { 43 | index = find(upper, coding[i]) 44 | if (index != -1){ 45 | reselt += upper[(index + n + 26) % 26] 46 | }else{ 47 | reselt += coding[i] 48 | } 49 | } 50 | } 51 | return reselt 52 | } 53 | 54 | 55 | var testEncoding = function(){ 56 | ensure(encoding('af z',1) == 'bg a','测试失败') 57 | } 58 | 59 | var enCode = function(s){ 60 | for (var i = 1; i < 26; i++){ 61 | console.log(encoding(s,i)) 62 | } 63 | } 64 | 65 | -------------------------------------------------------------------------------- /demos/DoubanMovies.js: -------------------------------------------------------------------------------- 1 | var request = require('request') 2 | var cheerio = require('cheerio') 3 | var fs = require('fs') 4 | var movies = [] 5 | 6 | var log = function(){ 7 | console.log.apply(console, arguments) 8 | } 9 | 10 | var movie = function(){ 11 | this.id = 0 12 | this.name = '' 13 | this.score = 0 14 | this.pic = '' 15 | } 16 | 17 | var saveMovie = function(movies){ 18 | var path = 'movie.txt' 19 | var data = JSON.stringify(movies, null, 2) 20 | fs.appendFile(path, data, function(error){ 21 | if(error == null){ 22 | log('保存成功！') 23 | } else { 24 | log('保存失败',error) 25 | } 26 | }) 27 | 28 | } 29 | 30 | //接收一个div，提取里面的电影信息 31 | var takeMovie = function(div){ 32 | var e = cheerio.load(div) 33 | var m = new movie() 34 | m.name = e('.title').text() 35 | m.score = e('.rating_num').text() 36 | var pic = e('.pic') 37 | m.pic = pic.find('img').attr('src') 38 | m.id = pic.find('em').text() 39 | return m 40 | } 41 | 42 | var requstMovie = function(url){ 43 | request(url, function(error, response, body){ 44 | if (error === null && response.statusCode === 200){ 45 | var e = cheerio.load(body) 46 | var movieDiv = e('.item') 47 | for (let i = 0; i < movieDiv.length; i++) { 48 | let movieInfo = takeMovie(movieDiv[i]) 49 | log('正在爬取' + movieInfo.name) 50 | movies.push(movieInfo) 51 | } 52 | if (movies.length === 250){ 53 | var sortM = movies.sort(sortMovie('id')) 54 | saveMovie(sortM) 55 | } 56 | } else { 57 | log('爬取失败', error) 58 | } 59 | }) 60 | 61 | } 62 | 63 | var top250Url = function(){ 64 | let l = ['https://movie.douban.com/top250'] 65 | var urlContinue = 'https://movie.douban.com/top250?start=' 66 | let cont = 25 67 | for (let i = 0; i < 10; i++) { 68 | l.push(urlContinue+cont) 69 | cont += 25 70 | } 71 | return l 72 | } 73 | 74 | var sortMovie = function(id){ 75 | return function(obj ,obj1){ 76 | var value = obj[id] 77 | var value1 = obj1[id] 78 | return value - value1 79 | } 80 | } 81 | 82 | var __main = function(){ 83 | var url = top250Url() 84 | for (let i = 0; i < url.length; i++) { 85 | requstMovie(url[i]) 86 | } 87 | // requstMovie('https://movie.douban.com/top250') 88 | } 89 | 90 | __main() -------------------------------------------------------------------------------- /demos/LinkdeList.js: -------------------------------------------------------------------------------- 1 | var log = function(){ 2 | console.log.apply(console, arguments) 3 | } 4 | 5 | //队列结构，实现先进先出 6 | var Queue = function(){ 7 | this.data = [] 8 | } 9 | 10 | Queue.prototype.enqueue = function(element){ 11 | this.data.push(element) 12 | } 13 | 14 | Queue.prototype.dequeue = function(element){ 15 | return this.data.splice(0,1)[0] 16 | } 17 | 18 | Queue.prototype.length = function(){ 19 | return this.data.length 20 | } 21 | 22 | Queue.prototype.empty = function(){ 23 | this.data = [] 24 | } 25 | 26 | //stack 栈 27 | //相当于python的添加和pop 28 | var Stack = function(){ 29 | this.data = [] 30 | } 31 | 32 | Stack.prototype.push = function(n){ 33 | this.data.push(n) 34 | } 35 | 36 | Stack.prototype.pop = function(){ 37 | var index = this.data.length - 1 38 | return this.data.splice(index,1)[0] 39 | } 40 | 41 | Stack.prototype.stop = function(){ 42 | var index = this.data.length - 1 43 | return this.data[index] 44 | } 45 | 46 | //链表 47 | //Node对象，其中包含了element和next，element是在调用类本身的时候导入的数，而next默认为空 48 | //一般为空的话很可能是排在末尾的数 49 | var Node = function(e){ 50 | this.element = e 51 | this.next = null 52 | } 53 | 54 | //链数列表类，包含了node类，将node类作为链表上的链数 55 | //head创建了一个新的链数，默认null为空 56 | var LinkdeList = function(){ 57 | //当创建一个新的链表时，里面会包含一个空的链数 58 | this.head = new Node() 59 | this._length = 0 60 | } 61 | 62 | //添加新链数 63 | LinkdeList.prototype.append = function(e){ 64 | var node = new Node(e) 65 | var n = this.head 66 | while(n.next != null){ 67 | n = n.next 68 | } 69 | n.next = node 70 | this._length++ 71 | } 72 | 73 | 74 | LinkdeList.prototype.indexof = function(e){ 75 | var n = this.head 76 | for (let i = 0; i < this._length; i++) { 77 | n = n.next 78 | if (n.element == e){ 79 | return i 80 | } 81 | } 82 | } 83 | 84 | LinkdeList.prototype.log = function(){ 85 | var n = this.head.next 86 | while(n != null){ 87 | log('>',n.element) 88 | n = n.next 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 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Directive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 |

Nothing

12 | 13 |
14 | 15 | 16 | 28 | 29 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Mixin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Nav-Change.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 17 | 18 | 19 |
20 | 24 | 27 | 30 |
31 | 32 | 33 | 41 | 42 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Prop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 35 | 36 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 51 | 52 | 53 |
54 | 55 | 59 |
60 | 61 | 111 | 112 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Services.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 68 | 69 | 70 |
71 |

Services

72 | 77 | 78 |
79 |

Total:{{ total() | currency }}

80 |
81 |
82 | 83 | 128 | 129 | -------------------------------------------------------------------------------- /demos/Vue-exemples/V+属性.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | {{ message }} 12 |
13 |
14 | 15 | 鼠标悬停即可查看！ 16 | 17 |
18 |
19 |

现在你看到我了

20 |
21 | 22 |
23 |
    24 |
  1. 25 | {{ todo.text }} 26 |
    2. 27 |
28 |
29 | 30 |
31 |

{{ message }}

32 | 33 |
34 | 35 |
36 |

{{ message }}

37 | 38 |
39 | 40 |
41 |
    42 | 47 |
48 |
49 | 50 | 51 | 119 | 120 | -------------------------------------------------------------------------------- /demos/Vue-exemples/Vue-router.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |
13 |

Hello,World!

14 |

15 | Go to Foo 16 |
17 | Go to Bar 18 | 19 |

20 | 21 |
22 | 23 | 41 | 42 | -------------------------------------------------------------------------------- /demos/Vue-exemples/action-Vue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 18 | 19 | 20 |
21 | 22 | 23 |

动画实例

24 | 25 |
26 | 27 | 43 | 44 | -------------------------------------------------------------------------------- /demos/Vue-exemples/component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 |
16 |
17 | 23 |
24 |
25 | 26 | 27 | 66 | 67 | -------------------------------------------------------------------------------- /demos/Vue-exemples/computed and watch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
{{ fullName }}
12 | 13 | 52 | 53 | -------------------------------------------------------------------------------- /demos/Vue-exemples/nav.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 83 | 84 | 85 |
86 | 92 |

您选择了 {{ active }} 菜单

93 |
94 | 95 | 108 | 109 | -------------------------------------------------------------------------------- /demos/Vue-exemples/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 105 | 106 | 107 | 108 |
109 |
110 | 111 |
112 |

{{ text_content }}

113 |
114 | 115 | 116 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /demos/Vue-exemples/v-action.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 28 | 29 | 30 |
31 | 32 | 33 |

Hello,World!I will come back!

34 | 35 |
36 | 44 | 45 | -------------------------------------------------------------------------------- /demos/Vue-exemples/v-bind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /demos/Vue-exemples/v-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |

{{ lovingVue }}

13 |
14 | 15 | 16 | 43 | 44 | -------------------------------------------------------------------------------- /demos/Vue-exemples/v-model2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 |

{{ message }}

13 |
14 | 15 |

{{ message2 }}

16 |
17 | 18 |
19 |

单个复选框

20 | 21 | 22 | 23 |
24 |

多个复选框

25 | 26 |