开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术：Vue1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/76/detail/15748
Vue1
内容介绍：
一、 回顾react
二、Vue的架构
三、Vue实例
一、 回顾react
因为之前react课，讲得比较详细，所以尽量花一节课能把Vue讲完。实际上它应该是面面俱到，很多东西都要讲，每个知识点挑最小的核心出来，像react，实际上react， 还有比如redux，进行配合来传递数据，都没有去展开讲，讲了react的核心思想。react的核心思想是什么呢？
现在前端主流的you react you Vue，当然还有一Angular，三个核心思想其实都差不多，react里面最重要的一个JSX语法，JSX语法里面就是只有一个H1，但是它里面显示的内容需要去动态的去根据。比如里面需要显示某一个值状态的机会，去把它替换掉Excel里面部分内容之类的，也就是它的第一个核心思想是给了一个模板。
要在运行过程当中，会把内容根据不同的状态的值填进去，它是一种叫做生命似的渲染。没有直接告诉之前应该显示什么？只告诉这地方将来要显示什么？然后会动态的去告诉它的是什么？book值是什么？然后替换掉。声明式的渲染，所以当在创建页面，有交互改变状态的时候，就会刷新里面的值，这是一个第一个非常重要的一个特征，实际上这几个框架它基本上都有此特征。这是第一个，就是生命的渲染。
第二就是在定义的时候定义了很多的标签，可以定义成类，也可以把它定义成函数，但总的来讲在它眼里看到的就是主变化，就是一个一个的component。把页面把它组件化，把里面可以功能相对单一的内容提取出来自定义，定义成了类或者是function，然后把它们作为标签，会用这种JSX的语法去呈现出来。
所以避开具体的语法，去看它的思想，为什么要叫用户的产生的动作是有所响应，它让前端用户体验更好呢？
主要就是用的这种声明式，这种渲染可以不断的改变，真正要渲染的内容。所以看到一个网页，毕竟是一个网页，但里面的内容在不断的发生变化，给大家讲的书的例子就可以看到，可以去排序，可以去过滤，可以做编辑，这些事情都发生在前台，是根据用户的动作就产生了相应的反应，它是一个生命是渲染，第二就是组件化，所以这两个思想在其它的构建里面，也在其它的框架里面也是类似的。
二、Vue的架构
内容是从Vue的教材里面去找出来的，都是一样的，找了一些reference给大家看，另外就是每一次新建react项目，去新建一个项目，可能也会碰到类似的事情，比如会发现非常慢，开始下载弄的模块，其实如果往前看过，就是在Vue的另外一个PPT里，写了一个链接，就是网上有人写的，解释了一下为什么这种管理方式，就是每一次创建一个项目npm，都要单独的安装一遍node_modules。
因为在等待下node_modules等待，很长的时间，所以你觉得非常的麻烦，就是弄的习惯为什么每次要下载node_modules，每个项目都要下载一遍。
其实原因是这样的，可以想象一下，在项目a里面，项目B里，你可能都会用到react。这两个react是它使用的版本不一样，比如左边使用的是a版本，使用的版本只是版本号，比如：是V2.1V2的，如果它们有差异，很显然，A用它对着主要的二点，一去编程，它就会用到2.1的API，除非2.1和2.2只体现在API的实现上有所不同，如果API略有不同。
就会发现应用在地上跑或者必定在a上面跑，会在2.1都会出现所以，假设会每一次都下载。机器上去找，就有弄矛盾模块目录都挺依赖。如果是出现这种情况，比如V2.2.2版本，如果用这种方式的话，再强制要求当前所有的项目都依赖于同一个版本，就是对于所有的框架，不光是react的还是其它的，都强制的要求使用同一个版本。约束太强，现在确实用的都是同一个版本，这只是大家在学习，在机器上可能是这样，但是如果在一个大的公司里面去工作，很多项目可能是在不断的演化了，它们依赖的东西可能就是不一样，有可能会依赖很多的包，又会依赖于别的包。
用react在做管理的时候，实际上它会把依赖原来它在去找原始，依赖于谁，就找包，依赖关系就像一个图一样，但图肯定是一个有向无环图，也就是不会再依赖回了，所以依赖包，有效无环图就把所有的需要依赖的包全部装进了打包进去，所以尽管可能只写了个2.1版本，但可能引入的包实际上不止这一个，还有其它的包，这样就很难保证两边依赖的是完全一样，肯定会相差可能比较大，让它们都依赖于一个公共的模块，肯定会有问题，一味的去做到互相之间没有干扰，所以a要有自己的模块，包必须要用自己的包，所以每次在创建一个新的工程之后，会去判断，给大家做的Vuebpack的相关的PPT，没有详细讲它，里面都说清楚了，就是在项目里的pack的角色里。就写了依赖于哪些包，并且它们的版本是越想越大，所以在不同的项目可能会有不同的版本，所以每次要自己去下载，就是每一个单独的项目要下载它。
一个模块，如果是公用下载一次以后，所有项目都依赖它，就在约定，所有的项目都依赖于相同的版本的这些模块，在现实当中，如果开发的项目多的话，这一点可能很难保证，所以前面的动作是必须的，所以可能要等很长时间，只能说这动作是必须要的，可以通过改换一个语言来提高速度，但是依赖于基础上统一的方式，如果做课程里面的作业或者下午做，但实际上，在未来的开发当中这么做并不是一个好的做法，稍微解释一下。
所有的东西来自于Vue的官方的网站。刚才说了，所有的框架实际上要体现的就是意思，声明式的。确认以及组件化。有很多相似之处，只是具体的语法上，在一些包上面可能会有些差异，但只要体现这两个思想，基本的操作差不多的。
<div id="app">
{{message }}
</div>
var app = new Vue({
el:'#app',
data: {
message:'Hel1oVue！'
}
})
这是一个最简单的一个例子，在前端的页面，这里有一个Div，它里面要显示的内容是将来要过回填回来的，所以在Vue里面，创建一个没有对象，在var脚本里面创建，用javascript创建一个类的对象。el表示它是作用于哪一个，前端的页面元素就是这里#app，后面用的语法，就是当时在讲CSS的select的语法是一样的，可以按按ID去搜索，去定位一个元素，就是让你算符号定位，意思就是说要在APP这Vue需要作用于在生命渲染中作用于APP这一个标签。作用于它的时候要干什么？
传递一个data，数据之前面试，就相当于stated purpose这样的东西，比如传递过一个数据，传递有什么呢？这里是引用的message，所以肯定要定一下message是什么定义，hello Vue ，所以显示出来就是还有Vue，就是在官网的例子上给的东西。当然可能会觉得这只是代码片段，不太好想，所以放工程里面
把它一个一个全放在页面，完整页面，看到完整页面实际上是这样，就是工程里是有div的文件，然后把这段脚本嵌进去，在浏览器里去看，还有就是这样的结果，还有同学在问我上课说检查接待要用url来访问是什么意思？
其实没有特别复杂的意思。意思是上节课说过别再给你检查的时候不要说有一个hp且在其它页面里面写了，把它自己怎么打开证明，还是应该至少有一个部署的动作，就像react的例子，在运行的时候，它是打开了一个内嵌的一个开发服务器，在三千端口，然后你通过端口去看到的例子，而不是直接就像这里看到的，拿浏览器直接去在文件系统里面打开一个页面，我上节课说过，可能同学没太理解。就是应该是有一个工程，不是你随手就写了一个HTML放在哪里。
所谓的声明式渲染是个什么意思？就是它里面的这一点，是不是和我们之前看到的react实际上是一样的？就所谓生命是渲染，就是这样来做，正是因为有生命是渲染，等于页面里面呈现的内容不是写字，是可以根据用户它的一些动作去去呈现，所以看到在Vue里面，我们把要呈现的数据可以变换掉，就像我们讲搜索书的例子，可以把它的过滤过之后的数据给它重新绘制一下。
这是我们看到生命是渲染，后面的，就是有关Vue里面关于生命是渲染的一些具体的语法，比如一个第一个是v-bind，v-bind的意思就是要把一个什么样的属性和一个什么样的东西给它绑定起来。
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
var app2 new Vue({
el:'#app-2',
data:{
message:' You loaded this page on '+new Date(). toLocaleString ()
}
})
在这里就是v-bind的，后面的东西就是一个键值对，让它绑message，就是传递过去的message。出来的效果就是如下图。
在这里大家看到的。这是message要求的是这样的，一个就是用v-bind的来定义的一个属性，spa的一个属性，它是要作用于APP。它传递过去的message是如图，所以看一下的话就是这样的。
把鼠标放在上面不动的时候，大家看它会出来一句话：
就是title，它绑定的message，message是我们在这里写的you know the loaded does page on…把它放到这里之后。鼠标放着不动的话，就看到了这句话，也就是title属性的值不是写死的。它是根据底下传递进来的值来绑定它是用v-bind的来个观念当然严格意义上说，应该写工程，这里写的不是工程，写了一堆页面，希望大家就不要像这样的去完成迭代。因为这样的操作，实际上，跟刚才在文件系统里直接把它打开是一回事。
并没有建立一个工程去处理，应该建立一个工程完整的工程，因为写完了前端在后面，写后端的时候应该就是用前端，然后会有两个工程，两个工程之间在进行跨域操作。V-bind就是在绑定你的一个页面当中的一个元素的属性，在跟底下传递过来的数据进行绑定，这种看到规范。然后v-bind条件绑定为服务器来测试，大家可以看到如图：看一下效果：
<div id="app-3">
<span v-if="seen">Now you see me</span>
</div>
var app3 = new Veu({
el:'#app-3',
data:{
seen: true
}
})
V-for是循环,用的是封闭循环，也就是你在传递数据里面，是个集合类。所以针对这里面的每一个对象。呈现出来这样的三条东西自己我们看到的没错记住我们看到此页面，
它用的是这种for each的循环。要注意颜色，可以看到它在绘制的时候，前面这123不是我们指定的，你在用它是由Li就是list来产生了回想一下就是它没有破坏Li标签的逻辑就是list，前面用的是ol这是一个order list如果是ul就是前面显示的应该去原点，逻辑本身还是按以前的逻辑呈现，但是它里面内呈现的内容就是这里用使用展示出来。
<div id="app-4">
<o1>
<li v-for="todo in todos">
{{todo.text }}
</1i>
</o1>
</div>
var app4 new Vue({
el:'#app-4',
data:
todos:[
{ text:'Learn JavaScript'},
{ text:'Learn Vue'},
{ text:'Build something awesome'}
]
}
} ）
<div id="app-5">
<p>{{message }}</p >
<buttonon:click="reverseMessage">ReverseMessage</button>
</div>
var app5 = new Vue({
e1:'#app-5，
data:{
message:‘Hello Vue.js!'
},
methods:{
reverseMessage:function (){
this.message this.message.split('').reverse().join(' ')
}
}
}）
可以去处理事件它会去调用拟定一个方法，所以在V-on对象里，除了要说明它是谁的，作为哪个元素你还去定义。它的数据就是数据会将来传给传给它，另外还可以给你方法，方法是说把当前消息给它，用空格断开，断开以后，然后给它reverse一下，就是反向排下去，就是断开之后，实际上在这里它就会是一个数组，然后反向排序一下以后，再把它们连接起来。
效果如图：
看到它定义了一个方法。应该是这样，可以对应N多个方法，叫message，它里面实际上是可以用很多方法。其中我们现在订一个叫做reverse message，当上面click之后来调用reverse match之后，它就在message这里面找，如果snap是谁是后面函数。就执行了这里面的逻辑。
所以看到的这样的一个页面，页面上面有message本身是通过bate传进去的，是hello，JS，然后有一个按钮button，button是reverse Nancy写的当你点击之后，它就调用刚才的函数，函数是把整个mess断开，其实现在两个单词就断开之后，就是两个值，两个值上面分别去reverse一下，就得到了这样的消息，然后就把它给装一下连接，才能产生这样的值，所以就看起来被整条消息被反向的输出。在讲这里就是说拟定一个为了对象它应该有什么，看到的有element还有message这样的单词。
<div id="app-6">
<p>{{message }}</p >
<input v-model:"Message">
</div>
Var app6 new Vue({
el:'#app-6',
data:{
message:'Hello Vue'
}
})
下面是可以用Input的来处理用户的输入里面是一个input, input是一个输入框中是s加ml的标签它的意思是现在要有一个输入框它上面它要显示一个要把收入和一个相关的变量绑定, 绑定能看见这效果先先看一下效果:
就是这里面写hello ,也可以进行改写，都会在上面显示出来。
做到这一步骤，回过头再看代码。不管怎么说要跟message在地方是显示message就是在刚才页面的上面问题上是显示，然后就是v-model。因为是一个输入，所以要跟message绑定，要想绑定用的就是Vue。绑定之后，就看到一开始message hello Vue所以一开始它默认就显示此信息，但是输入框因为和message绑定，react一旦修改了。它的值变化之后，上面显示就是变化，但是这里可以看到，没有跟原来有点不一样，或者它用起来会更简单的一个地方，在react里，想要改变页面上的状态就是它显示的信息要去掉sys date。通过这样，它会去触发run的方法重绘。但是在这里看到就比较省事，你只要做这样的绑定，在这里我们可以看到。改变输入的值因为它是绑定了上面的状态重新给绘制。
要通过v-model的绑定，当它发生变化时，对应的上面的值，显示的内容也就发生了变化。V-model就可以来和输入做绑定。大家看到的，实际上它跟react很像，它也是要把一个界面，看到左边界面，经过分析，就像讲产品目录的例子一样，你认为它包含几部分，比如大的，包含上面的左边和右边，所以包含这样，然后在右边包含两个小的。
在左边包含两个小右边包含这三个并排的一块，功能可能相对独立或者它的目的是它的展示的内容相对独立，所以把它就按照这一边右边这棵树的结构去做了一个分解，分解完之后每一个就是一个构建，会发现整个前端无论用哪一个框架其实基本的想法都是一样，就是要去生命是渲染，生命是渲染的目的就是要让它用户体验好很多的内容是在前端就完成不需要让后端生成页面。
目的就是为了提高代码的结构化的程度，还有就是代码的可维护性、可复用性。所以我们专业的学生，反复追求的在大一时候上程序设计，就反复讲，其实程序设计里面几个字就可以概括，做所有的事情全部都是抽象和分解。然后就是逐步求精就是在做一件大的事情的时候你先把它分成大的块带领。
比如原来也给大一学生上过C++程序设计，是我们学员自己上了，后来大平台之后，这课就学院自己不上，在大平台上，当时我举了一个例子，也是我参考了别人一个例子就是如果让你去把奥林匹克运动会，去编程，应该怎么编？肯定想到的是要有开幕式，要有闭幕式，中间要有各种各样的比赛。比赛你又会分游泳。田径跑步之类的，然后游泳里面又会分女子由泳，男子游泳，然后又分1500米，800米，400米等，为什么会产生这样的一个分解，就可以具体编程在前面分解的过程当中，这就是一个逐步求精的过程。
一开始我也不知道完整的是什么样子，先做个大的切分，然后再做小的切分，在细腻度，所以你是在不断的抽象分解，逐步求精，在开发过程当中，是不断的去迭代。先出一个原始的版本，快速原型能展示出主要的核心，然后不断的迭代越来越完整，把细节加上去，从开始学的知识，一直都陪伴你职业生涯，写任何程序，都是这样一种思维剩下的。只是一个具体的技术的问题，就是技术点，就像这里讲的语法，其实去看一看就会，但是至少语法只是说这种，就像中文一样，只是告诉你具体应该怎么搭起来是没有错的，问题是写出来的作文为什么跟人家相比就难看了这么多，而且还有一个技术，一个思想在里，编程思想就是在不断地分解，不断的进化。
所以像这样的思想，既然是专业必须要有的，可以看到所有的框架基本上都是走路子的，所以构件化其实就是对页面让用户看到的界面的一个不断地分解的过程，所以才会出来一开始把它分成三大块然后每一块在很小的逐步求精出来最后到一个相对独立完整的不能不好再分的这样一个地方，开始对它变成就是写了一个具体的贡献然后大的贡献是靠小店贡，顺便讲一句，有同学在问，比如a和b之间的关系，a是b的父亲呢？还是a持有一个b？
就是在面向对象的世界里，永远要记住a，如果是b的父亲，就是b如果是扩展责任。a如果持有b，是a里面有一个成员是b类型的，比如它是它的儿子，它的儿子就是继承，但这种的在世界里面永远进步。组合应该是优于继承。因为继承，实际上你就隐含了一个b是一种a，只是它可能有一些自己扩展的属性或者方法。
er组合是说必有a没有强制要求一个毕竟原有继承的关系没有要求一定要是一个a所以b是一个人，就是搭一个要求传递一个参数进来，然后进行编程的时候。真正调动它的时候，传一个B类型的对象进去这是可以的，因为b可以当做-a去用，但是如果是组合它，它们之间没有关系，组合应该是优于继承。
所以在这里面看到就是一个大的组件需要若干个小的组件构成的，这是它的里面法至少现在大家知道在设计里面也是基于构件，所以识别构件。
然后把它拿出来去变成是我们要做的事情，至于具体的构建里面怎么实现，其实是具体的语法问题但思想要有就是构建化的思想。
三、Vue实例
实际上从台数的封装，到后来别的封装，再到构建开发，都是一样的道理，就要按这种逐步分解、不断求精的方式来解决问题。系统实际上是由构件来组成的，所以整个系统的开发的时候都是一个一个的构建。另外一个例子，就是现在定义了一个朋友的对象，把完整代码给大家看：
Vue.component('todo-item',{
props:['todo'],
template:<li>{{todo.text }}</li>'
})
var app7 new Vue({
el:r#app-7’,
data:{
groceryList:[
{id:0,text:'Vegetables'},
{id:1,text:'Cheese'),
{id2,text:'Whatever else humans are supposed to eat'}
]
}
})
刚才看到要创建一个构建把它跟app 进行交互，然后里面要给它传递一个数据，数据本身是一个Grocery list是一个集合类型，集合类型里面就放进去了。
看到的三条信息，有蔬菜、奶酪，还有其它，然后要做的事情是在div里面要按顺序显示一个列表，列表内容就不是之前看到list是我们定义的另外一个构件，它和react一样，在react里面出现的类和函数，定义的app, fashion app或者class app, 在最后用的时候，就是以标签形式出现，按to do atom标签去显示。
先看to do item是什么，Item是我们定义的一个构建，名字叫to do。还有props跟之前可能看到的是类似的，要传递进来的，不能修改，然后有一个template。Template里才是真正的列表项，然后再看，对grocery list里面的每一项叫做for的循环，于是到这里再来看要去创建这构件:
这构件是个循环，对grocery list里面的item进行操作，Grocery list里面每一个都是这些东西。然后就传递给了to do list，拿到每一个item，是最后一次拿出来依赖它，就item就扔给它，就把它当成一个to do ，它一直就是这里面的一个元素，取里面的text，元素的text的值，然后以L的形式列出来。
然后它就会让你帮它完成，扔一个对象进去，会认为扔这item就是这里面的to do 。要去说明一下to do要和item没有绑定所以你的item就是to do，就是这里面传播。在这边去显示的内容是to do 的内容，而to do是跟item绑定的，item是从哪里来的？
从高速路来的。是当时在创建，没有对象，跟APP-t绑定的时候，当成数据传递下来，所以app-t里面是有告诉list，这里面要解释的是to item就是定义的一个构建。
之前看到的react里面的东西也是一样，就是定义很多的自定义的标签，然后再把它们都定义成构架，就是class或者function，在这里定义了to do ，to do item构建之后可以去在其它的地方去使用，当成一个标签的使用，所以我们的页面里面全部都是一些构件。
从这里面可以看到，它和rock没有什么本质的区别，但是它背后的实现逻辑，有一些实现起来就从编码的角度显得比较简单，封装比较好。这是刚才上半部分页面。
它是构建每一次，要去创建一个Vue，就是这样创建的，创建一个record， 主要是静态方法，客户L来实现。然后利用的应用，里面不管怎么去设计它应该有一个跟实例就是用new Vue来创建，就是刚才看到的代码里面应该应用有跟对象就是用new去创建的东西，其它的构件都应该在它之下组成的一棵树，可以看到这边这棵树是在这里面，可以继续去实现，比如单子里面还有可以有其它知识点，特别像在VS里面看到的，所有的应用都在VS的里面。
var obj ={
foo:'bar'
}
object.freeze(obj)
new Vue({
el:'#app‘,
data;obj
}]
<p>{{foo}}</p >
<!--this will no longer update foo'!-->
<button v-on:click="foo='baz'">Change it</button>
其它的代码都是在这里，并继续去引用，所以大家看到你对比来看，很多概念比较清楚。
刚刚看到了第一个构建之后，它有data，之前看到过，结果就不太急跑了，在data里要强调的是data可以是本身，它可以是一个组长，它可以是一个项目，一个集合类，也就是里面有很多的键值对，但是你也可以把它这些键值对封装到一个对象里，让它直接对它就是对象，在这里看到改成对象，这对象有一个键值对的方法，在这底下定义好一个按钮，再点击的时候，会去做这样的动作，就是foo会变成bar，因为上面这里显示的是foo。
所以当你点击之后，它的状态发生变化，还是刚才说的，不用像rock里面要去掉一层size的这种动作，它会自动的去把值给它替换掉，按照最初它的指示办，当点击了之后被改成之后，自己没有做其它动作，上面就会被刷新掉。这里面动作本身跟前面的例子几个结合起来看，要强调的是在它这地方，它可以不是这样写的一个键值对，应该把它定义成一个对象，直接给对方处理。
new Vue({
data:{
a:1
},
created:function (){
//this points to the vm instance
console.log('a is:'this.a)
}
})/=>"ais:1"
在创建一个对象之后，回想一下创建定义好class，它对应的就是一个标签，然后生命函数有两个，一个是will mounted。就是标签将被移除之前打算做什么？还有一个低的就是当标签date mounted，当创建出来之后，想做什么，道理类似，在六里面它也有类似的感触，当有实例，出来之后怎么做？
很显然，一看就知道跟它类似的，但是它还有一个消费之前。到底有哪些呢？Vue的生命周期呢？里面其实有很多地方可以插入想要做的事情。在创建之前，创建之后，刚才看到的之后，在删除之前，就从页面里面想要把它移除掉。然后还有接过来的，之后更新之前更新之后摧毁自己，真正的把它摧毁掉，不是当前的页面当中把它拿掉，但它对象还存在表情，如何把它删掉，这和之前Vue说的生命周期的函数实际上道理是一样的，就是想的这这些时间点上，想干什么？所谓的生命周期，这些所谓的生命函数，就在时间点上，一旦它被创建出来之后，马上想做一件事情。在react里面看到的是JX，就是HTML-based。
Just混编的一种语法，就是所谓java script的一个扩展语法。但这是染的一个核心在Vue里面也是类似的,模板作用是一样的，就是模板语法，是为了要去以声明式的方式去把Vue里面的数据绑定，然后呈现出来，在VS里面讲的，说的H1的标签里面的内容实际上是生命是绑定的，未来它们就可以发生变化，道理是一模一样,所以看到了VUE的templates的模板。也是这样的一种方式。跟类作用是类似的，Vue就需要去通过执行这样的脚本去把模板里面替换掉，产生想看到的结果。
所以看到在这里支持HTML的语法，是引用的一个just的一个变量，可以看到里面HTML是怎么写的，看到用两个括号把它括起来，它的属性可以动态去绑定，刚刚看到抛开V开头的这些东西。其实就是奇妙的东西，所以它是一个质量和价格空间的东西，跟react的基本的思想是一样的。实际上在告诉你如果你想写一段文本message去引用未来就是一个变量，就会替换，但还有一种情况，就是比如网站是教人编程的，其实希望把话以文本的方式呈现，不要再让浏览器把它解释一下，怎么办呢？就要用语句去说明它不是一个人，要被解释的语法，就呈现一下，效果是怎么样呢？如图：
如果用VS前面这段脚本必须要用XML去解释，所以出来是红颜色的，就是按照HR的脚本去理解，也就是上面的语法，它实际上是对应的，如果是一个比如教学网站，想教别人是哪种语言是怎么写的，要写成上面样子，底下是给的本身是一个XML的脚本，再替换到这里的时候，应该让页面把它当HTML的脚本去呈现，所以会把它显示成红色。
test
<span>Message:{{msg }}</span>
<span v-once>This will never change:{{msg }}</span>
rawHTML
<p>Using mustaches:{{rawHtml }}</p >
<p>Usingvhtmldirective:<spanhtml="rawHtml"></span></p >
Attribute
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="isButtonDisable">Button</button>
Using JavaScript Expression
{{number 1 }}
{{ok 'YES''NO')}
{message.split(').reverse().join(''))}
< div v-bind :id =”’list-‘+id “></div>
Arguments
<a v-bind:href="url">...</ a>
<a v-on:click="doSomething">...</ a>
Dynamic Arguments
<a v-bind:[attributeName]="url">...</ a>
<a v-on:[eventName ]="doSomething">...</ a>
Modifier
<form v-on:submit.prevent="onSubmit">...</form>
v-bind是在绑定它的属性。然后就大概有其它href+”url”这种表达式，然后v-bind的绑定了还可以，比如url的链接，然后某一个具体的属性等于什么都可以，这地方讲就是规范，还有一个比较长的地方是没有一个属性一定要等于什么，属性名可以是动态传进来的。就是可能是属性，还有可能是别的。不管哪个属性，来了一个属性。只要告诉六的内容是什么，就绑到URL函数上去，所以V-bind的实际上是最常见的一个东西，也就是v-bond的就是要把当前的页面里面的很多的内容给它。确定下来是声明式的去呈现。要告诉别人，它到底应该是什么，它的属性是什么。V-bind应该对应的是哪一个函数方法，对应的就是创建Vue构建的时候看到就是message里面定义的哪一个函数，这里面讲的是v-bind会有一些简便的一些写法。
<div id="example">
<p>original message:"{message }}"</p >
p>Computedreversed message:"}{{reversedMessage }}"</p >
</div>
var vm new Vue({
el:'#example‘,
data:message:'Hello'},
computed:{
//a computed getter
reversedMessage:function ()
//’this'points to the vm instance
return this.message.split('').reverse().join('')
}
}
)}
有一个稍微看起来就是复杂一点的例子，把刚才的例子组合了一下，这是一个消息这是一个反过来的消息，消息本身它的值是hello，然后引入一个较短的东西computers是什么意思呢？定一个属性，是reverse the magic这属性它是直接写到这里，它的值是计算得来的，就是拿当前的逻辑跟刚才看到的一样，就是把当前消息给它反计算出来，把reverse message定义成computer有什么意呢？
这种类型的属性，它意思是正常情况下，在内存里面应该开一个空间。表示是message。存了哪些值，比如hello。如果是有last month在这里面也要开一个空间。Computers的意思属性是不用在内存里存吗？
它基本上就是计算得来，这样设置的好处是什么，但是如果有很多的属性是计算得来的，以这样的方式去定义，它的内存不保存它计算出来，至少有两个好处，第一个肯定是省内存可能内存里面就不需要存，它就会少很多，如果很多的属性都是这种，就不用动，第二就你的属性，每一次在读取它的时候都是这种计算得来的话，也就意味着，当message发生变化的时候，因为是从Mac计算出来的。变化之后，如何去访reverse的message？它就是一个变化，为之后的值，如果两个都在内存里存，一旦把message值改变之后，要人为的去把reverse message也给改变。但是现在它是computer，本来在内存里面不存，所以每次访问它，都是这样去执行得到的结果。有点像观察者模式一样它就跟着变你变我也变就行，所以肯定有一种类型的属性。但是肯定也有一个缺点就是如果这里面的逻辑比较复杂，就意味着每一次在获取这样属性都要进行一个复操作，想的就不是特别好。
computed:{
fullName:{
//getter
Get:function ()
return this.firstName +' 'this.lastName
},
//setter
set:function (newValue){
var names =newValue.split(' ')
this.firstName= names[]
this.lastName=names[names.length -1]
}
}
所以看computer的出来之后应该缓存一下。缓存这件事情，如果把它缓存一下，实际上你又占了内存，但它至少有一个好处，就是只要message发生变化，Vue message一定会跟着变。所以这是用它的好处，还是比直接定一个method要求去做这种转换，然后每次去人为的去这样好。这是它们的区别，所以就可以看到会可以有很多的属性，可能是靠computer出来动态的去计算它们的值，在这里比如for name现在就computer，然后computers的属性也可以做设置，设置和获取这样的约定，为什么呢？
因为在git的时候，获取它的逻辑要去写清楚，就像刚才看到的，里面做的实际上只有获取，想改变它里面的值，没有办法做到，在这里实际上也可以用塞的方法来强行的改变它的值。比如在里面写进去逻辑，把新的传递的名字用空格开,分别去改掉first name last name，这样就可以看到实际上是有first name和last name两个属性。没有直接去改,通过由它们计算而来的for name通过一次性可以把两个东西改造，这是很平常的一个用法。
var watchExampLeVM new Vue({
el:#watch-example',
data:{
question:
answer:'I cannot give you an answer until you ask a question!'
}，
watch:{
question:function (newQuestion,oldQuestion){
this.answer 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created:function ()
this.debouncedGetAnswer =_.debounce(this.getAnswer,500)
},
还有watch意思可以看到这里面。例子稍微长一点。是这样的，首先在页面上。会产生让用户输入一个问题，输入的问题会跟question要合起来，然后底下,当时用到了跨域的访问，就是因为真正找答案是在访问一个网站所以完整的逻辑稍微复杂一点，创建了一个Vue
要输入一个问题，当开始输入，就会发现你的话就变了，刚才要等，然后停止，它马上就会去掉返回方去返回答案的函数，函数在这里还能做的动作，先显示是什么，因为输入的没有问号，所以它显示的是问题就应该是问题，通常应该包含一个问号，问它一下，是不是机器人
会回答yes，这里面就可以看到，答案是从远端经过这样，抛出问题之后，返回的结果里面取出来的答案去替换掉，它就一直在watcher question的变化，所以只有停止的时候，判断会比较快，所以稍微切一下，可能就会做判断。马上就判断出没有冒泡，但是如果一直输入，就不做判断。过程实际上就是说就像一个观察者一样就是想盯着谁，根据发生变化之后，要想去做一些什么其它的事情。在这里面，watcher就起了这样的作用。
在写页面的时候，页面要想写的好看，肯定会有一些样式，可以对着元素的内来进行定义，也可以去别的，所以也可以是ID就是style，在这里面，它全部都是用v-bind来进行绑定，举个例子，这里可以看到，现在有个div，div的class是什么呢？有的时候可能class类的，它里面的值到底是等于什么？
传date , IsActive是true ，hasError是false。传进去可以看到这样的东西，传上来之后，class是active，要看active的变量的值，于是在这里可以看到，它甚至可以组合， div的class是什么。是static，并且它还可以有一个class绑定，就是active，如果是true就绑X。当然如果是force，它就不会使类了，所以属性就是div是为了将来style去做层叠样式的时候，去选择一个依据，可以动态的去改变它的class的值，改变的依据是给它的一个data。这地方也可以看到，就是类似的，就是我在绑的时候要去绑到底是哪一个类的时候，要根据底下传递进来的参数来确定。如果是true就绑这个，如果是false，就绑哪个。
现在去要传一个class，然后转进去，要看它的结构。然后就决定里面div的class估计大家不太会用， CSS，以及在使用的APP或者VUE的时候，不用用第三方的工作，大家问题就有点多余，因为本来就应该尽量用第三方的东西。
如果人家有一个直接写好的控件，直接拿来用，不用自己去再去写一遍，觉得大家用去绑定CLASS的概率比较小，其实是语法之一，所有的单写一下，底下大家可以看到，在定义东西之后，就可以看到它的BATE。
甚至给了这样的之后，再返回class object绑定高价格是一个类，返回的结果就是这样的结果。
<div v-bind:class="{active:isActive }"></div>
<div
class="static"
v-bind:class="{active:isActive,'text-danger':hasError )">
</div>
data:
isActive:true.
hasError:false
}
=〉
<div class="static active"></div>
<div v-bind:class="classobject"></div>
data:
classobject:{
active:true,
'text-danger':false}
}
=>
<div class="static active"></div>
<div v-bind:class="classobject"></div>
data:{
isActive:true,
error:null
},
computed:{
classobject:function (){
return
active:this.isActive &!this.error,
'text-danger':this.error &&this.error.type ==='fatal'
}
}
}
看到这地方是定义的一个构建，它叫my-component，整个地方定义了一个template里面是一个my-component，就表示一段话然后可以看到它完整的class整个定义的内容，以及在定义它的一个具体的实例，左右传进去的class，合起来出来了这样的一个效果，所以这是最终的结果。
所以club还可以组合class的目的就是告诉将来在做样式说明之后，class的引用会有很多种灵活的方法可以的方法可以选择。
Vue.component('my-component',{
template:'<p class="foo bar">Hi</p >'
})
<my-component class="baz boo"></my-component>
=>
<p class="foo bar baz boo">Hi</p >
<my-component v-bind:class="{active:isActive )"></my-component>
=>
<p class=“foo bar active'”>Hi</p >
