JavaWeb之Vue

最新推荐文章于 2024-06-06 13:54:53 发布
最新推荐文章于 2024-06-06 13:54:53 发布
阅读量1.2k 收藏 6
点赞数 1
分类专栏： 前端技术栈 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41911251/article/details/122116389
版权

Vue

1. Vue简介

渐进式js框架------> 简化页面中的js开发

官网：cn.vuejs.org

了解：jQuery是js框架

渐进式：

  • 易用
  • 灵活
  • 高效

通俗定义：vue的出现可以让我们在页面中完成特别复杂的操作，可以简化dom编程甚至可以不写任何dom编程代码

在这里插入图片描述

2. Vue第一个入门案例

2021/12/19-------【编程不良人】2021最新Vue全家桶系列教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
    <div id="app" class="target">
        <h1>{{msg}}</h1>
        <span>{{msg}}}</span>
        <h2>{{count}}</h2>
        <h2>{{count+1}}</h2>
        <h3>{{content.toUpperCase}}</h3>
        <h4>{{content.length}}</h4>
        <h4>{{content==Hello}}</h4>
    </div>
</body>
</html>
<!--
    1.Script代码与引入核心js文件放在Html后面
    2.id标签不能放在body中,放在div容器中
-->

<!--引入核心js文件-->
<script src="js/vue.js"></script>
<!--书写 Vue代码-->
<script>
    new Vue({                    //创建一个Vue实例
        el:"#app",              //el:element 元素   代表vue实例的作用范围
        data: {                //data 数据  自定义绑定各种数据
            msg:"小陈",
            count:0,
            content:"Hello vue"
        }
    });
</script>
<!--总结：
    1.一个页面中只能存在一个Vue实例     不能创建多个vue实例
    2.vue实例中el属性代表vue实例的作用范围,日后在vue实例作用范围内可以使用{{data属性中变量名}}
      直接获取data中变量名对应的属性值
    3.vue实例中data属性用来给当前vue实例绑定自定义数据，日后绑定数据可以在vue实例作用范围内直接使用{{变量名}}}方式获取
    4.使用{{}}进行data中数据获取时，可以在{{}}取值语法中进行算术运算、逻辑运算及调用相关类型的相关方法
    5.vue实例中el属性可以书写任何css选择器，但是推荐使用id选择器，因为一个vue实例只能做用于一个具体作用范围
-->

3. Vue中v-text、v-html指令以及v-on事件指令

vue中data属性定义对象、数组相关数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
  <h1>{{msg}}</h1>
  <h1>{{count}}</h1>
  <h1>{{user.id}}====={{user.name}}===={{user.age}}===={{user.salary}}</h1>
  <h1>{{schools[0]}}======{{schools[1]}}========{{schools[2].length}}</h1>
  <h1>{{users[0].id}}======{{users[0].name}}====={{users[0].age}}</h1>
</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<!--书写vue代码-->
<script>
  new Vue({
    el:"#app",
    data:{
      msg:"Hello Vue",
      count:0,
      user:{id:22,name:"xiaochao",age:25,salary:2500},
      schools:["河南校区","北京校区","天津校区"],
      users:[
        {id:22,name:"xiaochao",age:25,salary:2500},
        {id:23,name:"xiaochao1",age:24,salary:3500},
        {id:24,name:"xiaochao2",age:22,salary:4500}
      ]
    }
  });
</script>

v-text、v-html指令使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!-- v-text和v-html：作用：用来获取vue实例中data属性中声明的数据
      {{}}取值和v-text取值区别：
        1.{{}}取值不会将标签的原始数据清空  使用v-text取值清空标签原始数据
          {{}}=====> 插值表达式
        2.{{}}取值存在插值闪烁      v-text  v-html取值不存在差值闪烁
      v-text(innerText)取值和v-html(innerHtml)取值区别：
        1.使用v-text取值，直接将获取数据渲染到指定标签中
        2.使用v-html取值：先将获取数据进行Html标签解析，解析之后再渲染到指定标签中
    -->
    <h1 v-text="msg"></h1>
    <h1 v-html="msg"></h1>
    <h1 v-text="content"></h1>
    <h1 v-html="content"></h1>
  </div>

</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:"Hello Vue",
        content:"<a href=\"http://www.baidu.com\">\"点我查看详细\"</a>"
    }
  })
</script>

v-on指令基本使用1

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <!--
      js中事件(event):事件三要素：
                            事件源：发生特定动作在html标签
                            事件：发生特定动作事件    单击事件：onclick ondblclick onmouseover    onmouseout keyup   keydown...                                             
                            监听器：事件处理程序     一般在js中是事件处理函数    function(){}
      v-on指令： 作用：用来给页面中标签绑定事件
                语法：在对应标签上使用v-on:事件名="事件处理函数名"
     -->
    <h1>{{msg}}</h1>
    <button onclick="test()">点我</button>
    <button v-on:click="text">点点我</button>

  </div>

</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
  <script>
    function test() {
      alert("11")
    };
    new Vue({
      el:"#app",
      data:{
        msg:"Hello Vue",
        content:"<a href=\"http://www.baidu.com\">\"点我查看详细\"</a>",
      },
        methods:{  // 用来vue实例绑定一系列函数
          text:function(){       //定义一个test函数====匿名
            alert("vue中test");
          }
    }
  })
</script>

v-on指令基本使用2之在函数中获取vue实例本身

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <button v-on:click="test" v-on:mouseover="test1">点我试试</button>
   <!--双向绑定机制 MVVN   Model<======> ViewModel(监听器)<=====>View(视图）   -->
    <h1>{{count}}</h1>       // 视图

  </div>

</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",
    data:{    //  Model
      msg:"Hello Vue",
      count:1,
    },
    methods:{
      test:function (){
        //如何在vue定义方法中获取data中数据   注意：在自定义方法中可以直接使用this，this代表当前vue实例
        console.log(this.count);
        //触发aa事件
        this.aa();
        this.count =this.count +1;
      },
      test1:function (){
        console.log("777")
      },
      aa:function(){
        console.log("aaa");
      }
    }
  })
</script>

4. Vue中v-on事件传递参数和@简化事件绑定

v-on指令基本使用2之在函数中传递参数

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <h1>年龄:{{count}}</h1>
    <button v-on:click="incrementAge">点我每次给年龄+1</button>
    <!-- 指定事件并给事件传递参数-->
    <button v-on:click="changeAge(10)">点我每次给年龄+10</button>
    <button v-on:click="changeAgeAndMsg({count:1,msg:'您好'})">点我每次给年龄+1,同时msg+“您好”</button>    
    <!--外面是双引号，里面是单引号-->
  </div>

</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",
    data:{    //  Model
      msg:"Hello Vue",
      count:1,
    },
    methods:{
        incrementAge:function () {             // 无参数
            this.count++;
        },
        changeAge:function (x) {               // 参数为单独变量
            this.count = this.count + x;
        },
        changeAgeAndMsg:function (param) {     // 参数为对象
            this.count = this.count +param.count;
            this.msg = this.msg + param.msg;
        }
    }
  })
</script>

v-on指令基本使用2之简化写法@绑定事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <h1>年龄:{{count}}</h1>
    <!--
      v-on指令:用来给对应标签绑定特定事件
      v-on指令简化写法      @   语法: @事件名=事件处理函数名
    -->
    <button v-on:click="incrementAge">点我每次给年龄+1</button>
    <!--简化写法-->
    <button @click="changeAge(5)">点我年龄+5</button>
  </div>

</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",
    data:{    //  Model
      msg:"Hello Vue",
      count:1,
    },
    methods:{
      incrementAge:function () {
        this.count=this.count +1;
      },
      // 简化写法
      changeAge(x){                  //原始定义函数: 函数名:function(){}   =====> 简化函数:  函数名(){}
        this.count = this.count + x;
      }
    }
  })
</script>

5. v-if、v-show、v-bind指令的使用

v-if v-show指令的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!--
    v-if v-show指令:作用：用来通过vue方式控制页面中那些标签展示和隐藏
                   语法:控制那个标签显示隐藏直接在那个标签上   加入v-if=“true|false|逻辑表达式” v-show=“true|false”
                   区别:
                    1.v-if底层通过控制dom树上元素节点实现页面标签展示和隐藏   dom树
                    2.v-show底层通过控制标签css中display属性实现标签展示和隐藏    css样式
                   使用总结:
                   一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果
                   需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
        -->
    <h2 name="if" v-if="isShow">{{msg}}</h2>
    <h2 name="show" v-if="isShow">{{msg}}</h2>
  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      msg:"Hello Vue",
      isShow:false
    },
    methods:{          // 用来给vue实例定义一系列相关方法

      }
  })
</script>

<div id="jsRYopUU3l" style="display: none;"></div>       // v-show

v-if、v-show的案例(一)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!-- 管理状态     -->
    <h2 v-show="isShow">{{msg}}</h2>

    <button @click="hideH2">用来隐藏h2标签</button>
    <button @click="displayH2">用来显示h2标签</button>
    <button @click="hideDisplayh2">用来展示|隐藏h2标签(方法)</button>
    <button @click="isShow=!isShow">用来展示|隐藏h2标签(直接操作data中的属性)</button>

  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      msg:"Hello Vue",
      isShow:true
    },
    methods:{          // 用来给vue实例定义一系列相关方法
        hideH2(){
            this.isShow=false;
        },
        displayH2(){
            this.isShow=true;
        },
        hideDisplayh2(){
            // if(this.isShow){
            //     this.isShow =false;
            // }else{
            //     this.isShow=true;
            // }
            this.isShow =!this.isShow;
        }
      }
  })
</script>

在这里插入图片描述

v-if、v-show的案例(二)

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!--@mouseover 鼠标键入隐藏   -->
    <div style="width:200px;height:200px;background: blue" v-show="isShow" @mouseover="hideDiv"></div>
    <br>
    <div style="width:200px;height:200px;background: blue" v-show="isShow" @mouseover="isShow=false"></div>

  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      msg:"Hello Vue",
      isShow:true
    },
    methods:{          // 用来给vue实例定义一系列相关方法
      hideDiv(){
        this.isShow = false;
      }
      }
  })
</script>

2021/12/23------【编程不良人】2021最新Vue全家桶系列教程

v-bind指令的基本使用:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!--v-bind:    绑定  作用: 用来绑定html标签中某个属性交给vue实例进行管理
                        好处: 一旦属性交给vue实例进行管理之后,日后可以通过修改vue实例中绑定属性达到动态修改标签属性的效果
                        语法: 对应标签上 v-bind:属性名
	   @mouseover:鼠标键入调用方法
       @mouseout:鼠标键出调用方法
       
       通过v-bind:将html标签属性值与data：中的值进行绑定，便于通过调用方法改变data：中的值，进一步动态改变html标签的值
    -->
    <img v-bind:src="src" v-bind:width="width" v-bind:height="height" @mouseover="changeATM" @mouseout="changeMN">
    <br/>
    <button @click="changeATM">点我改变图片</button>
  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      msg:"Hello Vue",
      isShow:true,
      src:src="./images/1.png",
      width:"400",
      height:"400"
    },
    methods:{          // 用来给vue实例定义一系列相关方法
      changeATM(){
        this.src="./images/2.png";
        this.height="200";
        this.width="200"
      },
      changeMN(){
        this.src="./images/1.png";
        this.height="400";
        this.width="400"
        
      }
      }
  })
</script>

v-bind指令的使用之class样式绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
     <style>
       .aa{
         width:200px;
         height:200px;
         border: 10px red solid;
       }

       .bb{
         width:200px;
         height:200px;
         border: 10px green dashed;
       }
     </style>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!--v-bind: 用来将html标签属性绑定vue实例,
       v-bind可以绑定class，进而改变class中的属性值，改变样式
    -->
    <div v-bind:class="style" @mouseover="changeClsBB" @mouseout="changeClsAA"></div>
    <button @click="changeClsBB">点我改变样式为BB</button>
    <button @click="changeClsAA">点我改变样式为AA</button>
  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      style:"aa"
    },
    methods:{          // 用来给vue实例定义一系列相关方法
      changeClsAA(){
        this.style="aa";
      },
      changeClsBB(){
        this.style="bb";
      }
      }
  })
</script>

v-bind指令的使用之简化写法

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
     <style>
       .aa{
         width:200px;
         height:200px;
         border: 10px red solid;
       }

       .bb{
         width:200px;
         height:200px;
         border: 10px green dashed;
       }
     </style>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
      <!--
                  v-bind: 绑定  作用: 将html标签某个属性绑定给vue实例进行管理
                  简化写法  :   语法:    :属性名="属性值"   推荐
          -->
      <div :class="style" @mouseover="changeClsBB" @mouseout="changeClsAA"></div>
    <button @click="changeClsBB">点我改变样式为BB</button>
    <button @click="changeClsAA">点我改变样式为AA</button>
  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
      style:"aa"
    },
    methods:{          // 用来给vue实例定义一系列相关方法
      changeClsAA(){
        this.style="aa";
      },
      changeClsBB(){
        this.style="bb";
      }
      }
  })
</script>

6.v-for指令与v-model指令的使用

v-for指令的基本使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <!--
         v-for指令：  作用：用来在页面中实现Vue数据的遍历
                     语法：直接在对应标签加入for指令
                        a.遍历对象:v-for=“value,key,index in data中的变量名”
                        b.遍历数组：v-for=“item(普通类型元素),index in data中的变量名”
                        c.遍历数组对象:  v-for="item(对象),index in data中变量名"
注意: 在使用v-for 建议尽可能在使用 v-for 时提供 key attribute  key属性唯一
          -->
      <h3>遍历对象</h3>
      <span v-for="value,key,index in user">[{{index}}{{key}}{{value}}]</span>
      <h3>遍历数组</h3>
      <span v-for="item,index in schools " >{{index+1}} {{item}}</span>
      <h3>遍历数组</h3>
      <ul>
          <li v-for="item,index in schools">{{index+1}}{{item}}</li>
      </ul>
      <h4>数组中遍历对象</h4>
      <table border="1">
          <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>工资</th>
              <th>简介</th>
              <th>操作</th>
          </tr>
          <tr v-for="user,index in users" :key="user.id">
              <td>{{user.id}}</td>
              <td>{{user.name}}</td>
              <td>{{user.age}}</td>
              <td>{{user.salary}}</td>
              <td>{{user.content}}</td>
              <td><a href="">删除</a><a href="">修改</a></td>
          </tr>
      </table>

  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
        mag:"Hello Vue",
        user:{id:21,name:"xiaochen",age:23,salary:23000} ,     //定义一个对象
        schools:["河南校区","北京校区","天津校区"],
        users:[
            {id:21,name:"xiaochen",age:23,salary:23000.23,content:"xiaochen是好人"},
            {id:22,name:"xiaoming",age:23,salary:23000.23,content:"xiaoming是一个好奥特曼"},
            {id:23,name:"xiaosan",age:23,salary:23000.23,content:"xiaosan是一个好姑娘"},
        ]

    },
    methods:{          // 用来给vue实例定义一系列相关方法

      }
  })
</script>

结果如下图所示：

在这里插入图片描述

双向绑定机制如下图所示:

在这里插入图片描述

v-mode指令的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
      <!--
            v-bind:   绑定  作用:  用来将html标签的属性进行绑定,交给vue实例管理  除了value属性以外所有属性
            v-model:  模型  作用:  用来将html标签的value属性进行绑定,交给vue实例管理    主要用在表单元素上  最能体现双向绑定机制一个指令
                      语法: 在表单元素标签上 直接加入 v-model="vue实例中一个变量"
        -->
      <input type="text" v-model="msg">

  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
        msg:"Hello Vue",
    },
    methods:{          // 用来给vue实例定义一系列相关方法
      }
  })
</script>

v-model指令的使用之表单提交.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue系列课程之基础入门</title>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
      <form>
          用户名:<input type="text" v-model="user.username"><br>
          密码:<input type="text" v-model="user.password"><br>
          邮箱:<input type="text" v-model="user.email"><br>
          QQ:<input type="text" v-model="user.qq"><br>
          验证码:<input type="text" v-model="user.code"><br>
          <input type="button" @click="reg" value="注册">
      </form>
  </div>
</body>
</html>
  <!--引入vue.js核心文件-->
  <script src="js/vue.js"></script>
  <!--书写vue代码-->
<script>
  var app = new Vue({
    el:"#app",          // 代表vue实例作用范围
    data:{              // 用来vue实例绑定数据
        msg:"Hello Vue",
        user:{},
    },
    methods:{          // 用来给vue实例定义一系列相关方法
        reg(){
            //1.获取form数据
            console.log(this.user);
            //2.发送ajax请求
        }
      }
  })
</script>

7.备忘录小案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>备忘录小案例</title>
      <!--
            1.备忘录列表中数据交给vue管理
            2.添加备忘录
            3.删除备忘录
            4.清空备忘录
            5.备忘录总条数
        -->
    <div id="app">
      <span>请输入内容</span><input type="text" v-model='content'><button @click='add'>添加到备忘录</button>
      <ul>
        <li v-for="(content,index) in list">{{index+1}}.{{content}}<a @click="deletezz(index)" href="javascript:">删除</a></li>
      </ul>
      <button v-show="list.length!=0" @click="list=''">清空备忘录</button><br>
      <ul v-if="list.length==0">
        <li><span style="color:red;">当前备忘录中还没有任何数据!!!</span></li>
      </ul>
      <span>当前备忘录共:{{list.length}}条信息</span>
    </div>

</head>
<body>

</body>
</html>
<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      list:['今天晚上吃好吃的,吃什么,吃烤鸭','今天晚上一起打游戏','今天晚上一起学习'],
      content:'',
    },
    methods:{
      add(){
        if(!this.content){
          alert("请输入内容");
          return false;
        }
          this.list.push(this.content);
          this.content='';
        },
      deletezz(index){
        this.list.splice(index,1);
      }
    }
  })
</script>
灵动鱼
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——vue
xiongzhouxiong的博客
04-13 2381
VUEVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，相比于jQuery关注DOM，Vue更关注于数据。Vue的优点：vue轻量级，使用熟悉的js语法，入门上手比较快...
JavaWeb『Vue.js』快速入门
不会敲代码的z的博客
06-02 1557
这是基于javaweb学习的vue基础知识，能大概了解vue的基础用法......
还在用SWT开发UI吗-用JCEF吧
AddionLee的博客
11-21 1825
SWT, Java Chrome Jcef Chromium 浏览器 UI优化
JavaWeb——Vue
mxyjsu2021的博客
04-30 1489
Vue.js是一个流行的前端JavaScript框架，用于构建单页应用程序和可重用组件。Vue.js的设计目标是提供一种简单的方法来构建Web应用程序，同时尽可能地灵活和高效。Vue.js也被称为MVVM(Model-View-ViewModel)框架，因为它将应用程序的状态和行为分离成模型(model)、视图(view)和视图模型(viewmodel)的组件。官网：Vue.js修改变量的值，标签值自动变化；反过来，修改标签的值，变量的值也跟着更新，这就是双向绑定。
javaweb—Vue
最新发布
m0_70851493的博客
06-06 503
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型，基于框架进行开发，更加快捷，更加高效。
Java JCEF集成Chromium
AddionLee的博客
11-21 4772
目录 一. 前言 二. 构建 1. 前期准备 (1) JDK 1.8_271 32 bit (2)eclipse (3) 编译好的32 bit JCEF 2. 验证一下编译的JCEF能不能跑 3. 在eclipse 创建一个项目 4. 拷贝JCEF依赖 4. 配置Native Library(重要) 5. 删掉不需要的包 6. 试跑 三. 总结 一. 前言 假设你已经看了还在用SWT开发UI吗-用JCEF吧, 那么这篇文章正式要使用Eclipse去使用...
【JCEF】基于SWT和VUE的JCEF嵌入
weixin_46947972的博客
08-09 228
根据上篇的文章，会发现，其中用到的Browser方法，他只能用于IE浏览器内核，IE？？？？IE？？？还是算了，我要弄基于谷歌浏览器的（IE不支持Vue.....）运行不显示....
【Java生态前后端】开发web应用使用到的技术 & Vue框架+Java开发Web应用的步骤
JosieBook
06-07 3420
介绍一些开发web应用使用到的技术，以及使用Vue+Java的方式开发Web应用的过程和步骤。通过以上内容的了解，可对web应用前后端开发建立一个初步的认知。
JavaWeb-Vue
10-08
JavaWeb-Vue是一个结合了JavaWeb技术和Vue.js前端框架的学习资源集合。Vue.js是一个轻量级的JavaScript库，被广泛用于构建用户界面，尤其适用于单页面应用（SPA）。它以其易学易用、灵活和高性能的特点深受开发者...
基于javaweb+vue+mysql的课程管理系统源码.zip
08-22
基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程...
javaweb+vue的共享音乐网站javaweb_vue_music.zip
04-15
音乐商城是一个在线平台，用于销售音乐作品，包括数字音乐、CD、唱片、演唱会门票等。以下是音乐商城的一般分析： ...【引流】 编程语言和开发技术：如Java、$C++、Python、JavaScript、Ruby等。 数据库技术：如关系型...
JavaWeb网页，vue+springboot+mybatisplus，老年管理平台
07-16
在本项目中，我们主要探讨的是一个基于JavaWeb技术栈的老年管理平台的构建，它融合了现代化的前端框架Vue.js、后端轻量级框架SpringBoot以及数据库操作组件MyBatisPlus。这个平台旨在为老年人提供一个集游戏、购物、...
14_JavaWeb——Vue配套资源
05-09
- **组件化**：Vue的强大之处在于其组件系统。每个组件都可以视为一个独立的可复用的UI部分，有自己的模板、数据和方法。通过组合组件，可以构建复杂的用户界面。 - **计算属性和侦听器**：计算属性是基于响应式...
JavaWeb—Vue的简单介绍
weixin_45890113的博客
01-28 1701
概述数据渲染特点开发步骤①引入vue.js②定义一个div作为vue的容器③创建vue对象 3 Vue的格式 4 Vue指令介绍 概述 Vue指令就是带""前缀的特殊属性 , 比如: , , , … 5 Vue文本操作 概述 通过v-text, v-html, 插值表达式将vue数据插入到html标签内容中 v-text : 不能解析html标签 , 可以解决插值闪烁 v-html : 可以解析html标签 ,可以解决插值闪烁 插值表达式 : 不能解析html标签 , 不能解决插值闪烁
[Java Web]VUE | vue：一项Java Web开发中不可或缺的前端技术
逐梦苍穹的博客
04-11 965
Vue是一个流行的JavaScript前端框架，用于构建用户界面。
JavaWeb—vue（基础知识）
夏日漱石的博客
04-02 587
JavaWeb—vue（基础知识）
JavaWeb开发 —— Vue框架
hdakj22的博客
04-12 550
Vue框架的概述、Vue的简单入门、Vue的常见指令以及Vue的生命周期
JavaWeb+VUE项目前后端交互
2302_77790337的博客
01-04 1542
/1.导入axios//2.创建axios对象//指定公共的请求前缀,暂时不需要上下文,使用/代替})//3.添加拦截器},},//4.默认导出js向服务器发起请求//页面加载完成之后 调用该函数ajaxGet()})//向服务器发送Ajax get请求 并且需要携带参数。
03.VUE
qq_37636795的博客
02-10 406
Vue 1. 学习目标 了解什么是框架 了解什么是Vue 掌握Vue的基本语法 了解Vue的生命周期 2. 内容讲解 2.1 什么是框架 任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。 于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。 在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。 对于Java程序来说
javaweb阅读vue
02-02
如果你想在JavaWeb中使用Vue，可以通过以下步骤进行： 1. 引入Vue：在你的JavaWeb项目中，可以通过在HTML文件中引入Vue的CDN链接或者将Vue的源代码下载到本地并引入到项目中。 2. 创建Vue组件：在JavaWeb项目中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值