Vue起步_开发TodoList

最新推荐文章于 2023-02-13 15:20:28 发布

小斌斌阿

最新推荐文章于 2023-02-13 15:20:28 发布

阅读量169

点赞数

分类专栏： Vue学习笔记文章标签： vue 学习笔记

本文链接：https://blog.csdn.net/qq_17832583/article/details/80392304

版权

Vue学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

小斌斌阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue起步_开发TodoList

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;!-- &lt;script src="/assets/js/v
复制链接

扫一扫

专栏目录