1.Vue.js介绍
1.Vue.js是什么
Vue 是一套用于构建用户界面的渐进式前端框架。和Angular.js、React.js 一起,并称为前端三大主流框架!Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
2.Vue.js怎么使用
- 在html页面使用script引入vue.js的库即可使用。
- 使用npm管理依赖,使用webpack打包工具对vue.js应用打包。
- Vue-CLI脚手架,使用 vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
3.Vue.js有哪些功能
- 声明式渲染
- 条件与循环
- 双向数据绑定
- 处理用户输入
- 组件化应用构建
2.Vue.js基础
1.MVVM模式
Vue.js是一个MVVM的框架
MVVM 拆分解释为:
- Model: 负责数据存储
- View: 负责页面展示
- View Model: 负责业务逻辑处理(Ajax请求),对数据进行加工后交给视图展示
ViewModel可以把view视图和Model模型解耦合,ViewModel的要做的工作就是vue.js所承担的
2.Vue使用步骤
- 编写HTML,引入vue.min.js(vue.js类库)
- 编写视图部分的代码(用户界面,只负责展示)
- 编写VM(ViewModel)及其Model
- 刷新页面运行程序,vue.js(VM)部分实现将Model中的数据在View中展示
.Vue文件结构:
<template>
/*view部分*/
</template>
<script>
/*model及vm部分。*/
</script>
<style>
/*页面样式,不是必须*/
</style>
3.Vue常用指令
- v-model
1、在表单控件或者组件上创建双向绑定
2、v-model仅能在如下元素中使用:
input
select
textarea
components(Vue组件)
实现数据双向绑定:
a.由模型数据绑定到Dom对象,模型数据的值不变,Dom的值自动改变
b.由Dom对象绑定到模型数据,Dom对象的值不变,模型数据就改变
- v-text
可以将一个变量的值渲染到指定的元素中,它可以解决差值表达式的闪烁的问题 - v-on
监听用户事件,绑定一个按钮的单击事件 - v-bind
v-bind可以将数据对象绑定到Dom的任意属性中
v-bind可以给Dom对象绑定一个或多个特性,例如动态绑定style和class - v-if
进行判断 - v-for
可以循环遍历数组
4.Vue生命周期
生命周期:vue实例对象从创建到销毁的过程。分为八个阶段:创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreate:实例刚在内存中被创建出来
created:实例已经在内存中初始化完成
beforeMount:完成模板编译,没有挂载到页面中。
mounted:已经将编译好的模板挂载到了页面中指定的容器中。
beforeUpdate:页面状态更新之前执行,
updated:页面更新完毕之后调用
beforeDestroy:Vue实例销毁前调用
destroyed:Vue实例销毁后调用
beforeCreate(){
console.log('创建实例');
},
created(){
console.log('创建完成');
},
beforeMount(){
console.log('模板编译之前 ');
},
mounted(){
console.log('实力挂载完成');
},
beforeUpdate(){
console.log('更新前')
},
updated(){
console.log('更新后')
},
beforeDestroy(){
console.log('实例销毁前')
},
destroyed(){
console.log('实力销毁后')
}
3.webpack
1. webpack介绍
Webpack 是一个模块打包工具。webpack将项目中用到的一切静态资源都视为模块,模块之间可以互相依赖,webpack对它们进行统一的管理及打包发布 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。
以webpack.config.js为主要部分进行划分:
entry: 入口,定义整个编译过程的起点
output: 输出,定义整个编译过程的终点
module: 定义模块module的处理方式
plugins:插件,对编译完成后的内容进行二度加工
resolve.alias 定义模块的别名
2.安装webpack
1.node环境安装
在安装 Webpack 前,本地需要安装nodejs运行环境
下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/
安装测试:
1.home+r,输入cmd打开命令行窗口,进入安装路径,输入node -v.
2.安装Git,右键打开Git Bash Here命令行窗口,输入node -v
2.安装npm
node.js已经集成了npm工具,在命令提示符输入 npm -v 可查看当前npm版本
3.基于 Node.js 安装cnpm(淘宝镜像)
在命令行上输入以下命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
4.全局安装webpack
在命令行上输入以下命令:npm install -g webpack,测试是否安装成功输入 webpack -v,如果显示版本号则安装成功。
5.设置环境变量
修改系统变量PATH
path前面添加:"%NODE_HOME%"
新增系统变量NODE_HOME
在系统变量中新建,变量名:“NODE_HOME”,变量值:“E:\soft\node.js\npm_modules”(填写自己的安装路径)
安装测试:
HOME+R,输入cmd打开命令行窗口,输入node -v.
6.安装Vue
在命令行上输入以下命令:cnpm install vue -g
7.安装vue命令行工具,即vue-cli 脚手架
在命令行上输入以下命令:cnpm install vue-cli -g