Vue简单使用

最新推荐文章于 2023-10-08 14:57:52 发布

Naaaaa.a

最新推荐文章于 2023-10-08 14:57:52 发布

阅读量215

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44189274/article/details/124951231

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 什么是Vue

1.1. 如何使用vue

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div id="app">
       <%--使用vue这种定义得数据 这是vue得语法--%>
       {{name}}<br>
       {{age}}
     </div>
      
     
  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
      //把该对象挂载到div标签上 el属性是必有
      el: "#app",
      //data:数据区 定义一些数据 这些数据得类型可以是任意类型。
      data: {
          name:"张三",
          age: 15,
          hobby:["游泳","看书","玩游戏"],
      }

    })
  </script>
</html>

总结: (1)导入vue.js文件（2）创建一个双标签: (3) 创建一个vue对象并使用el挂载到双标签上。

1.2. el挂载点

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

可以，一般使用id，因为id是唯一的。

是否可以设置其他的dom元素呢？

可以，必须该dom是一个双标签。不能是body html标签

1.3. data属性

定义vue得数据。可以定义为任意类型得数据。

1.4. 本地应用

Vue指定: 以v-开始，并且可以在标签内容使用得。vue可以解析这个指令。

1.4.1 v-text和v-html

设置标签的文本值(textContent)

v-text:不能解析html标签
v-html: 可以解析html标签。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div id="app">
            <%--使用{{}}显示标签内容--%>
            <span>{{name}}你好</span><br>
              <%--设置span得内容 会把span中得原来得内容覆盖--%>
            <span v-text="name">你好</span>
     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:"#app",
          data:{
              name:"刘德华",
              age:18,
              hobby:["你好","大家好"]
          }
    })
  </script>
</html>

1.4.2 v-on指令

为元素绑定事件

在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div class="app">
          {{age}}<br>

         <%--绑定点击事件--触发add方法。在vue中定义方法。如果方法是无参可以省略（）--%>
         <input type="button" value="点击" v-on:click="add"/><br>
         <%--vue提供了一种简洁模式@等价于v-on:--%>
         <input type="button" value="点击2" @click="sub"/><br>
     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:".app",
          data:{
              name:"刘德华",
              age:18,
              hobby:["你好","大家好"]
          },
          //表示vue中定义得方法。
          methods:{
               //无需添加function关键字
               add(){
                    //使用上面得data数据. this当前类对象 Vue对象
                    this.age++;
               },
               sub(){
                    this.age--;
               }

          }
    })
  </script>
</html>

1.4.3 v-show和v-if

根据表达值的真假,切换元素的显示和隐藏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div class="app">
         {{age}}<br>
         <%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%>
          <img src="imgs/1.jpg" width="100" height="200" v-show="age>18&&age<25"/>
         <%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高，那么该标签得效率会低--%>
          <img src="imgs/1.jpg" width="100" height="200" v-if="age>18&&age<25"/>
          <br>
          <input type="button" value="点检" @click="fun"/>

     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:".app",
          data:{
                flag:true,
                age:17,
          },
          methods:{
               fun(){
                    this.age++;
               }
          }
    })
  </script>
</html>

1.4.4 v-bind

设置元素的属性绑定元素得属性值。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .myimg {
            border: 2px solid red;
        }
    </style>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
    <%--v-bind:设置标签得属性--%>
    <img v-bind:src="imgSrc" width="100px" height="100px" v-bind:class="flag?'myimg':''"/>

    <%--vue提供了一种简洁模式:  省略v-bind  --%>
    <img :src="imgSrc" width="100px" height="100px" :class="flag?'myimg':''"/><br>
    <input type="button" value="点击" @click="fun"/>
</div>

</body>

<script>
    /*创建一个Vue对象*/
    var app = new Vue({
        //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
        el: ".app",
        data: {
            imgSrc: "imgs/1.jpg",
            flag: true
        },
        methods: {
            fun() {
                this.imgSrc = "imgs/dl.jpg";
                this.flag = !this.flag
            }
        }
    })
</script>
</html>

1.4.5 v-for

循环遍历指令

v-for="(变量名,下标) in 数组|集合"

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div class="app">
           <ul>
                <li v-for="(a,index) in hobby">{{index}}---->{{a}}</li>
           </ul>

           <table border="1" width="200" cellpadding="0" cellspacing="0">
                <tr v-for="(item,index) in peoples">
                    <td>{{index}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.address}}</td>
                </tr>
           </table>
     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:".app",
          data:{
              hobby:["游泳","爬山","看书"],
              peoples:[
                  {"name":"张三1","age":15,"address":"郑州1"},
                  {"name":"张三2","age":15,"address":"郑州2"},
                  {"name":"张三3","age":15,"address":"郑州3"}
              ]
          }
    })
  </script>
</html>

1.4.6 v-on补充

传递自定义参数,事件修饰符

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签--%>
     <div class="app">
       <table border="1" width="200" cellpadding="0" cellspacing="0">
         <tr v-for="(item,index) in peoples" >
           <td>{{index}}</td>
           <td>{{item.name}}</td>
           <td>{{item.age}}</td>
           <td>{{item.address}}</td>
           <td>
               <a @click="del(item)">删除</a>
           </td>
         </tr>
       </table>

       <%--keyup:键盘弹起事件  enter:回车键--%>
       <input type="text" name="name" @keyup.enter="show('hello')"/>
     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:".app",
          methods:{
              del(n){
                 console.log(n);//浏览器控制台输出
              },
              show(c){
                  alert("触发了回车键"+c);
              }
          },
          data:{
            peoples:[
              {"name":"张三1","age":15,"address":"郑州1"},
              {"name":"张三2","age":15,"address":"郑州2"},
              {"name":"张三3","age":15,"address":"郑州3"}
            ]
          }
    })
  </script>
</html>

1.4.7 v-model

获取和设置表单元素的值

哪些是表单元素?
<input type="text|password|hidden|radio|checkbox"/>
<select>
<textarea>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--导入vue得脚本--%>
    <script type="text/javascript" src="js/vue.js"></script>

  </head>
  <body>
     <%--创建一个双标签
         v-model它属于双向绑定:如果输入框发送改变，属性name也会跟着变。
         如果name属性改变，则输入得内容也会改变。
     --%>
     <div class="app">
           {{name}}<br>
           <input type="text" v-model="name"/><button @click="fun">点击</button>
     </div>

  </body>

  <script>
    /*创建一个Vue对象*/
    var app = new Vue({
          //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
          el:".app",
          data:{
              name:"张三",
          },
          methods:{
               fun(){
                   this.name="刘德华"
               }
          }
    })
  </script>
</html>

2.练习

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>小黑记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
          v-model="content"
          @keyup.enter="add"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item,index) in hobby">
            <div class="view">
              <span class="index">{{index+1}}.</span> <label>{{item}}</label>
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> items left </span>
        <button class="clear-completed">
          Clear
        </button>
      </footer>
    </section>
    <!-- 底部 -->
    <footer class="info">
      <p>
        <a href="http://www.baidu.com"
          ><img src="./img/logo.png" alt=""
        /></a>
      </p>
    </footer>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>

    <script>
        var app=new Vue({
              el:"#todoapp",
              data:{
                   //列表内容
                   hobby:["吃饭","睡觉","打豆豆"],
                   //输入框内容
                   content:"",
              },
              methods:{
                   add(){
                       //往数组中添加输入得值
                       this.hobby.push(this.content);
                   },
                   remove(index){
                         //移除数组中指定下标得元素 从哪开始移除  移除得个数
                         this.hobby.splice(index,1);
                   }
              }
        })
    </script>

  </body>
</html>

3.网络应用

Vue结合网络数据开发应用。调用服务器获取网络数据。vue结合axios完成网络请求。

axios是功能强大的网络请求库，

axios发送网络请求得语法:

axios.get(url?key=value&key2=value2).then(function(result){},function(error){})

axios.post(url,{key:value,key:value}).then(function(result){},function(error){})

可以访问第三方得服务器。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
      <div id="app">
           <button @click="getPlay">获取笑话</button>
            <ul>
                 <li v-for="p in plays">{{p}}</li>
            </ul>
      </div>

<script>
      var app=new Vue({
            el:"#app",
            data:{
                plays:[],
            },
            methods:{
                  getPlay(){
                      var _this=this; //
                        //不能使用this  因为这里得this标识axios对象。
                      axios.get("https://autumnfish.cn/api/joke/list?num=5").then(function(result){
                          _this.plays=result.data.jokes
                      })
                  }
            }
      })
</script>
</body>
</html>

Naaaaa.a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue简单使用

1.什么是Vue1.1.如何使用vue<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> <%--导入vue得脚本--%> <script type="text/javascript" src="js/vue.js"></..
复制链接

扫一扫