软件开发定制定制室友打了一把端游，我入门了Vue

快速入门Vue

使用工具 vs code
软件开发定制定制建议使用插件 Live Server Preview（软件开发定制定制方便快速查看代码效果）

打开官网，软件开发定制定制我们可以看到如下两种环境

🎈 软件开发定制定制因为我们是初学者，软件开发定制定制我们可以直接最好使用开发环境，软件开发定制定制这会给我们更好的代码提示，软件开发定制定制让我们更快入门。

软件开发定制定制根据官网的介绍，软件开发定制定制我们先入进行入门练习

软件开发定制定制先导入开发环境

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  • 1
<!--先在body软件开发定制定制软件开发定制定制里面创建一个div--><div id="app">  {{ message }}</div>
  • 1
  • 2
  • 3
  • 4

在js软件开发定制定制里面写如下的代码

注意：Vue软件开发定制定制的首字母大写

var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

全局来看

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    {{message}}    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >        {{message}}    </div><script>    var app=new Vue({        el:"body",        data:{            message:"Hello Vue!"        }    })  </script>    </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

运行结果

Hello Vue!
  • 1

入门总结：

  1. 软件开发定制定制导入开发版本的Vue.js
  2. 创建Vue实列对象，设置el属性和data属性
  3. 软件开发定制定制使用简洁的模板语法把软件开发定制定制数据渲染到页面

🎃 软件开发定制定制多种选择器

🎈class选择器

<!--先在body里面创建一个div--><div id="app" class="app">  {{ message }}</div>
  • 1
  • 2
  • 3
  • 4
var app = new Vue({  el: '.app',  data: {    message: 'Hello Vue!'  }})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

运行结果

Hello Vue!
  • 1

🎈软件开发定制定制标签选择器

软件开发定制定制只用更改这里

var app = new Vue({  el: 'div',  data: {    message: 'Hello Vue!'  }})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

运行结果

Hello Vue!
  • 1

🧡 data数据对象

<body>    {{message}}    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" class="app">        {{message}}        <span>{{school}}</span>        <h3>{{school.name}}</h3>        <h3>{{school.mobile}}</h3>        <h3>{{like}}</h3>        <h2>{{like[0]}}</h2>          <h2>{{like[1]}}</h2>    </div> <script>    var app=new Vue({        el:"#app",        data:{            message:"你好，xxx",            school:{                name:"xxx学院",                mobile:"13143xxxxxx"            },                like:["csgo","LOL"]            },            })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

结果演示

{{message}}你好，xxx { "name": "xxx学院", "mobile": "13143xxxxxx" }xxx学院13143xxxxxx[ "csgo", "LOL" ]csgoLOL
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

data：软件开发定制定制数据对象总结

  1. Vue软件开发定制定制中用到的数据定义在data中
  2. data软件开发定制定制可以写复杂类型的数据
  3. 软件开发定制定制渲染复杂类型数据时，遵守js语法即可

💛 Vue 指令

✨软件开发定制定制设置标签的文本值（textContent）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >        <h2 v-text="message">        入门Vue如此简单            </h2>        <h2>入门Vue如此简单{{message}}</h2>    </div> <script>    var app=new Vue({        el:"#app",        data:{            message:"生命不息，学习不止",              },            })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

结果演示

生命不息，软件开发定制定制学习不止入门Vue如此简单 生命不息，学习不止
  • 1
  • 2


软件开发定制定制我们可以看到当我们直接使用v-text时，软件开发定制定制我们的内容会全部被替换，软件开发定制定制于是我们使用插入法入门{{message}}软件开发定制定制来防止全部替换

当然我们也可以进行字符串拼接

```html<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >        <h2 v-text="message+'!'">        爪哇贡尘拾Miraitow          </h2>        <h2>爪哇贡尘拾Miraitow{{info+' 加油'}}</h2>    </div> <script>    var app=new Vue({        el:"#app",        data:{            message:"生命不息，学习不止",              info:"后端路漫漫,什么都要学"            },            })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

结果演示

生命不息，学习不止!爪哇贡尘拾Miraitow 后端路漫漫,什么都要学 加油
  • 1
  • 2

✨设置标签的innerHtml（v-html）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >        <p v-html="content"></p>        <p v-text="content"></p>    </div> <script>    var app=new Vue({        el:"#app",        data:{            content:"爪哇贡尘拾Miraitow"            },            })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

结果演示

爪哇贡尘拾Miraitow爪哇贡尘拾Miraitow
  • 1
  • 2
  • 3

可以看出来没有什么区别，然后我们做一下修改

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >        <p v-html="content"></p>        <p v-text="content"></p>    </div> <script>    var app=new Vue({        el:"#app",        data:{           // content:"爪哇贡尘拾Miraitow",            content:"<a href='http://www.baidu.com'>爪哇贡尘拾Miraitow</a>"            },            })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

结果演示


这样我们可以看到这两个的区别了,上面的可以识别标签，我们点击第一个就可以跳转了

✨为元素绑定事件（v-on）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" ><input type="button" value="v-on指令" v-on:click="doIt"></input>    </div> <script>    var app=new Vue({        el:"#app",        methods:{            doIt:function(){                alert("好好学习，天天向上");            }        }    })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

结果演示


点击事件，当我们点击这个button按钮后就会出现弹窗显示

为了减少代码量还有一种简写的方式

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" ><input type="button" value="v-on指令" v-on:click="doIt"></input><input type="button" value="v-on简写" @click="doIt"></input>    </div> <script>    var app=new Vue({        el:"#app",        methods:{            doIt:function(){                alert("爪哇贡尘拾Miraitow");            }        }    })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

结果演示

可以看出来，效果是一样的

接下来看一下双击事件

我们在之前的代码里面加入这一句，其他不变

<input type="button" value="双击事件" @dblclick="doIt"></input>
  • 1

结果演示

如果你还知道别的事件可以去试试

我们接下来看一下如何修改数据

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >    //设置一个弹击事件<h2 @click="changeFood">{{food}}</h2>    </div> <script>    var app=new Vue({        el:"#app",        data:{            food:"青椒肉丝"        },        methods:{            changeFood:function(){                console.log(this.food);            }        }    })</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

结果演示

青椒肉丝
  • 1

当我们点击青椒肉丝时我们打开控制台，我们可以看到输出结果


然后我们去对changeFood函数做一些修改

 methods:{           changeFood:function(){            //console.log(this.food);            //注意你要修改这个东西要使用this            this.food+="好好吃！"        }    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这是我们连续点击之前的青椒肉丝3次

结果演示

青椒肉丝好好吃！好好吃！好好吃！
  • 1

v-on总结

  1. v-on指令的作用是：为元素绑定事件
  2. 事件名不需要写on
  3. 指令可以简写为@
  4. 绑定的方法定义在methods属性中
  5. 方法内部通过this关键字可以访问定义在data中的数据

学习这么多了，我们来做个计数器，检验学习结果

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <div id="app" >    //定义单击事件    <button @click="sub">        -    </button>    <span>{{num}}</span>    <button @click="add">        +    </button></div><script>var app=new Vue({    el:"#app",    data:{        num:1    },    methods:{    //定义一个增加函数        add:function(){            if(this.num<10){                this.num++;            }else{            //当值大于10弹窗                alert("别点了，我已经最大了！！！")            }                    },        //定义一个减小函数        sub:function(){            if (this.num>0) {                this.num--;            } else {            //当值小于零弹窗                alert("别点了，我已经最小了！！！")            }        }    },})</script>    </body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46

结果演示

当我们一直点减号，直到为零继续点时，会出现如下弹窗


当我们一直点加号，直到为10继续点时，会出现如下弹窗

阶段总结：

  1. 创建Vue实例时：el(挂载点)，data(数据),methods(方法)
  2. v-on指令的作用是绑定事件，简写@
  3. 方法通过this，关键字获取data的数据
  4. v-text指令的作用：设置元素的文本值，简写为{{}}

✨根据表达式的真假，切换元素的显示和隐藏（v-show）

比如：广告和遮罩层

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><img v-show="false" src="./R-C.gif" weight=100px height="100px"></div><script>    var app=new Vue({        el:"#app",    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

当我们加入v-show="false"时我们的图片是不显示的，但是我们把v-show=“true”

<img v-show="true" src="./R-C.gif" weight=100px height="100px">
  • 1

结果演示


就会出现上面这个gif图片

但是这样不好控制，我们做个修改

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><input type="button" value="切换显示状态" @click="changeIsShow"><img v-show="isShow" src="./R-C.gif" weight=100px height="100px"></div><script>    var app = new Vue({        el:"#app",        data:{            isShow:false        },        methods: {            changeIsShow:function(){            //取反，改变data数值             this.isShow=!this.isShow;            }        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

如果理解了前面的内容，看懂这段代码应该不是问题

结果演示

默认情况下，图片是不显示的

当我们点击这个切换显示状态按钮

结果演示


就会看到这个小人

看到这里，有人想问，这个为什么会这样，其实很好解释
当我们默认false的情况下，我们打开网页的控制台，会发现默认情况下，会给我们的img标签添加一个display:none;

当我们再点击以下切换按钮，再去看控制台，会发现

display：none;消失了，于是img显示出来了,是不是很简单

那我们居然可以使用false和true的话，是不是也可以使用表达式来写那，接下里我们去试试

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><input type="button" value="切换显示状态" @click="changeIsShow"><img v-show="isShow" src="./R-C.gif" weight=100px height="100px"><img v-show="num>=20" src="./R-C.gif" weight=100px height="100px"></div><script>    var app = new Vue({        el:"#app",        data:{            num:15,            isShow:false        },        methods: {            changeIsShow:function(){                this.isShow=!this.isShow;            }        },    })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

因为我们的data里面的num为15是小于20的所以不会显示，同样第一个图片isShow为false也不会显示，那么如果我们把num的数值增加到20按道理，如果显示图片表示我们的推断是没问题的，所以我们要去增加num的值，怎么做那很简单！

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><input type="button" value="切换显示状态" @click="changeIsShow"><input type="button" value="增加数量" @click="addNum"><img v-show="isShow" src="./R-C.gif" weight=100px height="100px"><img v-show="num>=20" src="./R-C.gif" weight=100px height="100px"></div><script>    var app = new Vue({        el:"#app",        data:{            num:15,            isShow:false        },        methods: {            changeIsShow:function(){                this.isShow=!this.isShow;            },            addNum:function(){            //当我们点击"增加数量"时就会让num+1                this.num++;            }        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

上面说到，默认情况两个图片都是不显示的

结果演示

但是当我们点击增加数量这个按钮5次，此时的num为20，就会有这样效果

结果演示

阶段总结：

  1. v-show指令的作用是：根据真假切换元素的显示状态
  2. 原理是修改元素的display,实现显示隐藏
  3. 指令后面的内容，最终解析为布尔值
  4. 值为true元素显示，值为false元素隐藏
  5. 数据改变之后，对应元素的显示状态同步更新

✨根据表达式的真假，切换元素的显示和隐藏(操纵dom元素) （v-if）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <input  type="button" @click="toggleIsShow" value="切换显示"><p v-if="isShow">爪哇贡尘拾Miraitow</p></div><script>    var app = new Vue({        el:"#app",        data:{            isShow:false        },        methods: {            toggleIsShow:function(){                this.isShow=!this.isShow;            },        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

结果演示

默认情况是不会显示P标签的内容

当我们点击这个切换显示按钮，我们再来看看结果

这样这个p标签的内容就会显示出来了

看到这有些人可能会问了，这和之前的v-show有什么区别那？

我们来做个对比

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <input  type="button" @click="toggleIsShow" value="切换显示"><p v-if="isShow">爪哇贡尘拾Miraitow</p><p v-if="isShow">爪哇贡尘拾Miraitow  -v-show修饰的</p></div><script>    var app = new Vue({        el:"#app",        data:{            isShow:false        },        methods: {            toggleIsShow:function(){                this.isShow=!this.isShow;            },        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

默认情况两个都不显示，我们去看看控制台

从网页的控制台可以看到，默认的情况v-if是不显示任何东西的，我们的P标签直接没有了，而我们的v-show是修改了样式表display

当我们去点击我们的切换显示按钮，

再去看控制台

由此我们可以看到，v-if修饰的p标签出来了，v-show的样式表里面没有了display:none,这样我们能得到结论
v-show操作的是样式，v-if操作的是dom元素

那我们工作中改怎么选择那?
如果是频繁操作的使用v-show,反之使用v-if

那问题来了，我们v-show 可以使用表达式，那我们的v-if是否也可以那？
体贴的我，当然要给各位试试了

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><p v-if="temperature>=37">你可能发烧了，建议去医院看看</p></div><script>    var app = new Vue({        el:"#app",        data:{            temperature=36        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

默认情况下不显示我们P标签的内容，当我们把data数据的temprature改为37

    data:{            isShow:false,            temperature=37        },
  • 1
  • 2
  • 3
  • 4

结果演示

你可能发烧了，建议去医院看看
  • 1

v-if总结：

1.v-if指令的作用是：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4. 频繁的切换使用v-show，反之使用v-if,前者的切换消耗小

✨设置元素的属性（v-bind）

我们回忆下常见的属性(比如 :src,title,class)共同点都写在内部
那我们的v-bind怎么使用那，我们来看看
v-bind：属性名=表达式

代码演示

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <img v-bind:src="imgSrc" alt="" width="100px"><br>    //更加简单的方式，为了加以区别，把图片的大小换成不一样    <img :src="imgSrc" alt="" width="200px"></div><script>    var app = new Vue({        el:"#app",        data:{            imgSrc:"./R-C.gif"        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

结果演示

通过上述代码，我们应该了解到了，v-bind的写法，还有它的简写方式，具体怎么选择，全凭个人喜好，但是简写方式更常用

那我们试着添加title

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <img v-bind:src="imgSrc" alt="" width="100px"><br>    <img :src="imgSrc" alt="" width="200px">    <img :src="imgSrc" alt="" width="200px" :title="imgTitle"></div><script>    var app = new Vue({        el:"#app",        data:{            imgSrc:"./R-C.gif",            imgTitle:"爪哇贡尘拾Miraitow"        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

结果演示


当我们的鼠标放到，添加title属性的图片上面时，会出现爪哇贡尘拾Miraitow这几个字(注意不要忘记title属性的作用了，忘记的小伙伴，这次要记住呀)

如果想要添加一些字符串到title属性里面，也很简单，毕竟我们前面讲过了，字符串的拼接

 <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我会三连支持你的！！'">
  • 1

这时我们再去把鼠标放到最右边就会显示爪哇贡尘拾Miraitow我会三连支持你的！！
下面我们再去看看class属性

代码演示

 <head> <style>        .active{            border: 5px solid red;        }    </style></head><body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <img v-bind:src="imgSrc" alt="" width="100px"><br>    <img :src="imgSrc" alt="" width="200px">    <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我会三连支持你的！！'"     :class="isActive?'active':''" @click="toggleActive"></div><script>    var app = new Vue({        el:"#app",        data:{            imgSrc:"./R-C.gif",            imgTitle:"爪哇贡尘拾Miraitow",            //默认为false            isActive:false        },        methods:{            toggleActive:function(){                this.isActive = !this.isActive;            }        }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

默认情况下，如下图

当我们点击最右边的图片时

我们可以看到加上了，我们定义的style样式，因为我们定义的是三元运算符，默认为false，当我们点击图片，触发单击事件，就会让isActive取反，这样我们就可以看到style效果了,是不是很简单那！！！

有些小伙伴说，我不会使用三元运算符，没关系，我们还可以使用对象的方式，我们来看看
只需要把上面的代码做一点修改，不去使用三元运算符

    <img :src="imgSrc" alt="" width="200px" :title="imgTitle+'我会三连支持你的！！'"     :class="{active:isActive}" @click="toggleActive">
  • 1
  • 2

点击右下边的图片

由此可见，效果是一样的

v-bind总结：

  1. v-bind指令的作用是：为元素绑定属性
  2. 完整写法是v-bind：属性名
  3. 简写的话可以直接省略v-bind，只保留：属性名
  4. 需要动态的增删class建议使用对象的方式

✨根据数据生成列表结构（v-for）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><ul>    <li v-for="item in arr">        学过的语言:    </li></ul></div><script>    var app = new Vue({        el:"#app",        data:{            arr:["java","javascript","python","c++"]        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

结果演示

会发现它遍历输出了四遍，item in arr遍历的次数和数组的长度一样
当我们改变以下代码，如下

<ul>    <li v-for="item in arr">        学过的语言:{{ item }}    </li></ul>
  • 1
  • 2
  • 3
  • 4
  • 5

结果演示

这个item就类似foreach然后遍历每个值的变量，你换成it什么的都可以
个人感觉和python的for in 有点类似

我们继续修改代码

<ul>    <li v-for="(item,index) in arr">        {{ index+1 }}  学过的语言:{{ item }}    </li></ul>
  • 1
  • 2
  • 3
  • 4
  • 5

这个index就是数组的下标，默认是从0开始为了更好的观察，设置为index+1所以第一个数为1

结果演示

那么数组的运用我们知道了，接下来我们去看以下对象数组

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><h2 v-for="item in food" v-bind:title="item.name">    {{item.name}}</h2></div><script>    var app = new Vue({        el:"#app",        data:{            food:[                {name:"西红柿炒鸡蛋"},                {name:"青椒肉丝"}            ]        },    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

结果演示

当我们鼠标放在这两个food上面任何一个都会有显示相应的food名称这里就不演示了

接下来我们增加点按钮

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><h2 v-for="item in food" v-bind:title="item.name">    {{item.name}}</h2><input type="button" value="添加数据" @click="add"><input type="button" value="移除数据" @click="remove"></div><script>    var app = new Vue({        el:"#app",        data:{            food:[                {name:"西红柿炒鸡蛋"},                {name:"青椒肉丝"}            ]        },        methods:{            add:function(){                this.food.push({ name:"红烧肉"});            },            remove:function(){                this.food.shift();            }        }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

有些同学看到这里的push()和shift()可能忘记了，不知道什么意思，我来解释

shift()方法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
该方法会改变原始数组。

push()方法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
该方法会改变原始数组。

由于不是动态图片，我只能来解释，当我们点击添加数据的按钮3次

当我们点击移除数据的按钮两次

我们可以看到之前的两个菜没了，只有红烧肉了

阶段总结：

  1. v-for指令的作用是:根据数据生成的列表结构
  2. 数组经常和v-for结合使用
  3. 语法是（item,index） in 数据
  4. item和index可以结合其他的指令一起使用
  5. 数组长度的更新会同步到页面，是响应式的

✨ 传递自定义参数，事件修饰符 (v-on补充)

大家也知道，我们学的语言比如:java c++基本上语言都可以给方法传递参数的，我们这个也不例外

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <input type="button" value="点击" @click="doIt('西红柿炒蛋','青椒肉丝')"><script>    var app = new Vue({        el:"#app",        methods:{        doIt:function(p1,p2){    console.log(p1),    console.log(p2)},sayHi:function(p1,p2){    alert("吃了嘛");}         }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

当我们点击了以下点击按钮以后我们去看看控制台，有什么变化

那我们再来个触发事件，当我们点击回车时就会触发

<input type="text" @keyup.enter="sayHi">
  • 1
sayHi:function(p1,p2){    alert("吃了嘛");}     
  • 1
  • 2
  • 3


阶段总结：

  1. 事件绑定的方法写成函数调用的形式，可以传入自定义的参数
  2. 定义方法时需要定义形参来接收传入的实参
  3. 事件的后面跟上.修饰符可以对事件进行限制
  4. .enter可以限制触发的按键为回车
  5. 事件修饰符有多种

✨获取和设置表单元素的值（双向数据绑定v-model）

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><input type="text" v-model="message"><script>    var app = new Vue({        el:"#app",        data:{            message:"爪哇贡尘拾Miraitow"        }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

我们看到上面的代码，默认显示

当我们加入一个h2标签

<input type="text" v-model="message"><h2>{{ message }}</h2>
  • 1
  • 2

这时候看下默认显示

当我们去改变上面text里面的文字时会发现，h2标签里面的东西也在发生改变，当我们加入支持两个字的时候，h2标签的内容也跟着发生改变

当我们继续加入6666到text的时候，h2也发生改变

那么接下来，我们设置个回车触发事件

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{ message }}</h2><script>    var app = new Vue({        el:"#app",        data:{            message:"爪哇贡尘拾Miraitow"        },        methods:{            getM:function(){                alert(this.message);            }        }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

当我们在上面带框的爪哇贡尘拾Miraitow点击以下回车，就会显示如下

也就是说我们去修改txt里面的值的时候
message也同步更新是不是很妙呀！！！

那就有小伙伴问了，居然我们可以修改text里面的message然后让h2的message发生改变，那么反过来那？

让我们来试试

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><div id="app">    <input type="button" value="设置message" @click="setM"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{ message }}</h2><script>    var app = new Vue({        el:"#app",        data:{            message:"爪哇贡尘拾Miraitow"        },        methods:{            getM:function(){                alert(this.message);            },            setM(){                this.message="襄阳豆腐面";            }        }    })</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

结果演示
默认情况

当我们点击以下设置message按钮

果然v-model和爱情一样是双向的

阶段总结：

  1. v-model指令的作用是便捷设置和获取表单元素的值
  2. 绑定的数据会和表单元素值相关联
  3. 绑定的元素和表单的值可以相互转换

💗 Vue结合网络数据开发应用

网络请求库 axios

我们之所以要来使用axios，是因为我们需要进行前后端分离开发，那么前后端的跨域问题就是无可避免的问题，前后端的请求也是无可避免的，Vue之中有一个请求组件是axios，我们可以对axios进行封装作为我们请求的工具组件

Axios 是什么?
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

Axios特性
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

导入axios的js

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

语法介绍

   axios.get(地址?查询字符串key=value&key2=values)   //正确请求会触发第一个回调函数，错误请求会触发第二个回调函数    .then(function (response){},function(err){});
  • 1
  • 2
  • 3
   axios.get(地址,参数对象{key:value,key2=value2})    //正确请求会触发第一个回调函数，错误请求会触发第二个回调函数    .then(function (response){},function(err){});
  • 1
  • 2
  • 3

https://autumnfish.cn/api/joke/list
是一个笑话的网络接口，你可以直接在浏览器访问，会随机产生笑话

后面的num=3就是三条笑话


axios基本使用

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <input type="button" value="get请求" class="get">    <input type="button" value="post请求" class="post">    <!--官网提供的在线地址-->    <script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>    /*    接口1：随机笑话    请求地址：https://autumnfish.cn/api/joke/list    请求方式：get    请求参数：num(笑话条数，数字)    响应内容: 随机笑话        */       //获得get按钮，添加一个点击事件document.querySelector(".get").onclick = function(){    axios.get("https://autumnfish.cn/api/joke/list?num=3")    .then(function (response){        console.log(response);    },function(err){        console.log(err);    }    )}</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

默认状态

当我们点击get请求的按钮我们来看控制台信息
我们可以看到，触发了第一个回调函数

那么错误的回调函数会是什么样子的？

我们去故意改变请求的地址，让请求出错

  axios.get("https://autumnfish.cn/api/joke/list1234?num=3")
  • 1

我们再去看控制台的信息

我们可以看到，触发了第二个回调函数

我们接下来看看post请求

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <input type="button" value="get请求" class="get">    <input type="button" value="post请求" class="post">    <!--官网提供的在线地址-->    <script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*接口2：用户注册    请求地址：https://autumnfish.cn/api/user/reg    请求方式：post    请求参数：num(用户名，字符串)    响应内容:   注册成功或失败    */    document.querySelector(".post").onclick = function ( ) {    axios.post("https://autumnfish.cn/api/user/reg",{  username:"jack"})    .then(function (response){        console.log(response);    },function(err){        console.log(err);    }    )}</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

看控制台的显示

根据我们截的图我们可以看到jack的用户已经被注册了

于是我们修改以下

 axios.post("https://autumnfish.cn/api/user/reg",{  username:"襄阳牛肉面"})
  • 1


显示注册成功，同样的和之前的get方法一样，我们把网址改为错误的，也会在控制台显示一样的404

axios总结：

  1. axios必须导入才能使用
  2. 使用get和post方法即可发送对应的请求
  3. then方法中的回调函数会请求成功或请求失败的时候触发
  4. 通过回调函数的形参可以获取响应内容，或错误信息

文档传送门

https://github.com/axios/axios

🐾axios结合Vue

那我们的axios和Vue怎么结合使用？

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <!--官网提供的在线地址-->    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>    <div id="app">        <input type="button" value="获取笑话" @click="getJoke">        <p>{{joke}}</p>    </div><script>    /*    接口1：随机笑话    请求地址：https://autumnfish.cn/api/joke/list    请求方式：get    请求参数：num(笑话条数，数字)    响应内容: 随机笑话        */var app=new Vue({            el:"#app",            data:{                joke:"天大的笑话"            },            methods:{                getJoke:function(){                    axios.get("https://autumnfish.cn/api/joke/list?num=3")                    .then(function (response){                        console.log(response);                    },function(err){                        console.log(err);    }    )                }            }})</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

默认状态

当我们点击获取笑话的按钮然后去看控制台

有同学说每次显示这么多内容看的结果不直观，那么我们来修改代码

只需要修改一句

    console.log(response.data);    
  • 1
  • 2

结果演示

这样我们就只看到笑话内容了

有些小伙伴可能会问，那我还可以用this得到data的数据嘛？
我们来试试，只需加添加一行代码，然后看控制台的显示

  console.log(this.joke)
  • 1

结果却发现显示的是undefined,说明当前的this已经改变了，我们不能通过this得到Vue实例data的数据了

那我们要怎么才能拿到data的数据？

<body>    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <!--官网提供的在线地址-->    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>    <div id="app">        <input type="button" value="获取笑话" @click="getJoke">        <p>{{joke}}</p>    </div><script>    /*    接口1：随机笑话    请求地址：https://autumnfish.cn/api/joke/list    请求方式：get    请求参数：num(笑话条数，数字)    响应内容: 随机笑话        */var app=new Vue({            el:"#app",            data:{                joke:"天大的笑话"            },            methods:{                getJoke:function(){                //定义变量                    var that=this;                    axios.get("https://autumnfish.cn/api/joke/list?num=3")                    .then(function (response){                        console.log(response.data);                        // console.log(this.joke)                        that.joke=response.data;                    },function(err){                        console.log(err);    }    )                }            }})</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

这时当我们再去点击获取笑话按钮


这样就会把服务器返回的数据直接返回给我们的joke

axios+vue总结：

  1. axios回调函数中的this已经改变，无法访问到data中的数据
  2. 把this保存起来，回调函数中直接使用保存的this即可
  3. 和本地应用的最大区别就是改变了数据来源

🐾关于vue的基本使用，就介绍到这里，大家可以结合一些书籍资料，然后去看看一些简单的项目💕

------🎃 欢迎点赞 👍 收藏 ⭐留言 📝-----
<-----希望大家期末💋过🎊🎊🎊🎊🎊----->

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发