微服务前后端分离4、Vue.js框架详细笔记（此教程只能使你快速了解一些个人web开发者必须懂的vue知识）

命令（供日后查阅使用）

• cmd窗口命令
  • 1、node -v：查看node版本信息
  • 2、npm -v ：查看npm版本信息
  • 3、npm install nrm -g：给npm下载nrm插件
  • 4、nrm ls ：查看仓库镜像
  • 5、nrm use taobao ：使用taobao镜像
  • 6、nrm test taobao ：测试tao镜像速度
• 终端命令（其实都是一个东西，这里只是为了方便查询）
  • 1、npm init -y ：终端初始化npm项目
  • 2、npm install vue --save：将vue安装到当前项目
  • 3、

1、Vue介绍

• Vue.js框架是由国人尤雨溪开发的框架，使用此框架有两种方法，一个是直接官网下载安装包，第二种是用npm引入依赖使用vue.js，和使用Maven一样，我们选择使用npm的方式使用Vue

2、下载安装node.js

• 1、进入官网下载
• 2、傻瓜式安装完成后，打开命令行cmd输入相应命令查看是否安装成功
• 3、安装nrm插件，帮我们自动切换镜像（和Maven一样，默认是到外网仓库下载，十分的慢，我们一般会多设置几个镜像以提高引入依赖速度），因为手动切换镜像，在npm中比较麻烦，我们选择安装nrm插件的方式，自动帮我们切换镜像，输入命令npm install nrm -g安装插件
• 4、使用nrm将镜像转换为淘宝（可以自己挨个用nrm test 镜像名的形式测试速度，然后使用合理的镜像）
• 5、重启计算机（否则无法生效）

3、使用idea集成vue（不使用idea可以使用官方推荐的HBuilderX，然后在软件左下角打开命令行终端）

• 使用HBuilderX如何打开终端
• 1、创建纯静态工程
• 2、引入vue.js依赖
  • 1）、初始化npm项目:npm init -y
  • 2）、安装vue：
    • npm install vue --save：只安装到当前项目（选择这个）
    • npm install vue -g：安装到全局，所有地方都可以使用vue（我们不需要全局）
• 3、新建一个Html文件，引用vue.js
• 4、测试（idea中右键你的html文件点击run即可运行）

4、快速上手Vue进行一些简单操作

• 了解vue
  • 1）、我们通过vue的构造函数创建一个vue对象，这个vue对象会对页面指定元素生效，vue的构造函数可以定义普通变量，方法等等内容
• 1、使用v-model属性在标签中关联
• 2、使用@+事件名的形式，在事件中关联属性
• 3、引用方法
• 4、方法中调用其他变量

5、正式开始学习Vue，Vue指令

• 指令就是带有v-前缀的或者将一些指令简写成@符号的指令
• 1、插值表达式：{{值}}（不建议使用，网速较慢时，会将表达式直接闪烁出来）
• 2、代替插值表达式的指令
  • v-text:将数据输出到元素内部，数据若有HTML代码，作为普通文本输出
  • v-html:与v-text的区别是，数据中有HTML代码，将解析并渲染
  • 注意这两个指令是单向指令，就是只能单方面输出值
• 3、v-model指令
  • 双向指令，就像我们前面例子中对num的操作，不仅可以将值输出到页面，还可以通过文本框改num的值，然后同步到页面上（不仅仅是文本框，其他可以改值的标签都可以使用）
  • 再举个例子
• 4、v-on：指令
  • 给页面元素绑定事件，可简写成@符号，前面已经说过了，这里就不赘述了。
  • 事件冒泡，当我们为父标签和子标签（例如div标签中有一个按钮）都绑定了单击事件或者其它可能同时触发的事件，而我们只想让子标签执行事件，但这时父标签也同时执行了事件，就叫事件冒泡。处理这些问题需要事件修饰符
  • 事件修饰符
    • .stop:阻止事件冒泡
    • .prevent:阻止默认事件发生（a标签，不想让其跳转，就可以使用，阻止标签默认事件跳转的发生）
    • .capture:使用事件捕获模式
    • .self:只有元素自身触发事件才执行（冒泡或捕获都不执行）
    • .once:只执行一次
  • 阻止事件冒泡（这里不想让button冒泡，就给button加就可以了，不想让谁冒泡就给谁加）
• 5、v-for页面循环遍历
  • 可以非常方便的遍历循环数据
  • 语法：v-for="(item,index) in items"
    
• 也可以遍历对象，可以传3个参数，语法v-for="(value,key,index) in object"
  
• 遍历数字序列
• 提升渲染效率的方法
  • 当我们某个循环遍历内容经常发生改变时，vue默认会全部重新渲染，这时我们可以为经常发生改变的循环加一个唯一标识，当被标识循环发生修改时，不重新渲染其他内容，只针对标识内容重新渲染
• 6、v-if，条件分支，根据条件是否成立决定是否渲染指定内容
• 6、v-for嵌套v-if
  • 执行顺序：先执行for然后执行if判断条件
  • 如果想实现if-else效果，可以写两个v-if，毕竟前端页面本身就没有多少可以渲染的内容 ，当然Vue提供了v-else-if和v-else两个与v-if配套的命令，普通代码怎么写，它们就怎么配合在一起写
• 7、v-show标记，和v-if效果上一模一样，但是本质区别在于，v-if是决定标签存不存在，而v-show是通过display属性控制标签是否显示
  • 也就是说，v-show标记修饰的标签，一直存在，只是能不能看见的问题
  • if更消耗资源，因为比起消除和添加属性，修改样式是最简单的
• 8、v-bind: 可以简写成“：”冒号，作用是属性绑定
  • 一般用来为指定标签的属性绑定vue属性，实现实时效果
  • 使用对象实现相同效果

6、Vue属性

• 1、computed 计算属性
  • 本属性是个属性，但它传入的是方法，可是和methods不一样，调用时，methods里面是方法得加入括号，但是computed是个属性，它里面的方法居然也要当成属性来调用
  • 所以可以得出结论，虽然我们看到的是方法，但其实它只是长得像而已，实际上并不是方法
  • 这属性只是为了简写一些复杂计算代码，得到一个运算规则重复率高的返回值，所有只在第一次调用时进行运算，之后无论调用多少次都不会再参与运算了。
  • 而且不要忘了，属性是可以再运算的
  • 可以看到下面的例子调用时是没有加括号的

7、组件化（核心）

• 1、定义全局组件,需要使用vue的静态方法component，在里面传入id和vue对象
  • 组件与普通vue对象的区别
    • 普通vue对象是Vue的构造方法，而组件是Vue对象的一个静态方法
    • 普通vue对象靠el属性指定作用标签，而组件使用template来为页面添加组件
    • 普通vue对象是将自己作用在指定标签上，组件时给自己起个名，然后在指定位置调用，将自己添加到页面
    • 普通vue对象的data属性是一个对象，组件data属性是一个方法，返回值是对象
      
• 2、局部组件
  • 将组件对象单独拿出来定义成一个普通变量，然后传给Vue构造函数中的components属性里
  • 与全局组件唯一区别是，局部组件只能在指定它的构造函数对应的元素中生效，因为是在构造函数components属性中设置
• 组件调用父亲传过来的属性