Vue.js是当下很火的一个javaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
Vue 很早就支持 TypeScript，但配置起来比较麻烦，幸好有了 Vue CLI 3.0。安装好 vue-cli 之后，使用 vue create 项目名称 来创建项目，vue 脚本手架自动创建以项目名称命名的目录。
vue-cli 3 生成的项目结构比较科学，尤其是通过 components 和views 将作为控件的组件和作为页面的组件分离开来，结构更清晰。可以理解为 views 中定义的组件是要配置在路由中的，而 componets 中定义的组件是被其它组件调用的。
HTML 需要定义一个
作为 Vue 应用的容器，main.ts 中会通过 new Vue(…) 生成应用实例并将之与容器绑定。注意 HTML 中定义的
会被 App.vue 模板中定义的
替换掉。
Vue 是一个组件化的框架，组件是 Vue 的基本元素。一个 Vue 应用是由若干组件构成的，组件与组件之间的嵌套或并列关系，最终可以用树形来表示。main.ts 中创建的 Vue 实例是最顶层组件。
每个 Vue 组件都有三个组成部分，即骨架（HTML）、样式（CSS/LESS/SCSS）和脚本（JavaScript/TypeScript）。可以在一个 .vue 文件中写完三个部分，也可以将样式和脚本部分分别写成独立的文件。笔者推荐独立文件的方式。
既然我们选用 TypeScript，使用上图所示的 class-style 来实现 Vue 组件更为适合。
除了 class-style 之外，也可以使用 config-style。配置风格是最早支持的风格，将 Vue 的各类成员（属性、数据、计算属性、方法等）独立定义，易于理解 Vue 实例的内部结构，但初学者容易搞不清楚 this 指向。
Vue 定义的组件需要注册才能在其它组件中使用。注册的方式分为全局和局部两种。使用 TypeScript 和类风格开发 Vue 应用时，推荐使用局部注册。局部注册比较符合模式化开发思想。
Vue 可以通过 {{ }} 语法在文本中插值。但是如果要将值插入属性，则应使用 : 号修饰属性名。组件属性（指 HTML 标签参数）可随意定义，加 @Prop() 修饰即可，如果属性是必须的，应该使用 : 来定义；可选属性则使用 !: 来定义。
在 HTML 或自定义组件标签中使用 @ 前缀的事件名，可以绑定事件处理函数。Vue 实现了部分 HTML 事件，比如 @click 可以直接绑定。组件也可以“定义”自己的事件，不需要提前声明，只需要 this.$emit() 直接触发即可。
Vue 本身是数据驱动渲染，所以数据（包括属性、计算属性等）变化可以触发界面数据呈现，但是界面的输入要反馈给组件，就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖，使用 :属性名.sync=”…” 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。
路由主要用于组织视图（页面）关系。最基本的要求是为路由配置每个路径对应的组件。name 可以当作路径的简短别名。路由操作一般会使用注入到 Vue 实例中的router.push() 和$router.replace() 来跳转，二者的区别在于对 URL 历史的影响（可以想像）
路由项配置中的 component 可以指定为导入的的组件类，也可以指定一个异步（返回 Promise 的）函数，该函数动态加载组件并返回包含该组件类的 Promise 对象。上例中使用的 import() 动态引入语法。
做一个简单的登录界面加深对前面知识的理解和记忆。该示例特意避免了 Ajax 调用，以降低其复杂程度。
没有 Ajax 实现的远程认证，我们只能假设用户输入 pass 时为正确密码。用户名可任意输入，如果验证成功则会显示该用户已登录。
项目仍然是由 vue-cli 3 创建的。创建好之后去掉了 About 和 HelloWorld，加入了 Login，并将 Home 改造成三部分各自独立的文件结构。当然，顺便还按自己（或团队）的开发规范调整了下 tslint.json 中的配置。
App.vue、main.ts 和 router.ts 可以算得上是一个 Vue 应用的入口和基本配置。App.vue 中直接把控制权交给了 vue-router。注意，import 的时候不能省略 .vue 扩展名。
Login 组件中用到了双向绑定，由于属性（由 @Prop() 修饰）不可以在内部修改，甚至可以把它声明为 readonly（也许 Vue 3 会定义相关的规范）。注意到 keypress 事件有一个后缀，这在 Vue 中称为事件修饰符，可以用于快速处理一些特殊情况，比如 keypress.enter 表示Enter按下时。
在 Home 中使用 Login 组件时，Home 的 user 数据字段绑定到了 Login 的 user 属性上，.sync 修饰符表示这是一个双向绑定。前面 Login 的代码中，如果登录成功，Login 会通过 $emit(“update:user”, {…}) 来通知绑定数据发生变化，Vue 框架接收到这个通知并更新了绑定的 Home.user，这会导致计算属性 message 重算，并最终触发呈现“某用户已登录”。
Vue 入门很简单吧！
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。建议读者们仔细阅读 Vue 官方提供教程和 API 手册，并保持在 Vue 相关技术社区的活跃度。
原码下载：百度网盘
前端UI框架学习到什么程度算精通？
单纯是对某一个框架来说，比如 VUEJS，要算精通的话，就是你已经完全理解了框架的底层原理，熟读并且理解了 VUEJS 的源代码，并且可以基于 VUEJS 开发属于你自己的插件，达成这几点，就可以说是精通了。
vue.js里的export default是什么鬼
在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 具体使用： 1、// const str = hello worldexport function f(a){return a+1}对应的导入方式：// { str, f } from demo1 //也可以分开写两次，导入的时候带花括号、// default const str = hello world1212对应的导入方式：// str from demo1 //导入的时候没有花括号
win10系统安装一直出现快速上手这个步骤，怎么办？
方法如下:1，对Win10进行个性化设置，可以直接点击右下角的“使用快速设置”来使用默认设置，也可以点击屏幕左下角的“自定义设置”来逐项安排。 2，点击“自定义设置”来看一下究竟有哪些详细设置。 你可以在选项中选择可向微软发送的数据信息。 但要注意，如果关闭“位置”信息，则当前设备无法定位。 点击“下一步”后完成这部分设置。 3、选择当前设备的归属，如果是个人用户，选择“我拥有它”；企业和组织用户可选择“我的组织”后点击“下一步”继续。 4、输入微软账户信息后登录Win10。 如果没有微软账户可以点击屏幕中间的“创建一个”，也可以点击左下方“跳过此步骤”来使用本地账户登录。 5、本地账户创建页面，和Win7安装类似，填写用户名并且设置密码和密码提示后（必填），点击“下一步”即可。 6、等待Win10进行应用设置，使用微软账户登录的用户需要等待更长时间。 7、设置完成后直接进入Win10桌面，安装结束。
发表评论