vue学习博客

最新推荐文章于 2022-07-17 01:05:00 发布

insignificant555

最新推荐文章于 2022-07-17 01:05:00 发布

阅读量577

点赞数

文章标签：其他

本文链接：https://blog.csdn.net/qq_66351622/article/details/124306131

版权

学习目标：

两周掌握vue框架，以及项目构建和使用

学习内容：

BFC基础了解
vue安装使用简单交互指令：

学习产出：

技术笔记
网页博客
编写简单的demo网页完成toDoList的交互，以下为代码展示：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>toDoList</title>
      <script src="./vue.js"></script>
  </head>
  <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>
</html>

运行结果如图：

点击提交后，如下图：在这里插入图片描述

insignificant555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习博客

学习目标：两周掌握vue框架，以及项目构建和使用学习内容：BFC基础了解vue安装使用简单交互指令：学习产出：技术笔记网页博客编写简单的demo网页完成toDoList的交互，以下为代码展示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>toDoList</title>
复制链接

扫一扫