js|Vue快速入门-个人笔记 html|javascript|java|vue

Vue实战 1 Vue入门下载Vue.js

//开发版本 ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

Vue第一个入门应用

Vue第一个入门案例{{msg}}{{username}} {{username}} {{msg}}

# 总结： 1.Vue实例中的el属性，代表Vue作用范围，日后在Vue的范围内都可以使用Vue语法！ 2.Vue实例中的data属性，代表给Vue实例绑定一些数据，绑定的数据可以通过{{变量名}}的形式取出来！ 3.在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用响应的方法以及逻辑运算！ 4.el属性汇总可以书写任意的css选择器【jquery选择器】，但在Vue开发中推荐使用id选择器！！

data中复杂对象的取值 Vue第一个入门案例{{msg}} {{user.name}} {{list[0]}} {{duixiang_list[0].name}}

1.1 v-text
v-text用来获取data中的数据，把数据以文本形式渲染到指定标签内部，类似于js中的innertext

{{msg}}

# 总结： 1.{{}}插值表达式和v-text获取数据的差别在于 a.使用v-text会把标签中原有的数据覆盖，使用插值表达式的形式不会覆盖标签原有数据 b.使用v-text可以避免在网络环境较差的时候出现插值闪烁

1.2 v-html
v-html用来获取data中的数据将数据中含有html标签先解析在渲染到指定标签的内部，类似于js中的innerHTML

{{alink}}lalala lalala

1.3 v-on事件绑定

在Vue中绑定事件是通过v-on完成的，v-on:事件名如v-on:click(change)

v-on:事件名的赋值语句是当前时间触发调用的函数名

在Vue中事件的函数定义到methods:{}中

在vue中定义的事件中this值得就是当前的实例，日后可以再事件中通过使用this获取vue实例中相关数据

年龄：{{age}}

Vue事件的简化语法

# v-on:click = "xxxx" # @click = "xxxx"{{age}}

Vue事件的两种写法

{{count}}

# 总结： 1. 在Vue中事件定义存在两种写法一种是函数名:function(){} 一种是函数名(){}

Vue中事件参数传递

{{count}}

# 总结： 1.在使用事件时，可以直接在事件调用给出事件进行参数传递，在事件定义出通过定义对应变量接收传递的参数。

复习案例1 v-text v-html以及事件绑定

{{msg}} {{age}} {{arr[0]}} {{user}}

1.4 v-show v-if v-bind

欢迎来到阴阳师！欢迎来到阴阳师！永生之海风云再起文章图片

1.5 v-for

v-for:作用就是用来对数据或者对象进行遍历的（数组就是对象的一种）

{{user.name}} {{user.age}} {{value}}:{{key}}:{{index}} {{index}} {{a}} {{user.index}} === {{user.name}} === {{user.age}} === {{user.content}}

# 总结在使用v-for的时候一定要加入:key方便vue做重用排序的唯一key

1.6 v-model双向绑定

v-model:作用用来绑定标签元素的值与vue实例对象中data数据保持一致，从而实现双向的数据绑定

什么叫做双向绑定
文本框中数据发生变化，data中的值也发生变化。
data中的值发生变化，文本框中的数据也发生变化。

{{message}}

# 总结: 1. v-model使用可以实现数据的双向绑定 2. 所谓双向绑定表单中的数据导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化# MVVM架构 Model:数据 VUE实例中绑定数据 VM：ViewModel 监听器 View：页面

记事本案例

{{index+1}} {{item}} 删除 >总数量：{{lists.length}} 条 ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app",//element 用来给Vue定义一个作用范围 data: { lists:["阴阳师神乐新皮肤上线","sp山风降临平安京"], msg:"", },//用来给Vue实例定义一些相关数据 methods:{ save(){//添加到记事本 console.log(this.msg); this.lists.push(this.msg); //文本框中的数据push到list里面 this.msg = ''; //清空文本框中的数据 }, delRow(index){//删除一条记录 //根据下标删除数组中的某个元素 this.lists.splice(index,1); //参数1代表删除的下标从哪个下标开始删除参数2代表删除几个元素 }, delAll(){ //删除所有数据 this.lists = []; } } });

1.7 事件修饰符

修饰符：用来和事件连用，用来决定事件触发条件或者是阻止事件的触发机制 # 常用的事件修饰符 .stop .prevent .capture .self .once .passive

stop事件修饰符

用来阻止事件冒泡

prevent事件修饰符

用来阻止标签的默认行为

百度

1.8 按键修饰符

作用：用来与键盘按键事件绑定在一起，用来修饰特定的按键事件的修饰符。

# 按键修饰符 .enter .tab .delete .esc .space .up .down .left .right

enter回车

用来触发回车按键之后触发的事件

2 Axios 异步使用

Axios是一个异步请求技术，核心作用是用来在页面中发异步请求，并获取对应数据在页面中的渲染，跟Ajax相似

2.1 Axios第一个程序
Axios官方网站
安装：
2.1.1 GET方式的请求

="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ="https://unpkg.com/axios/dist/axios.min.js"> >//发送GET方式请求 axios.get("http://localhost:8080/user/findAll").then(function(response){ console.log(response.data) }).catch(function(err){ console.log(err); }); const app = new Vue({ el: "#app",//element 用来给Vue定义一个作用范围 data: {},//用来给Vue实例定义一些相关数据 methods: {} }); ///输入参数//发送GET方式请求 axios.get("http://localhost:8080/user/findAll?name=xiaochen").then(function(response){ console.log(response.data) }).catch(function(err){ console.log(err); });

2.1.2 POST方式的请求

>axios.post("http://localhost:8080/user/save",{ username:"xiaochen", age:23, email:"xiaochen@zpsd.com", phone:15363150846 }).then(function(response){ console.log(response.data); }).catch(function(err){ console.log(err); })const app = new Vue({ el: "#app",//element 用来给Vue定义一个作用范围 data: {},//用来给Vue实例定义一些相关数据 methods: {} });

2.1.3 Axios并发请求

并发请求：将多个请求在同一时刻发送到后端服务接口，最后再集中处理每个请求的响应结果

>//并发请求 //1.创建一个查询所有的请求 function findAll(){ return axios.get("http://localhost:8080/user/findAll?name=xiaochen"); } //2.创建一个保存的请求 function save(){ return axios.post("http://localhost:8080/user/save",{ username:"xiaochen", age:23, email:"xiaochen@zpsd.com", phone:15363150846 }); }//3.并发执行 axios.all([findAll(),save()]).then( axios.spread(function(res1,res2){//用来将一组函数的响应结果汇总处理 console.log(res1.data); console.log(res2.data); }) ); //用来发送一组请求const app = new Vue({ el: "#app",//element 用来给Vue定义一个作用范围 data: {},//用来给Vue实例定义一些相关数据 methods: {} });

2.1.4 VUE结合Axios实现天气查询

-for="city in hotCitys"> {{city}} -show="isShow">{{name}}，今天的天气是：{{message}}="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ="https://unpkg.com/axios/dist/axios.min.js"> > const app = new Vue({ el: "#app",//element 用来给Vue定义一个作用范围 data: { name:"", hotCitys:["北京","上海","深圳","广州","天津"], message:"", isShow:false, },//用来给Vue实例定义一些相关数据 methods: { searchCity(){ //获取输入的城市信息 console.log(this.name); let _this = this; //把外部的this赋值给内部的this //发送axios请求 axios.get("http://localhost:8080/city/find?name="+this.name).then(function(response){ console.log(response.data.message); _this.message=response.data.message; _this.isShow=true; }).catch(function(err){ console.log(err); }); }, searchCitys(name){ this.name = name; this.searchCity(); }, shows(){ this.isShow = false; } } });

VUE CLI使用