• Vue前端框架的使用

    目录

    一、什么是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

            1.2 如何使用Vue

    1. 引入Vue.js
    2. 创建Vue对象
    3. 把Vue对象挂载到一个Html双向标签上
    1.     html>
    2.     <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title>Titletitle>
    6.         
    7.         <script type="text/javascript" src="/js/vue.js">script>
    8.     head>
    9.     <body>
    10.  
    11.     
    12.     <div id="app">
    13.         {{msg}}
    14.     div>
    15.     body>
    16.     
    17.     <script>
    18.          /*创建Vue对象*/
    19.          var app=new Vue({
    20.               //el:表示把vue对象挂载到哪个表示上
    21.               el:"#app",
    22.               //data:vue中的数据
    23.               data:{
    24.                   msg:"老闫真牛连vue也会，他是被逼的2。",
    25.               }
    26.          })
    27.     script>
    28.     html>

            1.3 el挂载点

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

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

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

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

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

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

            1.4 date属性

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

    2. <div id="app">
    3.     {{msg}}
    4.     <p>{{msg}}p>
    5.     {{hobby}}<br>
    6.     {{people.name}}
    7. div>
    8.  
    9. <div>
    10.     {{msg}}
    11. div>
    12. body>
    14. <script>
    15.      /*创建Vue对象*/
    16.      var app=new Vue({
    17.           //el:表示把vue对象挂载到哪个表示上
    18.           el:"#app",
    19.           //data:vue中的数据
    20.           data:{
    21.               msg:"老闫真牛连vue也会，他是被逼的2。",
    22.               age: 15,
    23.               hobby:["吸烟","喝酒","打牌","钓鱼"],
    24.               people:{"name":"刘德华","age":18,"address":"香港"}
    25.  
    26.           }
    27.      })
    28. script>

             二、Vue的指令

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script type="text/javascript" src="js/vue.js">script>
    8. head>
    9. <body>
    10.  
    12. <div id="app">
    13.     
    14.    <p v-text="msg">你好李焕英p>
    15.     <p>你好李焕英{{msg}}p>
    16.     
    17.     <p v-html="msg">p>
    18. div>
    19.  
    20.  
    21. body>
    23. <script>
    24.      /*创建Vue对象*/
    25.      var app=new Vue({
    26.           //el:表示把vue对象挂载到哪个表示上
    27.           el:"#app",
    28.           //data:vue中的数据
    29.           data:{
    30.               msg:"老闫真牛连vue也会，他是被逼的2。",
    31.               age: 15,
    32.               hobby:["吸烟","喝酒","打牌","钓鱼"],
    33.               people:{"name":"刘德华","age":18,"address":"香港"}
    34.  
    35.           }
    36.      })
    37. script>
    38. html>

            2.2 Vue指令（v-on）

            为元素绑定事件，  等价于onclick      在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})

    1.  
    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4.   <head>
    5.     <title>$Title$title>
    6.     <%--导入vue得脚本--%>
    7.     <script type="text/javascript" src="js/vue.js">script>
    8.  
    9.   head>
    10.   <body>
    11.      <%--创建一个双标签--%>
    12.      <div class="app">
    13.           {{age}}<br>
    14.  
    15.          <%--绑定点击事件--触发add方法。在vue中定义方法。如果方法是无参可以省略（）--%>
    16.          <input type="button" value="点击" v-on:click="add"/><br>
    17.          <%--vue提供了一种简洁模式@等价于v-on:--%>
    18.          <input type="button" value="点击2" @click="sub"/><br>
    19.      div>
    20.  
    21.   body>
    22.  
    23.   <script>
    24.     /*创建一个Vue对象*/
    25.     var app = new Vue({
    26.           //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
    27.           el:".app",
    28.           data:{
    29.               name:"刘德华",
    30.               age:18,
    31.               hobby:["你好","大家好"]
    32.           },
    33.           //表示vue中定义得方法。
    34.           methods:{
    35.                //无需添加function关键字
    36.                add(){
    37.                     //使用上面得data数据. this当前类对象 Vue对象
    38.                     this.age++;
    39.                },
    40.                sub(){
    41.                     this.age--;
    42.                }
    43.  
    44.           }
    45.     })
    46.   script>
    47. html>

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

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

    1.  
    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4.   <head>
    5.     <title>$Title$title>
    6.     <%--导入vue得脚本--%>
    7.     <script type="text/javascript" src="js/vue.js">script>
    8.  
    9.   head>
    10.   <body>
    11.      <%--创建一个双标签--%>
    12.      <div class="app">
    13.          {{age}}<br>
    14.          <%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%>
    15.           <img src="imgs/1.jpg" width="100" height="200" v-show="age>18&&age<25"/>
    16.          <%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高，那么该标签得效率会低--%>
    17.           <img src="imgs/1.jpg" width="100" height="200" v-if="age>18&&age<25"/>
    18.           <br>
    19.           <input type="button" value="点检" @click="fun"/>
    20.  
    21.      div>
    22.  
    23.   body>
    24.  
    25.   <script>
    26.     /*创建一个Vue对象*/
    27.     var app = new Vue({
    28.           //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
    29.           el:".app",
    30.           data:{
    31.                 flag:true,
    32.                 age:17,
    33.           },
    34.           methods:{
    35.                fun(){
    36.                     this.age++;
    37.                }
    38.           }
    39.     })
    40.   script>
    41. html>

            2.4 Vue指令（v-bind）

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

    1.  
    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4. <head>
    5.     <title>$Title$title>
    6.     <%--导入vue得脚本--%>
    7.     <script type="text/javascript" src="js/vue.js">script>
    8.     <style>
    9.         .myimg {
    10.             border: 2px solid red;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15. <%--创建一个双标签--%>
    16. <div class="app">
    17.     <%--v-bind:设置标签得属性--%>
    18.     <img v-bind:src="imgSrc" width="100px" height="100px" v-bind:class="flag?'myimg':''"/>
    19.  
    20.     <%--vue提供了一种简洁模式:  省略v-bind  --%>
    21.     <img :src="imgSrc" width="100px" height="100px" :class="flag?'myimg':''"/><br>
    22.     <input type="button" value="点击" @click="fun"/>
    23. div>
    24.  
    25. body>
    26.  
    27. <script>
    28.     /*创建一个Vue对象*/
    29.     var app = new Vue({
    30.         //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
    31.         el: ".app",
    32.         data: {
    33.             imgSrc: "imgs/1.jpg",
    34.             flag: true
    35.         },
    36.         methods: {
    37.             fun() {
    38.                 this.imgSrc = "imgs/dl.jpg";
    39.                 this.flag = !this.flag
    40.             }
    41.         }
    42.     })
    43. script>
    44. html>

             2.5 Vue指令（v-for）

            根据数据生成列表结构  循环遍历指令   v-for="(变量名,下标) in 数组|集合"

    1.  
    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4.   <head>
    5.     <title>$Title$title>
    6.     <%--导入vue得脚本--%>
    7.     <script type="text/javascript" src="js/vue.js">script>
    8.  
    9.   head>
    10.   <body>
    11.      <%--创建一个双标签--%>
    12.      <div class="app">
    13.            <ul>
    14.                 <li v-for="(a,index) in hobby">{{index}}---->{{a}}li>
    15.            ul>
    16.  
    17.            <table border="1" width="200" cellpadding="0" cellspacing="0">
    18.                 <tr v-for="(item,index) in peoples">
    19.                     <td>{{index}}td>
    20.                     <td>{{item.name}}td>
    21.                     <td>{{item.age}}td>
    22.                     <td>{{item.address}}td>
    23.                 tr>
    24.            table>
    25.      div>
    26.  
    27.   body>
    28.  
    29.   <script>
    30.     /*创建一个Vue对象*/
    31.     var app = new Vue({
    32.           //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
    33.           el:".app",
    34.           data:{
    35.               hobby:["游泳","爬山","看书"],
    36.               peoples:[
    37.                   {"name":"张三1","age":15,"address":"郑州1"},
    38.                   {"name":"张三2","age":15,"address":"郑州2"},
    39.                   {"name":"张三3","age":15,"address":"郑州3"}
    40.               ]
    41.           }
    42.     })
    43.   script>
    44. html>

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

            调用事件方法时可以传递参数   传递自定义参数,事件修饰符

    1.  
    2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4.   <head>
    5.     <title>$Title$title>
    6.     <%--导入vue得脚本--%>
    7.     <script type="text/javascript" src="js/vue.js">script>
    8.  
    9.   head>
    10.   <body>
    11.      <%--创建一个双标签--%>
    12.      <div class="app">
    13.        <table border="1" width="200" cellpadding="0" cellspacing="0">
    14.          <tr v-for="(item,index) in peoples" >
    15.            <td>{{index}}td>
    16.            <td>{{item.name}}td>
    17.            <td>{{item.age}}td>
    18.            <td>{{item.address}}td>
    19.            <td>
    20.                <a @click="del(item)">删除a>
    21.            td>
    22.          tr>
    23.        table>
    24.  
    25.        <%--keyup:键盘弹起事件  enter:回车键--%>
    26.        <input type="text" name="name" @keyup.enter="show('hello')"/>
    27.      div>
    28.  
    29.   body>
    30.  
    31.   <script>
    32.     /*创建一个Vue对象*/
    33.     var app = new Vue({
    34.           //挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
    35.           el:".app",
    36.           methods:{
    37.               del(n){
    38.                  console.log(n);//浏览器控制台输出
    39.               },
    40.               show(c){
    41.                   alert("触发了回车键"+c);
    42.               }
    43.           },
    44.           data:{
    45.             peoples:[
    46.               {"name":"张三1","age":15,"address":"郑州1"},
    47.               {"name":"张三2","age":15,"address":"郑州2"},
    48.               {"name":"张三3","age":15,"address":"郑州3"}
    49.             ]
    50.           }
    51.     })
    52.   script>
    53. html>

            2.7  Vue指令（v-model）

            获取和设置==表单元素==的值   （双向数据绑定）

            哪些是表单元素