Vue起步_开发TodoList

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <!-- <script src="/assets/js/vue.js"></script> -->
    <script src="E:\Code\Vue\assets\js\vue.js"></script>
</head>

<body>
   <div id="app">
       <input type="text"/>
       <button>提交</button>
       <ul>
           <li>第一课的内容</li>
           <li>第二课的内容</li>
       </ul>
   </div>
</body>

</html>

v-for指令：

<body>
   <div id="app">
       <input type="text"/>
       <button>提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: ['第一课的内容', '第二课的内容','第三课的内容']
           }
       })
   </script>
</body>

v-on指令：

<body>
   <div id="app">
       <input type="text"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: []
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

点击提交按钮：

按钮绑定点击事件，会在methods里找handleBtnClick方法

v-model指令：

数据双向绑定

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert('click')
            }
           }
       })
   </script>
</body>

F12打开调试：

input框输入123333：

控制台改变inputValue值：

点击提交按钮，弹出输入框输入的内容：

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
                alert(this.inputValue)
            }
           }
       })
   </script>
</body>

初始list为空，input框输入内容，点击button按钮，生成li标签：

往list里添数据

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
            }
           }
       })
   </script>
</body>

提交之后把input框清空：

<body>
   <div id="app">
       <input type="text" v-model="inputValue"/>
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
   </div>

   <script>
       var app = new Vue({
           el: '#app',
           data: {
               list: [],
               inputValue: ''
           },
           methods: {
            handleBtnClick: function(){
               this.list.push(this.inputValue)
               this.inputValue = ''
            }
           }
       })
   </script>
</body>

Vue起步_开发TodoList

猜你喜欢