搜索
Vue.js学习在学习vue之前，需先学习node.js与webpack1.关于Vue.jsVue.js用于构建交互式的web界面的库。他提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API，Vue.js集成在MVVM模式上的试图模型层，并通过双向绑定连接视图和模型。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手。Vue.js是一个用于创建Web交互界面的库。它让你通过简单而灵活的API创建由数据驱动的UI组件。npm（nodepackagemanager）：作为node的包管理工具，极大地便利了我们的开发工作。包括：安装、卸载、更新、查看、搜索、发布等。你的团队无需去亲自开发一些特定功能的模块，而是直接引用各个领域专家写好的代码。即使你的团队不需要引用外部代码，这种基于模块的开发方式也能很好的推动团队开发。Node.js：Node.js就是运行在服务端的JavaScript。Node.js是一个基于ChromeJavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的v8引擎，v8引擎执行JavaScript的速度非常快，性能非常好。webstrom：为JS开发做了很多优化，MVVM(Model-View-ViewModel)：MVVM框架的由来白女士MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。2.安装Vue.js1、独立版本直接下载script标签引入，Vue会被注册为一个全局变量。2、CDN可以从jsdelivr或cdnjs获取3、CSP兼容有些环境，如GooleChromeApps，强制应用内容安全策略（CSP），不能使用newFunction()对表达式求值。4、NPM使用Vue构建大型应用时使用NPM安装，NPM能很好地和诸如Webpack或Browserify的CommonJS模块打包器配合使用。Vue.js也提供配套工具来开发文件组件$npminstallvue$npminstallvue@csp5、命令行工具Vue.js提供一个官方命令行功能工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热加载、保护时静态检查以及可用于生产的构建配置的全局安装vue-cli$npminstall–gvue-cli创建一个基于”webpack”项目的新模板Vueinitwebpackmy-project安装依赖cdmy-projectnpmintstallnpmrulbuild6、Bower3.Vue.js起步起步我们以Vue数据绑定的快速导览开始。!DOCTYPEhtmlhtmlheadmetacharset=UTF-8scripttype=text/javascriptsrc=../js/vue.min.js/scripttitle/title/headbodydivid=appp{{message}}/p!--单项绑定--inputv-model=message!--v-model:双向绑定--ul!--渲染列表--liv-for=todointodos{{todo.text}}/li/ulbuttonv-on:click=reverseMessageReverseMessage/button!--处理用户输入--/div/bodyscriptnewVue({el:'#app',data:{message:'HelloVue.js!',todos:[{text:'LearnJavaScript'},{text:'LearnVue.js'},{text:'BuildSomethingAweSome'}]},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')}}})/script/html4.Vue.js概述概述Vue.js是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件Vue.js自身不是一个全能框架—它值聚焦于视图层。因此它非常容易学习，非常容易与其他库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。响应的数据绑定Vue.js的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用Jquery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥有数据驱动的试图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。!DOCTYPEhtmlhtmlheadmetacharset=ISO-8859-1titleInserttitlehere/titlescripttype=text/javascriptsrc=../js/vue.min.js/script/headbodydivid=apppv-if=greetingHello/p/div/bodyscriptnewVue({el:#app,data:{greeting:false}})/script/html这里我们遇到新东西。你看到的v-if特性被称为指令。指令带有前缀v-，以指示它们是Vue.js提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。继续在控制台设置exampleVM2.greeting为false，你会发现Hello!消失了。这个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。而且，Vue.js也提供一个强大的过渡效果系统，可以在Vue插入/删除元素时自动应用过渡效果。也有一些其它指令，每个都有特殊的功能。例如v-for指令用于显示数组元素，v-bind指令用于绑定HTML特性。我们将在后面详细讨论全部的数据绑定语法。组件系统组件系统是Vue.js另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组间来构建大型应用。divid=appapp-nav/app-navapp-viewapp-sidebar/app-sidebarapp-content/app-content/app-view/div5.Vue.js实例构造器每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：Varvm=newVue({})一个Vue实例其实正是一个MVVM模式中所描述的ViewModel-因此在文档中经常会使用vm这个变量名。在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器varMyComponent=Vue.extend({//扩展选项})//所有的`MyComponent`实例都将以预定义的扩展选项被创建varmyComponentInstance=newMyComponent()尽管可以命令式地创建扩展实例，不过在多数情况下将组件构造器注册为一个自定义元素，然后声明式地用在模板中。我们将在后面详细说明组件系统。现在你只需知道所有的Vue.js组件其实都是被扩展的Vue实例。属性和方法每个Vue实例都会代理其data对象里所有的属性vardata={a:1};varvm=newVue({data:data})vm.a=data.a;//true//设置属性也会影响到原始值vm.a=2;data.a//2注意只有这些代理的属性是响应的。如果再实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。除了这些数据属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的数据属性区分。例如：vardata={a:1}varvm=newVue({el:'#example',data:data})vm.$data===data//-truevm.$el===document.getElementById('example')//-true//$watch是一个实例方法vm.$watch('a',function(newVal,oldVal){//这个回调将在`vm.a`改变后调用})实例生命周期Vue实例在创建时有一系列初始化步骤----例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。例如created钩子在实例创建之后调用：varvm=newVue({data:{a:1},created:function(){//`this`指向vm实例console.log('ais:'+this.a)}})//-ais:1也有一些其它的钩子，在实例生命周期的不同阶段调用，如compiled、ready、destroyed。钩子的this指向调用它的Vue实例。一些用户可能会问Vue.js是否有“控制器”的概念？答案是，没有。组件的自定义逻辑可以分割在这些钩子中。6.Vue.js数据绑定语法数据绑定Vue.js的模板是基于DOM实现的。这意味着所有的Vue.js模板都是可解析的有效的HTML，且通过一些特殊的特性做了增强。插值文本数据绑定最基础的形式是文本插值，使用Mustache语法（双大括号）：spanMessage:{{msg}}/spanMustache标签会被相应数据对象的msg属性的值替换。每当这个属性变化时它也会更新。你也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：spanThiswillneverchange:{{*msg}}/span原始的HTML双Mustache标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串，需要用三Mustache标签：div{{{raw_html}}}/div内容以HTML字符串插入——数据绑定将被忽略。如果需要复用模板片断，应当使用partials。在网站上动态渲染任意HTML是非常危险的，因为容易导致[XSS攻击]()。记住，只对可信内容使用HTML插值，**永不**用于用户提交的内容。HTML特性Mustache标签也可以用在HTML特性(Attributes)内：divid=item-{{id}}/div注意在Vue.js指令和特殊特性内不能用插值。不必担心，如果Mustache标签用错了地方Vue.js会给出警告。绑定表达式放在Mustache标签内的文本称为绑定表达式。在Vue.js中，一段绑定表达式由一个简单的JavaScript表达式和可选的一个或多个过滤器构成。JavaScript表达式到目前为止，我们的模板只绑定到简单的属性键。不过实际上Vue.js在数据绑定内支持全功能的JavaScript表达式：{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}这些表达式将在所属的Vue实例的作用域内计算。一个限制是每个绑定只能包含单个表达式，因此下面的语句是无效的：!-