关键词:
Vue快速入门
一、Vue快速入门
2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。
2009年,Ryan Dahl在谷歌的Chrome v8引擎基础上,打造了基于事件循环的异步IO框架:Node.js。
基于时间循环的异步lO
单线程运行,避免多线程的变量同步问题
JS可以编写后台diamante,前后台统━编程语言
node.js的伟大之处不在于让JS迈向了后端开发,而是构建了一个庞大的生态系统。
2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。
目前已经是世界最大的包模块管理系统。
随后,在node的基础上,涌现出了一大批的前端框架:
MVVM模式
M:即Model,模型,包括数据和一些基本操作
V:即View,视图,页面渲染结果
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MWM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。
而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
●只要我们Model发生了改变,View上自然就会表现出来。
●当用户修改了View,Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
而我们今天要学习的,就是一款MVVM模式的框架:Vue
1、认识Vue
Wue(读音/vju:/,类似于view)是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工县摄以及各种支持啦库结合使用时,Vue也完全能够为复杂的单页应用提供驱动.
2、安装Node.js
(1)进入Node.js官网https://nodejs.org/zh-cn/
然后install安装即可
安装完成
控制台测试
输入node-v
然后回车
2、NPM
npm版本输入npm -v
然后回车
npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。
但是切换镜像是比较麻烦的正-推荐切换镜像的工具:nrm
我们首先安装nrm,这里-g代表全局安装
npm install nrm -g
输入:nrm ls报错
找到该文件C:\\Users\\ZHENG\\AppData\\Roaming\\npm\\node_modules\\nrm
//const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');
继续输入nrm ls
切换淘宝镜像nrm use taobao
测试一下nrm test taobao
二、工程案例
1、创建工程
2、安装Vue
在IDEA的终端当中
在终端上输入:npm init -y
报错
(1)初始化项目
npm init -y
(2)安装Vue
只再当前项目安装Vue:npm install vue --save
打开下面内容证明安装完成
3、创建HTML文件
(1)编写基本的HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h1>
xxx非常美丽!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
</script>
</body>
</html>
运行查看一下
(2)使用Vue
a、定义属性
首先通过new Vue()
来创建Vue实例
然后构造函数接收一个对象,对象中有一些属性:
el
:是element
的缩写,通过id
选中要渲染的页面元素,本例中是一个div
data
:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中name
:这里我们指定了一个name
属性
页面中的h2
元素中,我们通过name)
的方式,来渲染刚刚定义的name
属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>
name xxx非常美丽!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"虎哥"
);
</script>
</body>
</html>
运行测试
在谷歌浏览器控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"虎哥",
num: 1,
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num" />
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"虎哥",
num: 1,
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num" /><button @click="num++">+</button>
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"虎哥",
num: 1,
);
</script>
</body>
</html>
b、定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button><br>
<input type="text" v-model="num" /><button @click="num++">+</button>
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"虎哥",
num: 1,
,
methods :
handleClick()
console.log("hello");
);
</script>
</body>
</html>
三、Vue生命周期(钩子)
每个Vue实例在被创建时都要经过一系列的初始化过程︰
创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。
每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
1、生命周期:
2、渲染数据:钩子函数
例如: created代表在vue实例创建后;
我们可以在Vue中定义一个created函数,代表这个时期的构造函数;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button><br>
<input type="text" v-model="num" /><button @click="num++">+</button>
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"",
num: 1,
,
methods :
handleClick()
console.log(this)
console.log("hello");
,
created()
//向后台发起Ajax请求,完成对data数据初始化
this.name = "虎哥";
);
</script>
</body>
</html>
3、模拟实际渲染数据:this 我们可以看下在vue内部的this变量是谁,我们在created的时候,打印this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button><br>
<input type="text" v-model="num" /><button @click="num++">+</button>
<h1>
name xxx非常美丽!<br>
num 位其着迷!
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue(
el:"#app",//elemnet,vue 作用的标签
data:
name:"",
num: 1,
,
methods :
handleClick()
console.log(this)
console.log("hello");
,
created()
//向后台发起Ajax请求,完成对data数据初始化
setTimeout(() => this.name = "虎哥 真的",1000)
);
</script>
</body>
</html>
延时一秒
总结: this就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue中定义的data内属性、方法等。
四、指令
什么是指令?
指令(Directives)是带有 v-前缀的特殊属性。
例如我们在入门案例中的v-model,代表双向绑定。
1、插值表达式
(1)花括号
格式:
表达式
说明;
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)
- 表达式必须有返回结果。例如1+1,没有结果的表达式不允许使用,如: var a = 1+1;
- 可以直接获取Vue实例中定义的数据或函数
示例
HTML:
<div id= " app">iname ) )</div>
JS:
var app =new vue(
el:"#app",
data:
name:"Jack""
laravel框架快速入门教程(代码片段)
...化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、多... 查看详情
thinkphp6框架快速入门教程(代码片段)
...化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、多... 查看详情
laravel9框架快速入门教程(代码片段)
...化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、多... 查看详情
jeecg-boot项目介绍——基于代码生成器的快速开发平台(springboot前后端分离)(代码片段)
Jeecg-Boot是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&AntDesign。强大的代码生成器让前端和后台代码一键生成,不需要写任何代码,保持jeecg一贯的强大,绝对是全栈开... 查看详情
基于laravel9+layui框架快速入门教程(代码片段)
...化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,框架自研了一套个性化的组件,实现了可插拔的组件式开发方式:单图上传、多... 查看详情
java网络商城项目springboot+springcloud+vue网络商城(ssm前后端分离项目)十六(商品排序,thymeleaf快速入门,商品详情页的展示)(代码片段)
Java网络商城项目SpringBoot+SpringCloud+Vue网络商城(SSM前后端分离项目)十六(商品详情页的展示)一、商品排序1、完善页面信息这是用来做排序的,默认按照综合排序。点击新品,应该按照商品创建时... 查看详情
java网络商城项目springboot+springcloud+vue网络商城(ssm前后端分离项目)十六(商品排序,thymeleaf快速入门,商品详情页的展示)(代码片段)
Java网络商城项目SpringBoot+SpringCloud+Vue网络商城(SSM前后端分离项目)十六(商品详情页的展示)一、商品排序1、完善页面信息这是用来做排序的,默认按照综合排序。点击新品,应该按照商品创建时... 查看详情
python全栈100天学习笔记day48前后端分离开发入门(代码片段)
前后端分离开发入门在传统的Web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称... 查看详情
python全栈100天学习笔记day48前后端分离开发入门(代码片段)
前后端分离开发入门在传统的Web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称... 查看详情
5_前后端分离
...来说,不需要在项目中编写页面了,写到控制器返回数据即可,最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源,如果希望能够独立运行就需要借助基于Node.js的一些前端框架。1交互形式在前后... 查看详情
5_前后端分离
...来说,不需要在项目中编写页面了,写到控制器返回数据即可,最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源,如果希望能够独立运行就需要借助基于Node.js的一些前端框架。1交互形式在前后... 查看详情
springboot+vue+antdesign前后端分离快速开发平台
...化、可插拔的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块 查看详情
前后端分离:分离开发,一体发布(代码片段)
前后端分离开发实践了很久了,前两天需要把一个项目上线,准备SSL证书时发现,居然需要申请3个证书(1年期免费的证书只能对单个子域名申请),这3个域名是:sys.project.cn,Web应用前端api.project.cn,应用后端RESTfulAPIm.project.cn... 查看详情
基于.netcore开发,前端支持layuireactvue且前后端分离的快速开发框架
...#xff0c;可极大的提升开发效率。项目简介这是基于.netcore的快速开发框架,前端框架可以根据自己需求选择,支持Layui、Blazor、React、VUE,其中React 查看详情
前后端分离
...进行开发,极大地提升了开发效率3.发现问题之后也可以快速定位到问题。如果是接口的问题,则后端工程师来修复,如果是页面问题,则由前端工程师来修复,也降低了维护成本4.可以应对复杂多变的需求,一套API可以用于不... 查看详情
前后端分离式(代码片段)
...端项目练习1.1.需求模拟用户登录过程,利用前后端分离的开发方式,完成项目练习1.2.项目结构pom.xml<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="htt 查看详情
drf入门规范(代码片段)
一web应用开发模式1.1前后的不分离#前后端混合开发(前后的不分离):返回的是html的内容,需要写模板1.2前后端分离#前后端分离:只专注于写后端接口,返回json/xml格式数据#xml格式数据<xml><name>hjj</name></xml>#js... 查看详情
laravel9+vue的前后端分离开源项目
...化、高性能的前后端分离架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发,提升... 查看详情