vuejs教程分析和总结.docxVIP

文档来源为 文档来源为:从网络收集整理.word 版本可编辑.欢迎下载支持. PAGE PAGE 10 Vue.js 学习 在学习 vue 之前，需先学习 node.js 与 webpack 关于 Vue.js Vue.js 用于构建交互式的 web 界面的库。他提供了 MVVM 数据绑定和一个可组合的组件系统， 具有简单、灵活的 API，Vue.js 集成在 MVVM 模式上的试图模型层，并通过双向绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM 框架，Vue.js 更容易上手。Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的API 创建由数据驱动的 UI 组件。 npm（node package manager）：作为 node 的包管理工具，极大地便利了我们的开发工作。包括：安装、卸载、更新、查看、搜索、发布等。 你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。即使你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。 Node.js： Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。 Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 v8 引擎，v8 引擎执行 JavaScript 的速度非常快，性能非常好。 webstrom： 为 JS 开发做了很多优化， MVVM(Model-View-ViewModel)：MVVM 框架的由来白女士 MVP（Model-View-Presenter）模式与 WPF 结合的应用方式时发展演变过来的一种新型架构框架。 安装 Vue.js 1、 独立版本 直接下载script标签引入，Vue 会被注册为一个全局变量。 2、 CDN 可以从 jsdelivr 或 cdnjs 获取3、 CSP 兼容 有些环境，如 Goole Chrome Apps ，强制应用内容安全策略（CSP），不能使用 new Function() 对表达式求值。 4、 NPM 使用 Vue 构建大型应用时使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发文件组件 $ npm install vue $ npm install vue@csp 5、 命令行工具 Vue.js 提供一个官方命令行功能工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热加载、保护时静态检查以及可用于生产的构建配置的 全局安装 vue-cli $ npm install –g vue-cli 创建一个基于”webpack”项目的新模板 Vue init webpack my-project 安装依赖 cd my-project npm intstall npm rul build 6、 Bower Vue.js 起步 起步 我们以 Vue 数据绑定的快速导览开始。 !DOCTYPE html html head meta charset=UTF-8 script type=text/javascript src=../js//script title/title /head body div id=app p{{message}}/p !-- 单项绑定 -- input v-model=message !-- v-model:双向绑定 -- ul !-- 渲染列表 -- li v-for=todo in todos {{ todo.text }} /li /ul button v-on:click=reverseMessageReverse Message/button !-- 处理用户输入 -- /div /body script new Vue({ el:#app, data:{ message:Hello Vue.js!, todos:[ {text:Learn JavaScript}, {text:Learn Vue.js}, {text:Build Something AweSome} ] }, methods:{ reverseMessage:function(){ this.message = } } }) /script /html Vue.js 概述 概述 Vue.js 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定