4.vue与webstorm

最新推荐文章于 2024-01-02 23:55:28 发布

Hik58379162

最新推荐文章于 2024-01-02 23:55:28 发布

阅读量550

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_58379162/article/details/130165366

版权

本文介绍了Vue.js的基础知识，包括在WebStorm中创建Vue工程，Vue的常用指令如v-text、v-html、v-on、v-show、v-if、v-bind、v-for和v-model的使用，以及如何利用axios发送异步请求。

摘要由CSDN通过智能技术生成

目录：

1. vue简介

2. 在webstorm中创建工程
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求

1. vue简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2. 在webstorm中创建工程

2.1引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

这里我们可以从官网上进行下载：如下链接

安装 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/installation.html

2.2body创建一个div标签

<body>
    <div id="app">
        {{msg}}
    </div>
</body>

2.3创建自己的js代码

  <script type="text/javascript">
        //创建一个vue对象
      var app=new Vue({
            //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
            //数据
            data:{
                 msg:"哈哈哈哈",
            }
      })
  </script>

2.4 el属性:

把当前vue对象挂载到指定的标签元素上，使其vue生效。

2. vue指令

2.1 v-text 和v-html

设置标签的文本值(textContent)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>

          <span v-text="msg">你喜欢什么?</span><hr>
           <!--v-text:无法解析html标签  v-html可以解析html标签-->
          <span v-html="msg">你喜欢什么?</span>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>我喜欢打麻将</font>",
            }
      })
</script>
</html>

2.2 v-on基础

为元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <span>{{msg}}</span><hr>
          <button v-on:click="fun">点击</button>
        <!--上面的v-on:缩写为@-->
          <button @dblclick="fun">点击2</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>我喜欢打麻将</font>",
            },
            //定义方法
            methods:{
                 fun(){
                     //this表示vue对象
                     this.msg="我喜欢打篮球";
                 },
                 fun2(){

                 }
            }
      })
</script>
</html>

2.3 v-show 和v-if

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
          <img src="imgs/sg.jpg" width="200" v-show="age>18&&age<36"/>
        <hr>
        <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
        <img src="imgs/1.jpg" width="200" v-if="age>18&&age<36"/>
        <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:18
            },
            methods:{
                 fun(){
                      this.age++;
                 }
            }
      })
</script>
</html>

2.4 v-bind

设置元素的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
         .a{
              border: red solid 5px;
         }
    </style>
</head>
<body>
    <div id="app">
          <!--如何让img标签中src属性引用vue对象中的数据-->
          <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

        <!--v-bind: 缩写为: -->
         <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>

           <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:18,
                imgUrl:"imgs/sg.jpg",
                title:"帅哥",
                flag:true
            },
            methods:{
                 fun(){
                      this.imgUrl="imgs/1.jpg";
                      this.title="美女好看"
                 }
            }
      })
</script>
</html>

2.5 v-for与@keyup.enter

循环数据与绑定enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <!--for(数据类型 b:数组){}-->
             <li v-for="(item,index) in hobby">
                 {{item}}--->{{index}}
             </li>
         </ul>

         <table width="500px" border="1" cellspacing="0" class="0">
               <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
               </tr>
              <tr v-for="item in users">
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.sex}}</td>
                   <td>
                       <button @click="deleteUser(item.name)">删除</button>
                       <button >编辑</button>
                   </td>
              </tr>
         </table>


         <input type="text" @keyup.enter="fun()"/>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 hobby:["好吃","好喝","好色","好赌"],
                 users:[
                     {"name":"嘻嘻嘻","age":16,"sex":"女"},
                     {"name":"哈哈哈,"age":19,"sex":"男"},
                     {"name":"哦哦怕","age":15,"sex":"男"}
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>

2.6 v-model

获取和设置表单元素的值. input select textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
           <input type="text" v-model="name" />
           {{name}}
           <button @click="dj">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                name:"刘德华"
            },
            methods:{
                 dj(){
                    this.name="张学友";
                 }
            }
      })
</script>
</html>

3. vue中常用的指令

v-text: -----v-html

v-on:-----@

v-show:-----v-if

v-bind: 标签属性绑定----:

v-for: 循环

v-model:表单元素的双向绑定

4. vue结合axios以及后台代码

我们可以进入官网导入CDN：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我们只需粘贴 https://unpkg.com/axios/dist，进行粘贴即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>查询</title>
</head>

<body>
<div class="wrap" id="app">
    <table width="300" border="1">
        <tr>
            <td>学号</td>
            <td>学生姓名</td>
        </tr>
        <tr v-for="item in emps">
            <td>{{item.sid}}</td>
            <td>{{item.sname}}</td>
        </tr>
    </table>
    <button class="input_sub" @click="searchWeather">
        搜 索
    </button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="../js/axios.min.js"></script>
<!-- 自己的js -->
<script>
    let app=new Vue({
        el:"#app",
        data:{
            studentVo:{},
            emps:[],
        },
        methods:{
            searchWeather(){
                axios.post("http://localhost:8080/AllS/1/2",this.studentVo).then(result=>{
                    console.log(result.data.data)
                    this.emps=result.data.data.records;
                })
            }
        }
    })
</script>



</body>
</html>