Vue前端框架的使用

最新推荐文章于 2024-06-24 19:32:32 发布

一条要上岸的鱼

最新推荐文章于 2024-06-24 19:32:32 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签：前端框架 vue.js 前端

本文链接：https://blog.csdn.net/wk3510/article/details/126939757

版权

Vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

2.1 Vue指令（v-text v-html）

2.2 Vue指令（v-on）

2.3 Vue指令（v-show v-if）

一、什么是Vue

1.2 如何使用Vue

引入Vue.js
创建Vue对象
把Vue对象挂载到一个Html双向标签上

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--①引入vue.js-->
        <script type="text/javascript" src="/js/vue.js"></script>
    </head>
    <body>

    <!--②创建一个双标签-->
    <div id="app">
        {{msg}}
    </div>
    </body>
    <!--③创建自己的js代码-->
    <script>
         /*创建Vue对象*/
         var app=new Vue({
              //el:表示把vue对象挂载到哪个表示上
              el:"#app",
              //data:vue中的数据
              data:{
                  msg:"老闫真牛连vue也会，他是被逼的2。",
              }
         })
    </script>
    </html>

1.3 el挂载点

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

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

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

可以的，一般我们使用id选择器，因为id选择器是唯一的

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

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

1.4 date属性

data表示vue中定义的数据变量。数据可以时对象，数组，普通数据类型【int double string】

<!--②创建一个双标签-->
<div id="app">
    {{msg}}
    <p>{{msg}}</p>
    {{hobby}}<br>
    {{people.name}}
</div>

<div>
    {{msg}}
</div>
</body>
<!--③创建自己的js代码-->
<script>
     /*创建Vue对象*/
     var app=new Vue({
          //el:表示把vue对象挂载到哪个表示上
          el:"#app",
          //data:vue中的数据
          data:{
              msg:"老闫真牛连vue也会，他是被逼的2。",
              age: 15,
              hobby:["吸烟","喝酒","打牌","钓鱼"],
              people:{"name":"刘德华","age":18,"address":"香港"}

          }
     })
</script>

二、Vue的指令

2.1 Vue指令（v-text v-html）

        相当于标签中的属性，加在标签内。      设置标签的文本值（textContent）

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--①引入vue.js-->
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<!--②创建一个双标签-->
<div id="app">
    <!--v-text:会把该标签内的原来内容覆盖-->
   <p v-text="msg">你好李焕英</p>
    <p>你好李焕英{{msg}}</p>
    <!--v-html和v-text的区别v-html可以解析html标签-->
    <p v-html="msg"></p>
</div>


</body>
<!--③创建自己的js代码-->
<script>
     /*创建Vue对象*/
     var app=new Vue({
          //el:表示把vue对象挂载到哪个表示上
          el:"#app",
          //data:vue中的数据
          data:{
              msg:"<font color='red'>老闫</font>真牛连vue也会，他是被逼的2。",
              age: 15,
              hobby:["吸烟","喝酒","打牌","钓鱼"],
              people:{"name":"刘德华","age":18,"address":"香港"}

          }
     })
</script>
</html>

2.2 Vue指令（v-on）

为元素绑定事件，等价于onclick 在元素上使用ο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>

2.3 Vue指令（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>

2.4 Vue指令（v-bind）

设置元素的属性（比如 : src,title,class）设置元素的属性绑定元素得属性值


<%@ 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>

2.5 Vue指令（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>

2.6 Vue指令（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>

2.7 Vue指令（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>

三、总结

（1）创建Vue对象

        var app = new Vue({

                el:"",
                date:{

                },
                methods:{

                },
      })

（2）Vue指令

        -v-text v-html

        -v-on（补充传递参数   键盘事件）

        -v-show v-if

        -v-bind

        -v-for

        -v-model --设置和获取表单元素的值