【黑马程序员】Vue.js入门篇

黑马程序员成都中心编著【黑马程序员】Vue.js入门篇目录引入Vue.jsVue.js是什么声明式渲染HelloWorld条件与循环处理用户点击综合示例1.引入Vue.js安装Vue可以通过查看官方安装教程来了解其他安装Vue的选项。但对webpackNode.js等打包构建工具不了解的同学不推荐直接使用vue-cli搭建项目脚手架。最简单的方式是在本地创建的.html文件中通过如下方式引入Vue：scriptsrc=是什么？Vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。不仅易于上手(对比其它框架)，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。黑马程序员成都中心编著学习Vue.js时要抛开jQuery手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。Vue.js是一种MVVM框架（Model-View-ViewModel），其中html是view层，js是model层，ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。当创建了ViewModel实例后，双向绑定的过程分为以下几步：1、上图中的DOMListeners和DataBindings是实现双向绑定的关键。2、从View侧看，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；3、从Model侧看，当我们更新Model中的数据时，DataBindings工具会帮我们更新页面中的DOM元素。3.HelloWorldVue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM黑马程序员成都中心编著3.1文本插值实现数据绑定Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用mustache语法，在运行时{{message}}会被数据对象的message属性替换，所以页面上会输出HelloWorld!。divid=app{{message}}/div//这是定义视图ViewnewVue({el:'#app',//指向view将Vue实例挂载data:{message:'HelloWorld!'}//指向model})//用来连接View与Model3.2输出纯HTML使用{{message}}的mustache语法只能将数据解释为纯文本，为了输出HTML，可以使用v-html指令:divid=appdivv-html=text/div/divnewVue({el:'#app',data:{text:'h1hello/h1'}})关于指令：Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，黑马程序员成都中心编著将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。3.3双向数据绑定MVVM模式本身支持双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。divid=appp{{message}}/pinputtype=textv-model=message//div这样无论是改变输入框的内容还是通过控制台修改message的值，另一个值都会同时被改变。3.4给元素的属性绑定数据定义在Vue实例的data接口上的数据的绑定很灵活，既可以绑定在DOM节点内部，也可以绑在属性上divid=appv-bind:title='message'v-bind:style='color'v-oncea:href='url'{{message}}/a/divv-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容黑马程序员成都中心编著不会更新。但请留心这会影响到该节点上所有的数据绑定。varvm=newVue({el:'#app',data:{message:'Google',color:'color:green',url:'}})Mustache不能在HTML属性中使用，绑定数据到节点属性上时，需要使用v-bind指令。利用这个指令将元素节点div的title属性和Vue实例的message属性绑定到一起，从而建立数据与该属性值的绑定。v-bind指令可以缩写为一个冒号，如a标签中的v-bind:href=url的缩写方式:href=url。buttonv-bind:disabled=someDynamicConditionButton/buttonv-bind指令对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除。4.条件与循环4.1根据条件表达式的值来执行元素的插入或者删除行为的是v-if指令：divid=apph1v-if=num0Num:{{num}}/h1pv-if=seennowyouseeme/p/divvarapp=newVue({el:'#app',data:{黑马程序员成都中心编著num:12,seen:true,name:'WannaCry'}})v-if指令可以绑定一个属性值为布尔型的属性，当值为真时，元素将显示，反之则消失。如果在控制台设置app.seen=false，你会发现页面上的“nowyouseeme”消失了。这个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。而且，Vue也提供一个强大的过渡效果系统，可以在Vue插入/更新/删除元素时自动应用过渡效果。4.2v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。h1v-show=name.indexOf('Walker')=0Name:{{name}}/h1在控制台打开，可以看到h1Name:WannaCry/h1元素被设置了style=display:none样式。4.3可以用v-else指令为v-if或v-show添加一个“else块”。divid=apph1v-if=age=25Age:{{age}}/h1h1v-elseName:{{name}}/h1/divv-else元素必须立即跟在v-if,v-else-if或v-show元素的后面——否则它不能被识别。黑马程序员成都中心编著varvm=newVue({el:'#app',data:{age:20,name:'AlanWalker',sex:'Man'}})v-else元素是否渲染在HTML中，取决于前面v-if的值true还是false。如果v-if的值为false，则后面v-else的内容不会渲染到HTML。4.4数组数据循环渲染列表使用v-for指令：divclass=titleulliv-for=todointodos{{todo.text}}/li/ul/divv-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for=todointodostodos是一个数组，todo是当前被遍历的数组元素。varapp=newVue({el:'.title',data:{//定义todos数组todos:[{text:'studyhard'},{text:'findagirlfriend'},{text:'aroundtheworld'}]}})页面显示如下：黑马程序员成都中心编著studyhardfindagirlfriendaroundtheworld控制台里，输入app.todos.push({text:'coding'})，你会发现列表中新添加了一项。5.处理用户点击当用户点击页面，我们可以用v-on指令绑定一个事件监听器，通过它调用我们在Vue实例中定义的方法：divclass=titlep{{message}}/pbuttonv-on:click=reverseMessage反转消息/button/divv-on指令用于给监听DOM事件，它的用语法和v-bind是类似的。newVue({el:'.title',data:{message:'HelloVue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('')//split()用于将字符串转化为数组//reverse()用于颠倒数组中元素顺序//join()用于将数组转化为字符串}}})v-on指令可以缩写为@符号。6.综合示例Vue+Bootstrap实现todolist的小Demo黑马程序员成都中心编著一、Html样式divclass=containerid=boxformrole=formdivclass=form-grouplabelfor=usernameusername：/label!--用v-model指令将input内的值与实例data内的值绑定在一起--inputtype=textclass=form-controlid=usernamev-model=usernameplaceholder=Pleaseenteryourusername/divdivclass=form-grouplabelfor=passwordpassword:/labelinputtype=passwordclass=form-controlid=passwordv-model=passwordplaceholder=pleaseenteryourpassword/div!--用v-on指令绑定点击click事件--buttontype=buttonclass=btnbtn-primaryv-on:click=addsubmit/buttonbuttontype=resetclass=btnbtn-dangerreset/button/formhrtableclass=tabletable-borderedtable-hovercaptionclass=h3text-centertext-muted用户信息表/captiontrclass=text-dangerthclass=text-centerid/ththclass=text-centerusername/ththclass=text-centerpassword/ththclass=text-centeroption/th/trtrclass=text-centerv-for=(item,index)inmyData!--用v-for指令循环渲染列表index为索引值--td{{index+1}}/tdtd{{item.name}}/tdtd{{item.pwd}}/tdtdbuttonclass=btnbtn-infobtn-smdata-toggle=modaldat