# vue2-study

**Repository Path**: south-it-school-project/vue-study

## Basic Information

- **Project Name**: vue2-study
- **Description**: vue2+axios学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-15
- **Last Updated**: 2025-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue.js2

## node.js下载与安装

node.js下载https://nodejs.org/zh-cn/download

### 常用指令

一部分经常使用的命令，以下：

- npm -v：查看npm安装的版本。
- npm init：会引导你建立一个package.json文件，包括名称、版本、作者等信息。
- npm list：查看当前目录下已安装的node包。
- npm ls：查看当前目录下已安装的node包。
- npm install moduleNames：安装Node模块到本地目录node_modules下。
- npm install < name > -g：将包安装到全局环境中。
- npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有package.json文件时，直接使用npm install方法就能够根据dependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
- npm install < name> --save-dev：安装的同时，将信息写入package.json中项目路径中若是有package.json文件时，直接使用npm install方法就能够根据devDependencies配置安装全部的依赖包，这样代码提交到git时，就不用提交node_modules这个文件夹了。
- npm uninstall moudleName：卸载node模块。

## vue指令

### V-text



```vue
<div id='app'>
	<h2 V-text='message'>
        
	</h2>
	<h2>
	深圳{[ message }}
	</h2>
</div>
<script>
	var app = new Vue({
     	el:"#app"
		data:{
        	message:"黑马程序员"
    	}
    })
</script>
如果加符号
<div id='app'>
    <h2 v-text='message'>
        深圳{[ message }}
    </h2>
</div>
```

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式(份可以替换指定内容内部支持写表达式

### v-html

```vue
<div id='app'>
	<p V-htm1='message'>
        
    </p>
	<h2>
    	深圳{{ message }}
    </h2>
</div>
<script>
	var app = new Vue(!
	el:"#app"
	data:{
         //content:"黑马程序员'
		//可以使用htm1标签
		message:"黑马程序员"         
      }
</script>
```

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

解析文本使用v-text,需要解析html结构使用v-html

### v-on

```vue
<div id="app">
    <input type="button" value="事件绑定" V-on:cTick="dolt">
    <input type="button" value="事件绑定" V-on:monseenter="dolt">
    <input type="button" value="事件绑定" V-on:dblclick="dolt">
    <input type="button" value="事件绑定" @dblclick="do1t">
</div>
<script>
	var app = new Vue({
        el:"#app",
        methods:dolt:function(){
        	//逻辑
    	}
</script>
```

vue不用管dom元素，主要专注于数据内容
v-on指令的作用是:为元素绑定事件

事件名不需要写on指令可以简写为@邦定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中数据
以上总结创建Vue不例时:el(挂载点),data(数据)methods(方法)-on指令的作用是绑定事件,简写为@方法中通过this,关键字获取data中的数据v-text指令的作用是:设置元素的文本值,简写为)v-html指令的作用是:设置元素的innerHTML

### v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接手传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种

### V-show

```vue
<div id='app'>
    <input type="button" value="切换显示状态" @click="changeIsshow">
    <input type="button" value="累加年龄" @click="addAge">
    <img src="" at="123123" V-show="isshow">
    <!-- false隐撼 true显示-->
    <!--本质的是display的显示跟隐藏-->
    <img src=" alt="123123” V-show="age>=18">age因为不大于等于18为false所以v-show="false"</div>
<script>
new Vue({
 el:"#app"
 data:!
 isshow:false
 age:17
 methods:changeIsshow: function this .isshow= !this .isshow:
 addAge:function (){
	this.age++
}   
})
```

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

### v-if

```vue
<div id='app'>
	<input type="button” value="切换显示"@click="methods">
    <p v-if="isshow">黑马程序员</p>
    <!-- 使用的是dom的值 -->
    <p v-show="isshow">我是一个p标签 v-show修饰</p>
    <!-- v-show使用的是属性样式 -->
    <!-- 频繁切换的用v-show 反之 v-if-->
    <h2 V-if="temperature>=35">热死了</h2>
</div>
<script>
new Vue({
    el:"#app";
	data:{
        isshow:false,
		temperature:20
        }
    methods:methods:function (){
        his.isshow=!this.isshow
    };
})
</script>
```

v-if指令的作用是:根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true元素存在于dom树中为false,从dom树中移除

频繁的切换v-show,反之使用v-if.前者的切换消耗小

#### v-bind

```vue
<div id="app">
	<img v-bind:src= "imgSrc" >
    <img v-bind:title= "imgTitle"+"!!!" >
    <img v-bind:class="isActive"?'active':"">
    <img v-bind:class="active:isActive]">   
    <!-- 可以使用简写:代替v-bind -->
    <img :class="isActive"?'active':"">
</div>
<script>
	new Vue({
        el:'#app',
        data:{
            imgsrc:'图片地址'
            imgTitle:'黑马程序员'
        }
    })
</script>
```

v-bind指令的作用是:为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略v-bind,只保留:属性名

需要动态的增删calss建议使用对象的方式

### v-for

```vue
  	<div id="app">
        <ul>
            <li v-for="item in arr">
                你好
            </li>
        </ul>
	</div>

    <script>
        new Vue({
            el:'#app',
            data:{
                arr:[1,2,3,4,5]
            },
            methods:{

            }
        })
</script>
```

v-for指令的作用是:根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in 数据

其中item跟index是可以支持自定义的

item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

### v-model

```vue
<div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            message:'黑马程序员'
        },
        methods:{
            gerM:function (){
                alert(this.message)
            },
            setM:function (){
                this.message= '酷丁鱼'
            }
        }
    })
</script>
```

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<-  ->表单元素的值

## 网络应用

### axios

```vue
<script>
    axios.get(地址 ? key = value & key2 = values).then(function (resonse) {

    }, function (err) {

    })

    axios.post(地址, {key: value, key2: values}).then(function (resonse) {

    }, function (err) {

    })
    
    
    
    document.querySelector('.get').onclick = function () {
        axios.get('https://autumnfish.cn/api/joke/list?num=3').then(
            function (res) {
            console.log(res);
        }, function (err) {
            console.log(err)
        })
    }

    document.querySelector('.post').onclick = function () {
        axios.post('https://autumnfish.cn/api/user/reg', {username: 'jack'}).then(
            function (res) {
                console.log(res)
            },
            function (err) {
                console.log(err)
            }
        )
    }
    
    
    
</script>
```

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

https://github.com/axios/axios官网

### axios+vue

axios回调函数中的this已经改变无法访问到data中数据
把this保存起来回调函数中直接使用保存的this即可

和本地应用的最大区别就是更变了数据来源