仅使用 javascript 构建第一个应用程序

目的

本次的DEMO代码示例非常的简单，如下图

我们只需要再上面的输入框中输入内容，下面的内容就是我们对应上面提交的内容

代码示例

• HTML代码

  
    
    
    
    
  

  
    

      

        Goal
        
        Add Goal
      

      

    
    
  

• CSS代码

* {
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
}

body {
	margin: 0;
}

#app {
	margin: 3rem auto;
	max-width: 40rem;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

label,
input {
	margin-bottom: 0.5rem;
	display: block;
	width: 100%;
}

label {
	font-weight: bold;
}

ul {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

li {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid #ccc;
}

• 这个JS代码对于大家应该是非常非常非常简单了，首先我们先获取元素

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');

• 之后我们来实现获取输入，创建元素之类的

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');

function addGoal() {
  const enteredValue = inputEl.value;
  const listItemEl = document.createElement('li');
  listItemEl.textContent = enteredValue;
  listEl.appendChild(listItemEl);
  inputEl.value = '';
}

buttonEl.addEventListener('click', addGoal);

下篇文章我们来使用VUE的方式来实现这个功能