Day35-初识VUE
-
前端页面 = Tag + CSS + JavaScript
- Tag - 承载内容 - content
- CSS - 页面显示 - display
- 层叠样式表
- 内嵌样式表 (通过标签的Style属性设置样式, 不推荐使用)
- 内部样式表 (在head部分通过style标签插入CSS选择器)
- 外部样式表 (单独的文件, 使用link标签引入进来)
- JS - 交互行为 - behavior
- 浏览器中的JavaScript有三个要素
- ECMAScript - ES - 语法规范(关键字、运算符、分支、循环、对象、函数)
- BOM - Browser Object Model - 浏览器对象模型 - window
- location / history / screen / navigator
- alert() / promt() / confirm() / open() / close()
- setTimeout() / setInterval()
- DOM - Document Object Model - 文档对象模型 - document
- querySelector() / querySelectorAll() - 通过CSS选择器获取页面上的标签
- createElement()- 创建新标签
- appendChild() / insertBefore() - 添加新标签
- removeChild() - 删除标签
- textContent / innerHTML - 修改标签内容
- style - 修改标签样式
-
原生JS代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态列表 - 原生JavaScript</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; color: #fff; } #app { width: 40%; margin: 20px auto; } #fruits>li { width: 90%; height: 50px; background-color: #6ca; margin: 4px 0; text-align: center; font-size: 20px; list-style-type: none; line-height: 50px; } #fruits+div { margin-top: 20px; } #app>div>input[type=text] { width: 70%; height: 40px; color: #fff; border-radius: 8px; border: none; outline: none; font-size: 20px; text-align: center; vertical-align: middle; background-color: #999; } #ok { width: 19%; height: 40px; color: #fff; background-color: #a45; border: none; outline: none; font-size: 16px; vertical-align: middle; } </style> </head> <body> <div id="app"> <ul id="fruits"> <li>苹果</li> <li>香蕉</li> <li>榴莲</li> </ul> <div> <input type="text"> <button id="ok">确定</button> </div> </div> <script> function removeItem(evt) { let currentItem = evt.target currentItem.parentNode.removeChild(currentItem) } function addItem(evt) { let fruitName = input.value.trim() if (fruitName.length > 0) { let newItem = document.createElement('li') newItem.addEventListener('click', removeItem) newItem.textContent = fruitName ul.appendChild(newItem) } input.value = '' } let ul = document.querySelector('#fruits') let items = document.querySelectorAll('#fruits>li') for (let i = 0; i < items.length; ++i) { items[i].addEventListener('click', removeItem) } let okButton = document.querySelector('#ok') okButton.addEventListener('click', addItem) let input = document.querySelector('input[type=text]') input.addEventListener('keydown', function(evt) { if (evt.keyCode === 13) { addItem(evt) } }) </script> </body> </html>
-
-
VUEJS代码
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态列表 - Vue.js</title> <style> * { margin: 0; padding: 0; } body { background-color: #000; color: #fff; } #app { width: 40%; margin: 20px auto; } #fruits>li { width: 90%; height: 50px; background-color: #6ca; margin: 4px 0; text-align: center; font-size: 20px; list-style-type: none; line-height: 50px; } #fruits+div { margin-top: 20px; } #app>div>input[type=text] { width: 70%; height: 40px; color: #fff; border-radius: 8px; border: none; outline: none; font-size: 20px; text-align: center; vertical-align: middle; background-color: #999; } #ok { width: 19%; height: 40px; color: #fff; background-color: #a45; border: none; outline: none; font-size: 16px; vertical-align: middle; } </style> </head> <body> <div id="app"> <ul id="fruits"> <li v-for="fruit in fruits" @click="removeItem(fruit)">{{ fruit }}</li> </ul> <div> <input type="text" v-model="fruitName" @keydown.enter="addItem()"> <button id="ok" @click="addItem()">确定</button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> <script> let app = new Vue({ el: '#app', data: { fruits: ['榴莲', '番茄', '葡萄'], fruitName: '' }, methods: { removeItem(fruit) { let index = this.fruits.indexOf(fruit) this.fruits.splice(index, 1) }, addItem() { let name = this.fruitName.trim() if (name.length > 0) { this.fruits.push(name) } this.fruitName = '' } } }) </script> </body> </html>
-