前端-Vue核心知识

Vue核心知识

1.1.Vue的基本简介

学习一门技术首先登陆其官网，中文网址，英文网址，vue是一款渐进式JavaScript框架，作用是为了动态构建用户界面，该框架遵循MVVM模式，编码简洁，体积小，运行效率高；他借鉴了angular的模板和数据绑定技术，借鉴了react的组件化和虚拟DOM技术，当然，该技术也存在一个Vue全家桶，例如vue脚手架：vue-cli，ajax请求：vue-resource，路由：vue-router，状态管理：vuex，图片懒加载：vue-lazyload，移动端UI组件库：min-ui，PC端组件库：element-ui，页面滑动：vue-scroller等等插件；

1.2.Vue的基本使用

vue的HelloWord编码说明

• 使用vue首先引入Vue.js，然后创建Vue对象，其中el表示指定的根element选择器，data是指初始化数据，双向数据绑定使用v-model，显示数据使用语法：{{xxx}}；
• vue的MVVM的体现就是：model代表模型，上述代码就是数据对象（data）,view代表视图，就是vue中的模板页面，viewModel代表是视图模型（vue实例）；

1.3.模板语法

所谓的模板就是动态的Html页面，包含了一些JS语法代码，在Vue中使用双大括号表达式和指令（以v-开头的自定义标签属性）；

双大括号表达式

语法是：{{xxx}}，作用就是向页面输出数据，可以调用对象的方法，例如{{msg.toUpperCase()}}；

指令：强制数据绑定

上述代码中的img标签的src属性不会获取到data中定义的imgSrc属性的值，这个时候就需要使用指令强制数据绑定，功能就是指定变化的属性值，完整写法是：v-bind:src='imgSrc'，一般采用简洁写法：:src='imgSrc'；正确写法如下：

指令：绑定事件监听

绑定事件监听指令的作用就是绑定指定事件名的回调函数，完整写法：v-on:click='xxx'或者v-on:click='xxx(参数)'再或者v-on:click.enter='xxx'，简洁写法就是：@click='xxx'，使用@符号；

1.4.计算属性和监视

计算属性

在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果；

计算属性的get和set

使用计算属性实现上述的双向绑定，代码如下：

注意：计算属性存在缓存，多次读取只执行一次getter计算；

监视

通过vm对象的$watch()方法或者watch配置来监视某一个属性的值是否发生变化，当属性发生变化时，通过执行回调函数来执行相关的功能，下面的代码是使用计算属性完成的同一个功能，

1.5.class和style绑定

在某些页面中，某些元素的样式是动态发生变化的，class和style绑定就是用来实现动态改变样式效果的技术，其中class绑定中，表达式可以是字符串，可以是对象，也可以是数组，实例如下：

1.6.条件渲染

在vue中条件渲染使用v-if、v-else和v-show指令，二者不同的地方在于v-if是不会生成不应该显示的元素，v-show是通过css控制隐藏不应该显示的节点元素，是在页面生成的，当需要频繁的切换时，使用v-show比较好，当条件不成立时，v-is的所有子节点也不会被解析；

1.7.列表渲染

列表的渲染使用的是v-for指令，可以渲染数组和对象，注意的是遍历的时候指定唯一的index或者key，另外在做数组的删除和更新操作时使用数组的变异方法，有关vue的数组变异方法可以参考官方API；

列表渲染-列表过滤和排序

1.8.事件处理

在vue中绑定监听使用@xxx='fun',其中点击函数和传参数和不传参数，默认事件的形参是event,当需要传参的同时需要默认event时候，使用隐含属性对象@xxx = fun(123,$event)；事件有两个修饰符：.prevent：阻止事件的默认事件的默认行为和.stop：停止事件冒泡；按键修饰符使用keyup.keyCode = fun()：keycode是键盘输入对应的ketcode值，可以使用名称，但是存在一部风没有；

1.9.表单输入绑定

表单的数据绑定使用v-model指令，具体相关编码如下：

1.10.Vue的生命周期

常用的生命周期方法：create()/mounted():常用于发送Ajax请求启动定时器等异步任务，beforeDestory()：常用于做一些收尾工作，例如关闭定时器；

说明：beforeCreate、created、beforeMount、mounted初始化方法只执行一次，beforeUpdate、updated执行多次，beforeDestroy、destroyed死亡方法，也执行一次；

1.11.过渡和动画

在vue中动画就是操作css的trasition或者animation属性，vue会给目标元素添加和移除指定的class，只不过要遵循一定的命名规则，

1.12.过滤器

在vue中允许自定义过滤器，所谓过滤器就是：对要显示的数据进行特定格式化后在显示，例如时间格式化等，注意的是：并没有改变原本的数据，只是产生新的对应数据；

1.13.内置指令和自定义指令

常用的内置指令

• v:text : 更新元素的 textContent
• v-html : 更新元素的 innerHTML
• v-if : 如果为 true, 当前标签才会输出到页面
• v-else: 如果为 false, 当前标签才会输出到页面
• v-show : 通过控制 display 样式来控制显示/隐藏
• v-for : 遍历数组/对象
• v-on : 绑定事件监听, 一般简写为@
• v-bind : 强制绑定解析表达式, 可以省略 v-bind
• v-model : 双向数据绑定
• ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
• v-cloak : 防止闪现出现{{xxx}}, 与 css 配合: [v-cloak]

说明： v-cloak指令是为了页面加载数据缓慢时候显示{{xxx}}标签而出了一个指令，与CSS搭配使用

自定义指令

注册全局指令，方法如下：

注册局部指令，方法如下：

1.14.核心知识总结

• Vue是前端开发库，用于构建用户界面，遵循MVVM模式，编码简洁，体积小，效率高，包含了一些列插件库；
• 基本使用：引入vue.js，创建vue实例对象，其中el代表dom标签选择器，data代表初始化数据对象；
• el：指定dom标签容器的选择器，一般写一个根标签；
• data：对象或者函数类型，指定初始化状态属性数据的对象，页面中可以使用{{xxx}}直接访问
• methods：包含多个方法的对象，供页面中的事件指令来回调，回调函数默认有$event参数，也可以指定自己的参数，在方法中，访问data中的属性直接使用this.xxx；
• computed：计算属性，包含多个方法的对象，对状态属性进行计算处理后返回给页面一个新的数据，使用get和set方法实现属性的计算读取，同时监视数据的变化；
• watch：监视，包含多个属性监视的对象，xxx.function(value){}，可以传入两个参数，代表新值和改变前的值，也可以使用vm.$watch('xxx', function(value){})的方式添加监听；
• vue中的过渡和动画，实质就是vue操作css的transition/animation属性；
• 生命周期：常用的钩子函数是created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)和beforeDestroy(): 做一些收尾的工作例如清除定时器等；
• 自定义过滤器：使用的是Vue.filter(filterName,function(value){})，在页面使用方法：{{myData | filterName(arg)}}，参数可传可不传；
• vue内置指令：v-for遍历、@绑定事件、v-model数据双向绑定、ref标识标签；
• 自定义指令：使用Vue.directive注册全局指令，使用directives注册局部指令；

注意：数据在哪个组件，更新数据的行为（方法）就应该定义在那个组件中

二、Vue组件化编码方式

2.1.使用vue-cli创建模板项目

vue-cli是vue官方提供的脚手架工具，首先确认安装了node和npm，最好安装一个cnpm，使用方法如下：

• npm install -g vue-cli
• vue init webpack vue_demo 其中 vue_demo是项目名
• cd vue_demo
• npm install或者npm run dev

项目结构说明

• build : webpack 相关的配置文件夹(基本不需要修改)
  • dev-server.js : 通过 express 启动后台服务器
• config: webpack 相关的配置文件夹(基本不需要修改)
  • index.js: 指定的后台服务的端口号和静态资源文件夹
• src : 源码文件夹
  • components: vue 组件及其相关资源文件夹
  • App.vue: 应用根主组件
  • main.js: 应用入口 js
• static: 静态资源文件夹
• .babelrc: babel 的配置文件
• .eslintignore: eslint 检查忽略的配置
• .eslintrc.js: eslint 检查的配置
• .gitignore: git 版本管制忽略的配置
• index.html: 主页面文件
• package.json: 应用包配置文件
• README.md: 应用描述说明的 readme 文件

简单的使用Vue模板项目

首先，我们编写了一个HelloWord的组件，

然后，我们在App.vue中使用我们自己定义的组件

我们知道使用Webpack打包后会生成一个js文件，也就是入口文件main.js

2.2.项目打包发布方式

打包命令：npm run build

使用静态服务器：安装命令：npm install -g serve，发布命令：serve dist，然后直接访问就可以了

使用动态web服务器（Tomcat）:修改webpack.prod.conf.js，加入output: {publicPath: '/xxx/' //打包文件夹的名称}，然后重新打包，将dis文件夹的名称改为项目名称，放在tomcat的webapp目录下，访问即可；