Vue前端框架的使用

谁践踏了优雅 2023-10-03 20:23 9阅读 0赞

**目录**

一、什么是Vue

1.2 如何使用Vue

1.3 el挂载点

1.4 date属性

二、Vue的指令

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

2.2 Vue指令（v-on）

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

2.4 Vue指令（v-bind）

2.5 Vue指令（v-for）

2.6 Vue指令（v-on的补充）

2.7 Vue指令（v-model）

三、总结

--------------------

## 一、什么是Vue ##

![49be91aa8d61494c964fe666772eb3fa.png][]

####  1.2 如何使用Vue ####

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

<!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">
            {
       {msg}}
        </div>
        </body>
        
        <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>
    
    <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>
        
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    
    
    <div id="app">
        
       <p v-text="msg">你好李焕英</p>
        <p>你好李焕英{
       {msg}}</p>
        
        <p v-html="msg"></p>
    </div>
    
    
    </body>
    
    <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 --设置和获取表单元素的值**

[49be91aa8d61494c964fe666772eb3fa.png]: https://img-blog.csdnimg.cn/49be91aa8d61494c964fe666772eb3fa.png