vue change事件_Vue 基础

最新推荐文章于 2025-04-22 13:19:14 发布

weixin_39960710

最新推荐文章于 2025-04-22 13:19:14 发布

阅读量1w

点赞数 1

文章标签： vue change事件 vue 使得button获取焦点 vue将一个请求方法设置为同步

一、什么是Vue？

Vue是js框架，简化Dom操作，响应式数据驱动

二、第一个Vue程序

使用Vue的一般步骤：

导入开发版本的Vue.js
创建Vue实例对象，设置el和data, methods等属性
使用简洁的模板语法将数据渲染到页面上

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>head><body><div id="app">{{message}}div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({
            el: "#app",
            data: {
                message: "2333"}})script>body>html>

el是挂载点(可以理解为data数据生效的地方)

Vue实例作用范围：el选项命中的元素及内部的所有后代元素
选择器：推荐使用ID选择器
使用Dom元素：可以使用其他的双标签，不可以使用html和body标签

data是数据对象

Vue用到的数据定义的在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵循js语法

三、Vue指令

1、v-text指令：

，等价于

`{{ message }}`

2、v-html指令：，相当于InnerHtml

3、v-on指令：v-on:事件名="方法"

v-on作用：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
示例：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>head><body><div id="app"><h1> {{ message }} h1><input type="button" value="click me" v-on:click="change">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({
            el: "#app",
            data: {
                message: "2333"},
            methods: {
                change: function() {this.message = "666"}}})script>body>html>

Vue使得开发者只需要专注于数据的修改，数据的修改会自动同步到前台

函数传参同js

4、v-show命令：

根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为bool值
值为true则显示，false不显示

5、v-if:

根据表达式真假切换元素显示状态
本质是操纵dom元素来切换显示状态
表达式为true，元素存在dom树中，否则从dom树中删除

6、v-bind：

为元素绑定属性
完整写法：v-bind:属性名
简略写法：:属性名
示例：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>.image {width: 1000px;height: 600px;}style>head><body><div id="app"><input type="button" value="click me" @click="change" ><img :class={image:isActive} :src="imgSrc" alt="">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://cn.vuejs.org/images/dcloud.gif",
                isActive: false}, 
            methods: {
                change: function() {this.isActive = ! this.isActive;}}})script>body>html>

综合案例：图片切换

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>style>head><body><div id="app"><input type="button" value="last" @click="left" v-show="count != 0"><img :src="imgSrc" alt="" width="600px" height="450px"><input type="button" value="right" @click="right" v-show="count != 6">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({
            el: "#app",
            data: {
                count: 0,
                imgSrc: 'C:\\Users\\Pictures\\desk_background\\0.jpg',},
            methods: {
                left: function() {if (this.count == 0) {return ;}--this.count;this.imgSrc = 'C:\\Users\\Pictures\\desk_background\\' + this.count + ".jpg";},
                right: function() {if (this.count == 6) {return ;}++this.count;this.imgSrc = 'C:\\Users\\Pictures\\desk_background\\' + this.count + ".jpg";}}})script>body>html>

7、v-for指令：

假设在data里面定义了arr:[1,2,3,4,5]

<div id="app">
<ul>
<li v-for="item in arr">{{ item }}li>
ul>
div>

根据数据生成列表结构
语法是(item.index) in 数据
数组长度的更新会同步到页面上，是响应式的

8、v-model指令：

做的事情是双向数据绑定
便捷地设置和获取表单元素的值
绑定的数据会和表单元素值相关联

四、网络应用

1、axios的基本使用：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>head><body><script src="https://unpkg.com/axios/dist/axios.min.js">script><input type="button" value="get请求" class="get"><input type="button" value="post请求" class="post"><script>
        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);}}
        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>html>

2、Vue + Axios：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>head><body><script src="https://unpkg.com/axios/dist/axios.min.js">script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><div id="app"><input type="button" value="get请求" @click="getJoke"><p> {{ joke }} p>div><script>var app = new Vue({
            el: "#app",
            data: {
                joke: "笑话将显示在这里"},
            methods: {
                getJoke: function() {var that = this;
                    axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response) {
                        that.joke = response.data.jokes;}),function(err) {
                        console.log(err);}}}})script>body>html>