【黑马程序员】Vuejs入门篇

黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动【黑马程序员】Vue.js入门篇目录弓|入Vue.jsVue.js是什么声明式渲染HelloWorld条件与循环处理用户点击综合示例.引入Vue.js安装Vue可以通过查看官方安装教程来了解其他安装Vue的选项。但对webpackNode.js等打包构建工具不了解的同学不推荐直接使用vue-cli搭建项目脚手架。最简单的方式是在本地创建的.html文件中通过如下方式引入Vue:<scriptsrc="https:〃/vue/dist/vue.js"></script>.Vue.js是什么？Vue.js（读音/vju/,类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。不仅易于上手（对比其它框架），还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。黑马程序员成都中心编著

黑马程序员黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动学习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实现响应的数据绑定和组合的视图组件。DOMViewPlainJavaScriptObjectsDOMViewPlainJavaScriptObjects当创建了ViewModel实例后，双向绑定的过程分为以下几步：1、上图中的DOMListeners和DataBindings是实现双向绑定的关键。2、从View侧看，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；3、从Model侧看，当我们更新Model中的数据时，DataBindings工具会帮我们更新页面中的DOM元素。.HelloWorldVue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM黑马程序员成都中心编著

IG黑马程序员IG黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动文本插值实现数据绑定Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用mustache语法，在运行时{{message}}会被数据对象的message属性替换，所以页面上会输出"HelloWorld!"。<divid=〃app〃>{{message}}</div>〃这是定义视图ViewnewVue({el:'#app',//指向view将Vue实例挂载data:message:,HelloWorld!,)〃指向model))//用来连接View与Model输出纯HTML使用{{message}}的mustache语法只能将数据解释为纯文本为了输出HTML,可以使用v-html指令：<divid=app><divv-html=〃text〃></div></div>newVue({el:#app,data:{text:'<h1>hello</h1>'))关于指令：Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，黑马程序员成都中心编著

黑马程序员黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性(attribute)。双向数据绑定MVVM模式本身支持双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。<divid=〃app〃><p>{{message}}</p><inputtype=〃text〃v-model=〃message〃/></div>这样无论是改变输入框的内容还是通过控制台修改message的值，另一个值都会同时被改变。HelloVue.js!HelloVuejs!给元素的属性绑定数据定义在Vue实例的data接口上的数据的绑定很灵活，既可以绑定在DOM节点内部，也可以绑在属性上<divid=〃app〃v-bind:title='message'v-bind:style='color'v-once><a:href='url'>{{message}}</a></div>v-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容黑马程序员成都中心编著

黑马程序员黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动不会更新。但请留心这会影响到该节点上所有的数据绑定。varvm=newVue({el:，#app，,data:{message:'Google',color:'color:green',url:'https:〃')))Mustache不能在HTML属性中使用，绑定数据到节点属性上时，需要使用v-bind指令。利用这个指令将元素节点div的title属性和Vue实例的message属性绑定到一起，从而建立数据与该属性值的绑定。v-bind指令可以缩写为一个冒号，如a标签中的v-bind:href="url"的缩写方式:href="url"〈buttonv-bind:disabled=〃someDynamicCondition〃>Button</button>v-bind指令对布尔值的属性也有效——如果条件被求值为false的话该属性会被移除。.条件与循环根据条件表达式的值来执行元素的插入或者删除行为的是v-if指令:<divid=〃app〃><h1v-if="num>0">Num:{{num}}</h1><pv-if=〃seen〃>nowyouseeme</p></div>varapp=newVue({el:，#app，,data:{黑马程序员成都中心编著

黑马程序员传智播客旗下高端黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动num:12,seen:true,name:'WannaCry'))v-if指令可以绑定一个属性值为布尔型的属性，当值为真时，元素将显示，反之则消失。如果在控制台设置叩p.seen=false，你会发现页面上的“nowyouseeme”消失了。这个例子演示了我们不仅可以绑定DOM文本到数据，也可以绑定DOM结构到数据。而且，Vue也提供一个强大的过渡效果系统，可以在Vue插入/更新/删除元素时自动应用过渡效果v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。<h1v-show=〃name.indexOf('Walker')>=0">Name:({name}}</h1>在控制台打开，可以看到<h1>Name:WannaCry</h1>元素被设置了style="display:none"样式。可以用v-else指令为v-if或v-show添加一个“else块”。<divid=〃app〃><h1v-if="age>=25">Age:{{age}}</h1><h1v-else>Name:({name}}</h1></div>v-else元素必须立即跟在v-ifv-else-if或v-show元素的后面——否则它不能被识别。黑马程序员成都中心编著

黑马程序员黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动varvm=newVue({el:，#app，,data:{age:20,name:'AlanWalker’,sex:'Man')))v-else元素是否渲染在HTML中，取决于前面v-if的值true还是false如果v-if的值为false，则后面v-else的内容不会渲染到HTML。数组数据循环渲染列表使用v-for指令：<divclass=〃title〃><ul><liv-for="todointodos">{{todo.text}}</li></ul></div>v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="todointodostodos是一个数组，todo是当前被遍历的数组元素。varapp=newVue({el:'.title',data:{〃定义todos数组todos:[{text:'studyhard'),{text:'findagirlfriend'),{text:'aroundtheworld')])))页面显示如下：黑马程序员成都中心编著

黑马程序员传智播客旗下高端黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动studyhardfindagirlfriendaroundtheworld控制台里，输入叩p.todos.push({text:'coding'})，你会发现列表中新添加了一项。.处理用户点击当用户点击页面，我们可以用v-on指令绑定一个事件监听器，通过它调用我们在Vue实例中定义的方法：<divclass=〃title〃><p>{{message}}</p><buttonv-on:click=〃reverseMessage〃>反转消息</button></div>v-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指令可以缩写为@符号。.综合示例Vue+Bootstr叩实现todolist的小Demo黑马程序员成都中心编著

黑马程序员传智播客旗下高端黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动一.Html样式<divclass=〃container〃id=〃box〃><formrole=〃form〃><divclass=〃form-group〃><labelfor=〃username〃>username：</label><!--用v-model指令将input内的值与实例data内的值绑定在一起--><inputtype=〃text〃class=〃form-control〃id=〃username〃v-model=〃username〃placeholder="Pleaseenteryourusername"></div><divclass=〃form-group〃><labelfor=〃password〃>password:</label><inputtype=〃password〃class=〃form-control〃id=〃password〃v-model=〃password〃placeholder="pleaseenteryourpassword”〉</div><!--用v-on指令绑定点击click事件--><buttontype=〃button〃class="btnbtn-primary"v-on:click=〃add〃>submit</button><buttontype=〃reset〃class="btnbtn-danger">reset</button></form><hr><tableclass="tabletable-borderedtable-hover"><captionclass="h3text-centertext-muted〃>用户信息表</caption><trclass=〃text-danger〃><th<th<th<th<th<th</tr><trclass=〃text-center〃v-for="(item,index)inmyData"><!--用v-for指令循环渲染列表index为索引值--><td>{{index+1}}</td><td>{{}}</td><td>{{item.pwd}}</td><td><buttonclass="btnbtn-infobtn-sm〃data-toggle=〃modal〃data-target=〃#myModal〃v-on:click="nowIndex=index">delete</button></td></tr><!--用v-show指令根据条件返回的布尔值决定是否渲染-->黑马程序员成都中心编著

黑马程序员黑马程序员传智播客旗下高端IT教育品牌改变中国IT教育，我们正在行动<trv-show=〃myData.length!=0"><tdcolspan=〃4〃class=〃text-right〃><buttonclass="btnbtn-dangerbtn-sm"data-toggle="modaldata-target=〃#myModal〃v-on:click="{nowIndex=all,modalTitle='confirmdeleteall?'}〃>deleteall</button></td></tr><trv-show="myData.length==0"><tdcolspan=〃4〃class="text-centertext-muted"><p>暂无数据...</p></td></tr></table><!--模态框--><divrole=〃dialog〃class="modalfadebs-example-modal-sm"id=〃myModal〃><divclass="modal-dialog"><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"><span>X</span></button><h4class="modal-title">{{modalTitle}}</h4></div><divclass="modal-bodytext-right"><buttonclass="btnbtn-primarybtn-sm"data-dismiss="modal"v-on:click="remove(nowIndex)">yes</button><buttonclass="btnbtn-dangerbtn-sm"data-dismiss="modal">no</button></d