一、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的基本使用
Hello {{username}}
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()}}；
指令：强制数据绑定
{{msg}}
{{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属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果；
姓：
名：
姓名1（单向）：
姓名2（单向）：
姓名3（双向）
计算属性的get和set
使用计算属性实现上述的双向绑定，代码如下：
姓：
名：
姓名3（双向）
注意：计算属性存在缓存，多次读取只执行一次getter计算；
监视
通过vm对象的$watch()方法或者watch配置来监视某一个属性的值是否发生变化，当属性发生变化时，通过执行回调函数来执行相关的功能，下面的代码是使用计算属性完成的同一个功能，
姓：
名：
姓名2（单向）：
姓名3（双向）
1.5.class和style绑定
在某些页面中，某些元素的样式是动态发生变化的，class和style绑定就是用来实现动态改变样式效果的技术，其中class绑定中，表达式可以是字符串，可以是对象，也可以是数组，实例如下：
class和style绑定
class绑定
我是字符串
我是对象
style绑定
我是style强制绑定
1.6.条件渲染
在vue中条件渲染使用v-if、v-else和v-show指令，二者不同的地方在于v-if是不会生成不应该显示的元素，v-show是通过css控制隐藏不应该显示的节点元素，是在页面生成的，当需要频繁的切换时，使用v-show比较好，当条件不成立时，v-is的所有子节点也不会被解析；
显示成功
显示失败
显示成功-v-show
显示失败-v-show
1.7.列表渲染
列表的渲染使用的是v-for指令，可以渲染数组和对象，注意的是遍历的时候指定唯一的index或者key，另外在做数组的删除和更新操作时使用数组的变异方法，有关vue的数组变异方法可以参考官方API；
v-for遍历数组
{{index}}===={{u.name}}===={{u.age}}==
==
v-for遍历对象
-
{{value}}==={{key}}
列表渲染-列表过滤和排序
{{index}}===={{u.name}}===={{u.age}}
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中允许自定义过滤器，所谓过滤器就是：对要显示的数据进行特定格式化后在显示，例如时间格式化等，注意的是：并没有改变原本的数据，只是产生新的对应数据；
当前完整时间为：{{data | dateString}}
当前日期为：{{data | dateString('YYYY-MM-DD')}}
当前时间为：{{data | dateString('HH:mm:ss')}}
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] { display: none }
内置指令
四川码酱
{{msg}}
说明：
v-cloak指令是为了页面加载数据缓慢时候显示{{xxx}}标签而出了一个指令，与CSS搭配使用
自定义指令
注册全局指令，方法如下：
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
注册局部指令，方法如下：
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
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的组件，
{{ msg }}
然后，我们在App.vue中使用我们自己定义的组件
我们知道使用Webpack打包后会生成一个js文件，也就是入口文件main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app', // 挂载到入口Dom节点（index.html）
components: { App }, // 映射组件标签
template: '2.2.项目打包发布方式
打包命令：npm run build
使用静态服务器：安装命令：npm install -g serve，发布命令：serve dist，然后直接访问就可以了
使用动态web服务器（Tomcat）:修改webpack.prod.conf.js，加入output: {publicPath: '/xxx/' //打包文件夹的名称}，然后重新打包，将dis文件夹的名称改为项目名称，放在tomcat的webapp目录下，访问即可；