1.Vue简介
Vue.js 是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
Vue是当前市场前端框架的三大巨头之一:
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快。
官网地址:https://cn.vuejs.org/
2.MVVM模式
在正式学习Vue之前我们先来认识一种数据交互方式
-
M:Model,模型,主要是指后端传递的数据
-
V:View,视图,页面显示的最终效果
-
VM: View-Model,视图模型,模型与视图的双向绑定操作(无需开发人员干涉)
在MVVM之前,从后端获取的Model数据需要通过DOM操作渲染到View中
而MVVM模式中VM要做的事情就是将复杂繁琐的DOM操作完全的封装起来,开发人员不再需要关心
Model和View之间是如何互相影响的,只需要清楚两点:
- 只要Model发生了改变,View的数据也会随之发生改变
- 当用户 修改了View,Model中的数据也会跟着发生改变
MVVM把开发人员从繁琐的DOM操作中解放出来,将关注点可以全部放在Model的业务逻辑中
3.Node和NPM
为了后续学习的方便,我们首先要做好Vue运行环境的搭建,安装Node以及NPM工具,可以简单理解为Node是Vue的运行环境(相当于JRE的存在),而NPM是Node提供的模块管理工具(类似于Maven),可以非常方便的下载安装很多的前端框架,包括JQuery,AngularJs,VueJs等
3.1.安装Node.js
下载地址:https://nodejs.org/en/download/
这里采用的是10.15.3版本,安装路径建议大家默认安装路径
如果选择了其他安装路径,需要额外在本地环境变量中配置环境变量(麻烦!!!)
安装完毕后通过cmd查看安装状态:
node -v
3.2.配置NPM
安装Node会自带安装NPM,控制台可以查看NPM安装状态:
npm -v
npm默认的仓库地址是在国外网站,速度较慢,推荐大家设置到国内淘宝。首先需要安装一款切换工具nrm。
nrm(NPM registry manager)是切换npm源(仓库)很简单且方便的工具。
我们首先安装nrm,这里-g
代表全局安装
npm install nrm -g
然后通过nrm ls
命令查看npm的仓库列表,其中 带*
的表示当前选中的镜像仓库:
nrm ls
通过nrm use taobao
来指定要使用的镜像源:
nrm use taobao
通过 nrm test taobao
测试镜像源延迟(测试是否能够通信)
nrm test taobao
注意:安装完不会及时生效,需要重新启动系统!
或者,直接配置仓库:
npm config set registry http://registry.npm.taobao.org/
4.快速入门
4.1.创建工程
4.2. 安装vue
4.2.1. 下载安装
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。
4.2.2. 使用CDN安装
直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
4.2.3. npm安装(推荐)
在IDEA控制台输入npm init -y
命令初始化当前项目生成package.json文件(该操作相当于给maven工程添加pom文件)
生成的package.json文件为当前项目的基本描述信息,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等), 通过npm install
命令可以下载所需要的具体模块
安装 Vue,输入命令npm install vue -save
安装完,项目中会多出我们需要的vue资源目录:
就和在pom文件中引入依赖一样,package.json也会有所变化:
4.3.Vue入门案例
4.3.1.HTML模版
4.3.2 .Vue渲染
<body>
<div id="app">
<h1>{{name}},魅力四射!</h1>
</div>
<script type="text/javascript">
//生成一个Vue实例
var app = new Vue({
el:"#app",//el,即element,根据id选择要渲染的元素
data:{//数据(Model)
name:"赵本山"
}
})
</script>
</body>
-
new Vue({})用来创建Vue实例
-
然后构造函数接受一个对象,对象中的一些属性
- el: 是element的缩写,通过id选中要渲染的页面元素,本案例中对应的是
标签
- data: 数据,可以是一个对象,或者数组,里面的属性都可以渲染到视图中
- name:指定的具体属性名称(可以随意添加任意属性名)
- el: 是element的缩写,通过id选中要渲染的页面元素,本案例中对应的是
-
在页面元素中 通过{{name}},渲染在data中定义的属性.
页面渲染效果:
4.3.3.双向绑定
基于刚才的页面简单进行修改:
<body>
<div id="app">
<input type="text" v-model="num" >
<h1>{{name}},魅力四射!</h1>
<h2>
{{num}}位女神为他痴迷!!!
</h2>
</div>
<script type="text/javascript">
//生成一个Vue实例
var app = new Vue({
el:"#app",//el,即element,根据id选择要渲染的元素
data:{//数据(Model)
name:"赵本山",
num:1
}
})
</script>
</body>
- 我们在data添加了新的属性:
num
- 在页面中有一个
input
元素,通过v-model
与num
进行绑定。 - 同时通过
{{num}}
在页面输出
我们可以观察到,输入框的变化引起了data中的num的变化,同时页面输出也跟着变化。
- input与num绑定,input的value值变化,影响到了data中的num值
- 页面
{{num}}
与数据num绑定,因此num值变化,引起了页面效果变化。
没有任何dom操作,这就是双向绑定的魅力。
4.3.4. 事件处理
在div
中添加一个按钮
<input type="button" v-on:click="numadd" value="+">
其中 v-on
是vue中的指令:click即绑定点击事件,直接针对data的num属性进行自增长操作
点击按钮时,num属性会做自增长操作.
除了直接在绑定的事件中处理属性,我们还可以在Vue实例中声明方法,通过指定的方法做相关操作
在div
中再添加一个按钮,通过click指定需要执行的方法名
<input type="button" v-on:click="reduce" value="-">
vue实例中添加methods
选项并配置具体方法
<script type="text/javascript">
//生成一个Vue实例
var app = new Vue({
el:"#app",//el,即element,根据id选择要渲染的元素
data:{//数据(Model)
name:"赵本山",
num1:1
},
methods:{//声明方法
reduce(){
this.num1--;
},
numadd(){
this.num1++;
}
}
})
</script>
点击按钮触发reduce方法操作num自减