Day35-初识VUE

最新推荐文章于 2025-03-16 21:55:05 发布

原创最新推荐文章于 2025-03-16 21:55:05 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

qf学习专栏收录该内容

28 篇文章

订阅专栏

本文对比了使用Vue.js和原生JavaScript创建动态列表的方法。在原生JS中，通过事件监听和DOM操作实现增删功能；而在Vue.js中，利用数据绑定和方法直接完成相同功能，简化了代码并提高了可维护性。

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>