Vue.js
基础
一套用于构建用户界面的渐进式框架, 核心库只关注视图层，易于上手，便于与第三方库或现有项目整合，且轻量。
声明式渲染
使用插值表达式，基于 MVVM 来动态的影响页面与变量
# 页面上键入插值表达式{{ message }} # View 角色
# 然后，进行 ViewModle 数据绑定。是 VM 角色varapp =newVue({ # 新建 Vue 实例 el:'#app', # 通过ID选择器，来接管 div 区域 data: {message:'Hello Vue!'# 是 Model 角色 }})
双向绑定
使用 v-modle 指令实现双向绑定
可以在一个 app 块中绑定多个变量，在赋值的时候使用逗号隔开。这样就渐渐的相当于 angula.js 使用 ng-app 声明在 body上占地为王一样
varapp =newVue({el:'#app',data:{flag:true,user:"张三"}});
并且可以在浏览器调试页，使用 app.变量名 = 值 ，替换变量的值。
条件与循环
条件：v-if="变量名";
当变量的值为 true 时，显示被 v-if 指令所在标签包裹的HTML内容。当值为 false 删除其所在html标签
你能看见我吗？
varapp3 =newVue({el:'#app-3',data:{flag:true}});
隐藏：v-show = "变量名"；
当变量的值为 false 时，为DOM的HTML标签添加CSS属性： style="display: none;"
因此：对于经常需要进行显示/隐藏切换的DOM标签，使用 v-show 性能更加优异
循环：v-for="临时变量 in 变量"
varapp =newVue({el:'#app',data:{users:[ {"name":"张三","age":23}, #JSON格式定义对象 {"name":"李四","age":24}, {"name":"王五","age":25}, {"name":"赵六","age":26} ] }});
在调试页中可以使用 app.users.push({"name":"xxx","age":23}) 动态添加数据
定义一个唯一的字段作为 key ，可以提高遍历效率
在遍历时以如下方式使用 index
处理用户输入
组件化
组件：页面上的某一部分，当一个网页非常大时，可以将该网页的内容拆分成几个部分，便于维护
定义组件
定义全局组件
Vue.component('todo-item', { # 通过 Vue.component('组件名'，{组件内容}) 定义组件 template :"<li>Item</li>"# 通过 template 属性定义组件的内容});
- <!-- 在页面以标签的方式使用组件 -->
定义局部组件
// 定义局部组件varTodoList = {template:"<li>Item</li>"};// 注册局部组件newVue({el:'#app',components: {"todo-item": TodoList # 仍然在页面使用 todo-item 这个名字来使用组件 })
利用组件实现 todolist
- <!-- 在使用组件的时候，可以进行传值，使用 : 变量名 = “值” -->
// 全局组件Vue.component('todo-item', {props: ['content'], # 用来接收传过来的值 template:"<li>{{content}}</li>"# 使用插值表达式来显示值});
组件和实例的关系
一个组件也是一个实例
组件里面也可以写：methods / data / computed 属性
任何Vue项目都是由 n 个实例构成的
对于根实例，虽然没有显式的定义 template 模板属性，但是Vue会根据 el 属性，去找挂载点，将挂载点里面的全部内容作为模板
组件之间的交互
父子组件之间的交互
父组件向子组件传递数据：
使用 : 属性名 = “值” 的方式传递，子组件 使用 props : ["属性名1"， "属性名2"] 的方式接收
子组件向父组件传递数据：
使用 : this.$emit("消息名"， 参数) 的方式来发送消息，在父组件的模板中使用 @消息名 = “函数名” 的方式来接收消息并处理。
具体的使用见练习2.
挂载点、模板、实例
挂载点： el 属性绑定的DOM标签。用来声明Vue的作用域。不包含标签内部的变量
模板： 挂载点内部的HTML内容统称为模板。模板的定义方式有两种：
直接定义在挂载点所在的标签体内
在 Vue 实例里使用 template 定义：
varapp =newVue({el:'#app', # 模板内容会覆盖原本挂载点里面的内容，请注意 template:"<h1>Hello {{msg}}</h1>", # 定义模板时，需要用标签来包装内容，否则无法识别 data:{msg:"Hello World"}});
实例：创建的 Vue 对象
使用
安装
Vue.js 不支持IE8及以下版本，因为他使用了IE８不支持的 ECMAScript5 的特性。
引入核心库
<!-- 开发环境下引入完成包，生产环境引 min.js 包 -->
指令
以 v- 作为前缀，vue指令会在渲染的DOM上应用特殊的响应行为。
v-text
绑定DOM标签内的text文本内容。如果内容中存在HTML标签，会被原样展示
v-html
绑定DOM标签内HTML内容
v-on:click = "functionName"
绑定单击事件。注意：单击调用的方法只写方法名，不写小括号
在实例中定义 methods 对象，对象内部可以定义方法
另外， v-on:click 也可以简写成: @click
varapp =newVue({el:'#app',data:{text:"Hello"},methods:{ # 这个属性用来定义实例中的方法 changeText :function(){ app.text ="World"} }});// 或者可以采用 this.text 的方式来更改 textchangeText :function(){this.text ="World"}
属性绑定
v-bind:title="title"
为 title 属性后面的内容赋予了特殊的意义。例如此例中 “” 内的 title 表示Vue实例中的title变量的值
v-bind： 可以简写为 ： ：
计算属性
computed
用来对变量进行一些运算操作。
优点：当参与运算的变量没有改变时，结果会采用上一次的缓存值
姓：名：
使用 computed 属性来定义参计算结果的函数
newVue({el:'#app',data:{firstName:"", # 必须提前定义为 “” 否则页面会显示fullName为undefinedlastName:""},computed:{ # 定义计算属性 fullName :function(){returnthis.firstName +" "+this.lastName; # 返回字符串拼接结果 } }});
侦听器
watch
监听某个数据的变化，当它产生变化时，执行回调函数
watch: { # 定义侦听器 fullName :function(){ # 侦听的变量为 fullNamethis.count ++ ; # 回调函数方法体 }}
练习1
需求：如上面的动图，当输入框输入内容后，点击提交就会在下面的列表展示新添加的数据，如果用户没有写任何数据点击提交，提示他应该输入之后才能点击
<!-- 添加ref属性，以便使用Vue选择器来获取该输入框的 -->提交
- <!-- 添加key属性，提高遍历速度 -->{{entity.num}}
varapp =newVue({el:'#app',data:{num:"",list:[ {num:1}, {num:2}, {num:3}, {num:4} ] },methods:{add:function(){if(this.num){this.list.push({num:this.num});this.num =""; # 添加完成后，删除原来的数据 }else{ alert("请输入要添加的内容后重试！");this.$refs.id.focus(); # vue语法，让输入框获得焦点，提高用户体验 } } } });
练习2
完成 TodoList 中点击某个 li 删除它的功能
提交
// 全局组件Vue.component('todo-item', {props: ['content','index'], # 子组件接收数据 template:'<li @click="deleteItem">{{content}}</li>', # 绑定点击事件 methods:{deleteItem:function(){this.$emit("delete",this.index); # 子组件向父组件发送消息，携带该 li 的index 数据 } } });newVue({el:'#app',data: {num:"",list: [] },methods: {add:function(){if(this.num) {this.list.push(this.num);this.num =""; }else{ alert("请输入要添加的内容后重试！");this.$refs.id.focus(); } },handleDelete:function(index){ # 父组件收到消息后执行删除方法，删除对应 index 的 li 标签// alert(index);this.list.splice(index,1); } } });
Vue 脚手架工具 vue-cli
首先安装 node.js
下载地址：
https://nodejs.org/en/download/
下载对应系统的版本，双击安装即可。安装完成后会自动添加全局变量。使用 node -v 来确认是否安装成功
安装 NPM
(Node Package Manager)他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，NPM的功能和服务端项目构建工具maven差不多，我们通过npm 可以很方便地下载js库，打包js文件。
node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本
设置包路径，
包路径就是npm从远程下载的js包所存放的路径。使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）
使用下面的命令来设置：
npm configsetprefix"C:\develop\nodeJS\npm_modules"npm configsetcache"c:\develop\nodeJS\npm_cache"
安装淘宝的镜像。镜像默认是使用国外的网络来下载的。网速很慢，因此我们配置一个国内的镜像
npminstall -g cnpm --registry=https://registry.npm.taobao.org
安装完成后使用：cnpm -v 来查看
注意：如果安装后，出现 cnpm 不是内部或外部命令，也不是可运行的程序。就需要检查cnpm 的路径是否正确。将 cnpm包的所有文件复制和 npm.cmd 文件在同一级目录下即可。
究其原因：是因为环境变量中仅仅配置了 npm.cmd 所在文件夹路径，我们也可以将 npm_modules 目录添加到环境变量中，这样也不会出现这个问题。推荐使用该方法
添加环境变量：
在 PATH 中添加：
安装 nrm
cnpm install -g nrm
切换镜像
查看已安装的镜像 ： nrm ls 切换镜像 nrm use XXX
最后，安装 vue-cli 客户端
npm install --global vue-cli
创建新的Vue项目
创建一个文件夹，用于存放和维护 Vue 项目，这里我创建的是 c:\develop\VueProjects
切换到该文件夹，打开cmd。然后输入： vue init webpack 项目名
配置按照下图设置
最后一行选项选择的是包/依赖安装方式
创建完成后，切换到项目路径。使用 npm run dev 命令启动项目
将项目导入IDEA
这里因为我电脑上只有IDEA并且懒得安装前端编程IDE，所以就使用IDEA来编程
安装后会存在一个问题，IDEA 并不能正确识别 .vue 文件(我是2018.2版本，不知新版解决没有)，因此会将.vue文件识别成普通文本文件，给我们编码带来很大的不便，解决办法如图：
另外，IDEA也不能识别ES6语法，我们也需要进行一些配置：
通过上面的两个设置，就可以愉快的使用 IDEA 进行 Vue 项目编程啦！
Vue-Cli 中编辑的项目是支持热部署的，耶！
Vue项目结构
项目根目录下有一个 index.html
<!DOCTYPE html>todolist<!-- 这里定义了一个 app 的挂载点 --><!-- built files will be auto injected -->
src 目录下有 main.js 是 Vue 项目的入口js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.importVuefrom'vue'importAppfrom'./App'Vue.config.productionTip =false/* eslint-disable no-new */newVue({el:'#app',components: { App }, # 这里采用 ES6 的语法，如果某 key 和 value 是一样的，可以简写成 key template:'<App/>'})
可以看出，入口文件引入了同目录下的 App.vue 文件，那么这个文件里面有什么内容呢？
importHelloWorldfrom'./components/HelloWorld'exportdefault{name:'App',components: { HelloWorld }}#app{font-family:'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color:#2c3e50;margin-top:60px;}
由此可见，Vue 项目对各个模块进行了拆分，以达到解耦的目的。具体的好处且往下看
练习3
使用 vue-cli 实现 TodoList
打开上面创建的 TodoList 项目，修改 App.vue 文件名称为 TodoList.vue ， 并修改其他文件中的引用名
编辑 TodoList.vue 的模板文件，代码如下：
- 1
- 2
- 3
这时打开浏览器会发现报错了：
因此我们对模板文件进行修改，使用一个 div 包裹上面的两个标签，发现浏览器可以正常显示了
数据绑定
在 vue-cli 中，数据绑定采用另外一种语法：此时数据不是直接绑定，而是间接通过函数来返回
export default {<!-- 以下是 data : function(){} 的缩写 -->data(){ return { inputValue : "" } } }
单击事件
给提交按钮添加单击事件：
提交
定义函数：依然可以采用 ES6 的语法，简略的写成 handleClick(){}
exportdefault{methods:{ handleClick (){ alert(123) } } }
建立子组件
vue-cli 的子组件放在 compontents 目录下：
复制一份干净的 .vue 代码，起名 TodoItem.vue
exportdefault{}
添加模板数据，在 TodoList.vue 实例中引入 TodoItem.vue 组件，并注册
// 引入组件， import 组件名 from 组件路径importTodoItemfrom'./components/TodoItem'exportdefault{// 注册组件， ‘组件标签名’：组件名 components:{'todo-item': TodoItem },......
找到合适的位置，添加组件标签
父组件向子组件传值
通过定义属性的方式来给子组件传值：
定义 content 属性，index 属性传给子组件
子组件声明接收的值：
exportdefault{props:['content'] }
通过插值表达式来显示值：
子组件向父组件传值
通过发布/订阅的方式来实现子组件向父组件传值
在子组件的单击方法中定义发布消息的事件，事件名 delete, 参数：当前 li 元素的 index
handleDelete(){this.$emit('delete',this.index)}
父组件接收消息：并触发函数的执行
全局样式与局部样式
对于每一个 vue 文件都包含 style 标签，这个 style 标签有一个属性 scoped 如果添加此属性则该标签内所有的样式仅对当前文件有效。开发中尽量都添加上使得文件间的耦合性更低
结语
“我自己是一名从事了5年前端的老程序员，辞职目前在做讲师，今年年初我花了一个月整理了一份最适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架，实战项目都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。"
想要学习web前端的加群956766604
