Initial Project
This commit is contained in:
		
							parent
							
								
									91ae220001
								
							
						
					
					
						commit
						9b88b5845f
					
				
							
								
								
									
										15
									
								
								software-development-2022/basic-vue-project/app.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										15
									
								
								software-development-2022/basic-vue-project/app.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,15 @@
 | 
			
		||||
Vue.createApp({
 | 
			
		||||
    data() {
 | 
			
		||||
        return {
 | 
			
		||||
            goals: [],
 | 
			
		||||
            enteredValue: ``
 | 
			
		||||
        };
 | 
			
		||||
    },
 | 
			
		||||
    methods: {
 | 
			
		||||
        addGoal() {
 | 
			
		||||
            this.goals.push(this.enteredValue);
 | 
			
		||||
            this.enteredValue = ``;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}).mount(`#app`);
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										23
									
								
								software-development-2022/basic-vue-project/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										23
									
								
								software-development-2022/basic-vue-project/index.html
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,23 @@
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<html lang="en">
 | 
			
		||||
  <head>
 | 
			
		||||
    <meta charset="UTF-8" />
 | 
			
		||||
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 | 
			
		||||
    <title>A First App</title>
 | 
			
		||||
    <link rel="stylesheet" href="styles.css" />
 | 
			
		||||
  </head>
 | 
			
		||||
  <body>
 | 
			
		||||
    <div id="app">
 | 
			
		||||
      <div>
 | 
			
		||||
        <label for="goal">Goal</label>
 | 
			
		||||
        <input type="text" id="goal" v-model="enteredValue"/>
 | 
			
		||||
        <button v-on:click="addGoal">Add Goal</button>
 | 
			
		||||
      </div>
 | 
			
		||||
      <ul>
 | 
			
		||||
        <li v-for="goal in goals">{{ goal }}</li>
 | 
			
		||||
      </ul>
 | 
			
		||||
    </div>
 | 
			
		||||
    <script src="https://unpkg.com/vue@3"></script>
 | 
			
		||||
    <script src="app.js"></script>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
							
								
								
									
										40
									
								
								software-development-2022/basic-vue-project/styles.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										40
									
								
								software-development-2022/basic-vue-project/styles.css
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,40 @@
 | 
			
		||||
* {
 | 
			
		||||
  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;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										4
									
								
								software-development-2022/test.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										4
									
								
								software-development-2022/test.js
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,4 @@
 | 
			
		||||
const min= (a, b) => a < b ? a : b
 | 
			
		||||
 | 
			
		||||
console.log(min(3, 5))
 | 
			
		||||
console.log(min(5, 3))
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user