1.Vue指令之v-bind

1.1代码案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <!--    v-bind:绑定html元素的属性值-->
  12.       <font v-bind:color="color" v-bind:size="size">刘小鸿</font>
  13.       <hr/>
  14.       <!--    简写:html元素的属性值,这种方式直接冒号-->
  15.       <font :color="color1" :size="size2">刘小鸿2号</font>
  16.       <hr/>
  17.       <!--    拼接多个元素-->
  18.       <font :color="color+color1" size="3px">刘小鸿3号</font>
  19.       <!--    url传值-->
  20.       <a :href="'http://www.baidu.com?id='+id">百度</a>
  21.     </div>
  22.     <script type="text/javascript">
  23.       var vue = new Vue({
  24.         el:"#app",
  25.         data:{
  26.           color:"red",
  27.           color1:"blue",
  28.           color2:"yellow",
  29.           size:"7px",
  30.           id:3
  31.         }
  32.       })
  33.     </script>
  34.   </body>
  35. </html>

2.Vue指令之v-on

2.1v-on指令

image.png

2.2v-on常用事件

image.png

2.3代码案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app2">
  12.     x值:<input type="text" v-model.number="x"/><br/>
  13.     y值:<input type="text" v-model.number="y"/><br/>
  14.     结果值:<h2>{{sum}}</h2>
  15.     <button type="button" @click="add" value="计算1">提交</button>
  18. </div>
  19. <script type="text/javascript">
  21.     var vue2=new Vue({
  22.         el:"#app2",
  23.         data:{
  24.             x:0,
  25.             y:0,
  26.             sum:0
  27.         },
  28.         methods: {
  29.             add() {
  30.                 //this指的是vue对象
  31.                 this.sum = this.x+this.y
  32.             }
  33.         }
  34.     });
  35. </script>
  36. </body>
  37. </html>

3.Vue-按键修饰符

3.1按键修饰符

image.png

3.2常用按键修饰符

image.png

3.3代码案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app2">
  12.     姓名:<input type="text" @keyup.enter="show()"/>
  16. </div>
  17. <script type="text/javascript">
  19.     var vue2=new Vue({
  20.         el:"#app2",
  22.         methods: {
  23.             add() {
  24.                 //this指的是vue对象
  25.                 this.sum = this.x+this.y
  26.             },
  27.             show(){
  28.                 alert("zzzzzzzzzzzzz");
  29.             }
  30.         }
  31.     });
  32. </script>
  33. </body>
  34. </html>

4.Vue指令之v-text和v-html

4.1作用

image.png

4.2示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app2">
  11. <!--    只显示文本-->
  12.     <div v-text="context01"></div>
  13. <!--    可以嵌套html代码-->
  14.     <div v-html="context02"></div>
  18. </div>
  19. <script type="text/javascript">
  21.     var vue2=new Vue({
  22.         el:"#app2",
  23.         data:{
  24.           context01:"<h1>Vue</h1>",
  25.           context02:"<h1>JAVA</h1>"
  26.         },
  27.         methods: {
  28.             add() {
  29.                 //this指的是vue对象
  30.                 this.sum = this.x+this.y
  31.             },
  32.             show(){
  33.                 alert("zzzzzzzzzzzzz");
  34.             }
  35.         }
  36.     });
  37. </script>
  38. </body>
  39. </html>

结果显示
image.png

5.Vue指令之v-for

5.1 v-for指令

image.png

5.2 迭代数组

image.png

5.3 代码案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app2">
  11.     <table border="1">
  12.         <tr>
  13.             <th>编号</th>
  14.             <th>姓名</th>
  15.             <th>性别</th>
  16.             <th>年龄</th>
  17.         </tr>
  18.         <tr v-for="user in users">
  19.             <td>{{user.no}}</td>
  20.             <td>{{user.name}}</td>
  21.             <td>{{user.sex}}</td>
  22.             <td>{{user.age}}</td>
  23.         </tr>
  25.     </table>
  28. </div>
  29. <script type="text/javascript">
  31.     var vue2=new Vue({
  32.         el:"#app2",
  33.         data:{
  34.          users:[{no:1,name:"json",sex:"女",age:18},{no:2,name:"ajax",sex:"男",age:18}]
  35.         },
  36.         methods: {
  37.             add() {
  38.                 //this指的是vue对象
  39.                 this.sum = this.x+this.y
  40.             },
  41.             show(){
  42.                 alert("zzzzzzzzzzzzz");
  43.             }
  44.         }
  45.     });
  46. </script>
  47. </body>
  48. </html>

6.Vue指令之v-if v-show

6.1作用

image.png

6.2代码案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../js/vue.js"></script>
  7.     <script src="../js/axios.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="app2">
  11.     <table border="1">
  12.         <div v-show="flag">我超棒</div>
  13.         <div v-if="flag">我超棒</div>
  14. <!--        show if区别
  15.             show:改变css
  16.             if:使之消失
  17. -->
  18.         <input type="button" @click="toggle()" value="开关"/>
  19.     </table>
  22. </div>
  23. <script type="text/javascript">
  25.     var vue2=new Vue({
  26.         el:"#app2",
  27.         data:{//数据对象
  28.             flag:true
  29.         },
  30.         methods: {
  31.             add() {
  32.                 //this指的是vue对象
  33.                 this.sum = this.x+this.y
  34.             },
  35.             show(){
  36.                 alert("zzzzzzzzzzzzz");
  37.             },
  38.             toggle() {
  39.                 this.flag =!this.flag;
  40.             }
  41.         }
  42.     });
  43. </script>
  44. </body>
  45. </html>

6.3 小结

image.png

7.