vue 调试插件及jar

链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg
提取码：5gqo

VueJS介绍

1.1

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

1.3 VueJS 快速入门

1.3.1创建Module

1.3.2 然后修改名字-->Next-->完成;完成后里面是空的

1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具

1.3.4 创建mode.html(下面就是,其也是快速入门案例)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告
--><script src="js/vuejs-2.5.16.js"></script>
</head>
<body><div id="app">{{info}}
</div>
<script>new Vue({el:"#app",               //表示当前Vue对象管理div区域data:{info:"Vue_HelloWorld"}});
</script>
</body>
</html>

Vue调试神器vue-devtools

vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择解压好的vue-devtools文件夹。无vpn的开头有提供插件下载，下载好后托到Chrome 扩展就行

如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。

到此添加完成，效果图如下：

打开vue项目,在控制台选择vue 点击vue，查看数据：

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}

例如：

<body><div id="app">{{number+1}}<hr>{{flag?"ok":"noOk"}}
</div>
<script>new Vue({el:"#app",               //表示当前Vue对象管理div区域data:{info:"Vue_HelloWorld",number:1,flag:true}});
</script>
</body>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2. VueJS 常用系统指令

v-on，V-text/V-html,v-bind,V-model,v-for,v-if/v-show

2.1 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

2.1.1 v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body><div id="app" v-on:click="fun1('vue的点击事件触发啦！')" style="width: 200px;height: 200px;border:1px solid red;">{{info}}
</div><script>new Vue({el: "#app",data: {info:"我是div"},methods:{fun1:function (msg) {this.info=msg;}}});
</script></body>
</html>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>事件处理 v-on示例2</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><input type="text" v-on:keydown="fun2($event)">
</div>
<script>new Vue({el: '#app',methods: {fun2: function (e) {//只能输入数字if(!(e.keyCode>=48 && e.keyCode<=57)){e.preventDefault();         //阻止事件默认行为}}}});
</script>
</body>
</html>

$event-事件对象

使用不带圆括号的形式，event 对象将被自动当做实参传入:v-on:keydown="fun2"

使用带圆括号的形式，我们需要使用 $event 变量显式传入 event 对象:v-on:keydown="fun2($event)"

preventDefault()-阻止默认事件

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>事件处理 v-on示例3</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><div v-on:mouseover="fun1" id="div" style="background:red;"><textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea></div>
</div>
<script>new Vue({el : '#app', methods : {fun1 : function() {alert("div");},fun2 : function(event) {alert("textarea");event.stopPropagation();//阻止冒泡}}});
</script>
</body>
</html>

2.1.4 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() event.stopPropagation

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop：阻止事件冒泡
.prevent：阻止事件默认行为

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body><div id="app"><!--阻止默认事件--><form @submit.prevent action="http://www.baidu.com"><input type="submit"></form><hr><!--阻止事件冒泡--><div @click="fun1"><a @click.stop href="https://www.jd.com">京东</a></div>
</div>
<script>new Vue({el:"#app",methods:{fun1:function () {alert("div！");}}})
</script>
</body>
</html>

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

2.1.5 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>v-on 按钮修饰符</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><!--监听回车按下--><input type="text" v-on:keyup.enter="fun1">
</div>
<script>new Vue({el : '#app', //表示当前vue对象接管了div区域methods : {fun1 : function() {location.href="https://www.baidu.com";}}});
</script>
</body>
</html>

2.2 v-text与v-html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><div v-text="content"></div><div v-html="content"></div>
</div>
<script>new Vue({el : '#app', //表示当前vue对象接管了div区域data:{content:"<h1>hello vue</h1>"}});
</script>
</body>
</html>

2.3 v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><!--错误写法-->
<!--    <font color="{{color1}}">我是font1</font>--><font v-bind:color="color1">我是font</font><hr><font v-bind:color="color2">我是font</font><hr><font v-bind:color="color3">我是font</font><hr><!-- v-bind简写方式 --><font :color="color3">我是font</font><hr><a v-bind:href="url">百度一下</a><!--简写--><a :href="url">百度一下</a><!--插入值写法--><a v-bind={href:"https://www.baidu.com?id="+id} >百度一下</a>
</div>
<script>new Vue({el: "#app",data: {color1:"red",color2:"green",color3:"blue",id:10,url:"https://www.baidu.com"}});</script>
</body>
</html>

2.4 v-model

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">username: <input type="text" v-model="user.username"><hr>address: <input type="text" v-model="user.address"><hr><button @click="fun1">弹出Vue中的username</button><button @click="fun2">弹出Vue中的address</button>
</div>
<script>new Vue({el: "#app",data:{user:{username:'张三',address:'广州'}},methods:{fun1:function () {alert(this.user.username);},fun2:function () {alert(this.user.address);}}});</script>
</body>
</html>

2.5 v-for

2.5.1 操作array

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><!--item:每次遍历到的值index:遍历的索引 从0开始--><ul><li v-for="(item,index) in list">{{item+" "+index}}</li></ul>
</div>
<script>new Vue({el: "#app",data:{list:['南昌','赣州','抚州','上饶']}});
</script>
</body>
</html>

2.5.2 操作对象

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app"><ul><li v-for="(val,key) in user">{{key+"-"+val}}</li></ul>
</div><script>new Vue({el: "#app",data:{user:{username:'zhangsan',password:'123',address:'赣州'}}});
</script>
</body>

2.5.3 操作对象数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<table border="1" align="center" id="app" width="300"><tr><th>姓名</th><th>年龄</th><th>地址</th></tr><tr v-for="user in userList"><td v-for="(val,key) in user">{{val}}</td></tr>
</table><script>new Vue({el: "#app",data:{userList:[{username:'张三',age:20,address:'南昌'},{username:'李四',age:22,address:'赣州'},{username:'王五',age:25,address:'九江'}]}});
</script>
</body>
</html>

2.5.3 操作对象数组

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<table border="1" align="center" id="app" width="300"><tr><th>姓名</th><th>年龄</th><th>地址</th></tr><tr v-for="user in userList"><td v-for="(val,key) in user">{{val}}</td></tr>
</table><script>new Vue({el: "#app",data:{userList:[{username:'张三',age:20,address:'南昌'},{username:'李四',age:22,address:'赣州'},{username:'王五',age:25,address:'九江'}]}});
</script>
</body>
</html>

2.6 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><title>title</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body><div id="app"><span v-if="flag">刀塔传奇</span><hr><span v-show="flag">dTCQ</span><hr><button @click="fun1">true</button><button @click="fun2">false</button></div><script>new Vue({el: "#app",data: {flag: false},methods:{fun1:function () {this.flag=true;},fun2:function () {this.flag=false;}}});
</script>
</body>
</html>

3.VueJS生命周期（了解）

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中有这些状态：

beforeCreate:创建VUE对象之前执行，此时data中的数据还未初始化，el还未关联到对应的id
created:创建VUE对象之后执行,此时data中的数据已经初始化，但el还未关联到对应的id
beforeMount:对象挂载之前执行，此时el已经关联到对应对象,但{{}}表达式还未加载
mounted:对象挂载之后执行,此时{{}}表达已经加载，执行完mounted之后开始正常执行js代码
beforeUpdate:data数据更新前执行，此时data中的数据已经更新，但是{{}}表达式中引用的还没有更新
updated:数据更新后执行,{{}}表达式中引用也更新
beforeDestory:vue对象销毁前执行
destroyed:vue对象销毁后执行

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>生命周期</title><script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>var v = new Vue({el : "#app",data : {message : 'hello world'},beforeCreate : function() {console.log(this);showData('创建vue实例前', this);},created : function() {showData('创建vue实例后', this);},beforeMount : function() {showData('挂载到dom前', this);},mounted : function() {showData('挂载到dom后', this);},beforeUpdate : function() {showData('数据变化更新前', this);},updated : function() {showData('数据变化更新后', this);},beforeDestroy : function() {// vm.test = "3333";showData('vue实例销毁前', this);},destroyed : function() {showData('vue实例销毁后', this);}});
function showData(process, obj) {console.log(process);console.log('data 数据：' + obj.message);console.log('挂载的对象：');console.log(obj.$el);console.log('真实dom结构：' + document.getElementById('app').innerHTML);console.log('------------------');}v.message = "update Data...";v.$destroy();
</script>
</body>
</html>

4.VueJS ajax

4.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。

vue-resource的github: https://github.com/pagekit/vue-resource

4.2 axios

首先就是引入axios,如果你使用es6，只需要安装axios模块即可

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

4.2.2 get请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
.then(function(response){console.log(response);
})
.catch(function(err){console.log(err);
});
//以上请求也可以通过这种方式来发送
axios.get('/user',{params:{ID:12345}
})
.then(function(response){console.log(response);
})
.catch(function(err){console.log(err);
});

4.2.3 post请求

axios.post('/user',{firstName:'Fred',lastName:'Flintstone'
})
.then(function(res){console.log(res);
})
.catch(function(err){console.log(err);
});

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])

VueJS 概述与快速入门相关推荐

小汤学编程之JDBC（一）——JDBC概述和快速入门
一.JDBC概述 1.概念 2.作用二.JDBC快速入门 1.实现步骤 2.查询数据和操作数据 3.SQL注入 4.事务管理 5.Statement与Prep ...
（一）Flume概述及快速入门
目录一.Flume概述 1. Flume定义 2. Flume基础架构 2.1 Agent 2.2 Source 2.3 Sink 2.4 Channel 2.5 Event 二.Flume快速入门 ...
Day14-HTTP协议 web开发概述 servlet快速入门
HTTP:HyperText Transfer Protocol 超文本传输协议用于定义web浏览器和web服务器之间交换数据的过程特点: 基于请求/响应模型的协议.请求和相应必须成对出现,现有请 ...
腾讯云云直播CSS产品概述和快速入门
腾讯云云直播CSS产品概述云直播(Cloud Streaming Services)为您提供极速.稳定.专业的直播云端处理服务,根据业务中不同直播场景的需求,云直播提供标准直播.慢直播.快直播和云导 ...
arm rtx教程_ARM CMSIS标准概述及快速入门
CMSIS的创建是为了帮助行业实现标准化,减少了客户学习曲线,开发成本,缩短产品上市时间. 再来看看CMSIS是什么,有哪些工具提供及快速入门~ CMSIS:(Cortex Microcontroll ...
[JavaWeb-Servlet]概述与快速入门
Servlet: server applet * 概念:运行在服务器端的小程序* Servlet就是一个接口,定义了Java类被浏览器访问到(tomcat识别)的规则.* 将来我们自定义一个类,实现S ...
Spring框架概述（快速入门）
Spring 框架概述: 目录 Spring 框架概述: 1.Spring 是轻量级的开源的 javaEE 框架 2.Spring 有两个核心部分:IOC 和 AOP: 3.Spirng 特点: 4. ...
一二, Spark概述和快速入门
一, Spark概述 1.1 什么是Spark Spark是一种基于内存的快速,通用,可扩展的大数据分析计算引擎; "Apache Spark" is a unified anal ...
权限操作-springSecurity概述及快速入门步骤分析
Spring Security介绍 Spring Security 的前身是 Acegi Security ,是 Spring 项目组中用来提供安全认证服务的框架. (https://projects ...

VueJS 概述与快速入门

vue 调试插件及jar

链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg
提取码：5gqo

VueJS介绍

1.1

1.3 VueJS 快速入门

1.3.1创建Module

1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具

1.3.4 创建mode.html(下面就是,其也是快速入门案例)

1.4 插值表达式

2. VueJS 常用系统指令

2.1 v-on

2.1.1 v-on:click

2.1.2 v-on:keydown

2.1.3 v-on:mouseover

2.1.4 事件修饰符

2.1.5 按键修饰符

2.2 v-text与v-html

2.3 v-bind

2.4 v-model

2.5 v-for

2.5.1 操作array

2.5.2 操作对象

2.5.3 操作对象数组

2.5.3 操作对象数组

2.6 v-if与v-show

3.VueJS生命周期（了解）

4.VueJS ajax

4.1 vue-resource

4.2 axios

4.2.2 get请求

4.2.3 post请求

VueJS 概述与快速入门相关推荐

最新文章

热门文章

VueJS 概述与快速入门

vue 调试插件及jar

链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg 提取码：5gqo

VueJS介绍

1.1

1.3 VueJS 快速入门

1.3.1创建Module

1.3.3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹,这个是工具

1.3.4 创建mode.html(下面就是,其也是快速入门案例)

1.4 插值表达式

2. VueJS 常用系统指令

2.1 v-on

2.1.1 v-on:click

2.1.2 v-on:keydown

2.1.3 v-on:mouseover

2.1.4 事件修饰符

2.1.5 按键修饰符

2.2 v-text与v-html

2.3 v-bind

2.4 v-model

2.5 v-for

2.5.1 操作array

2.5.2 操作对象

2.5.3 操作对象数组

2.5.3 操作对象数组

2.6 v-if与v-show

3.VueJS生命周期（了解）

4.VueJS ajax

4.1 vue-resource

4.2 axios

4.2.2 get请求

4.2.3 post请求

VueJS 概述与快速入门相关推荐

最新文章

热门文章

链接：https://pan.baidu.com/s/1wh_ibqxD82w2jvg29N8RZg
提取码：5gqo