Vue.js新手入门

　 这是官网教程地址：/v2/guide/

　从代码能看出el是用来绑定元素的，data顾名思义就是一个json格式的数据源。

　v-bind属性被称为指令。指令带有前缀v-，以表示它们是Vue提供的特殊属性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。

　条件判断

　for循环方法

　为了让用户和你的应用进行互动，我们可以用v-on指令绑定一个事件监听器，通过它调用我们Vue实例中定义的方法，也就是添加事件，举一反三飞，比如v-on:blur，我觉得可行呀

　注意在reverseMessage方法中，我们更新了应用的状态，但没有触碰DOM——所有的DOM操作都由Vue来处理，你编写的代码不需要关注底层逻辑。

　Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。也就是你在输入框写的值，P标签也会更改。

　（可以这么说vue.js不能说是MVVM模型，但是vue都到了mvvm的启发而形成的）

　你只需要明白所有的Vue组件都是Vue实例，并且接受相同的选项对象即可

　我理解vue是一个完全是响应式的东西。当数据改变时，视图会进行重渲染

　除了data属性，Vue实例暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。

　实例生命周期

　每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。

　比如 created钩子可以用来在一个实例被创建之后执行代码：

　（重点）下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。(图在下面呢，太长，装不下了。。。)

　插值

　数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值：

　通过使用 v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

　（简单的说就是就算更改data也不会改变标签里的值）

　双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令

　（可以这么说，假如data里的rawHtml是“id=”id””，html是可以识别为html的代码）

　这个div的内容将会被替换成为属性值rawHtml，直接作为HTML——会忽略解析属性值中的数据绑定。注意，你不能使用v-html来复合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。

　使用JavaScript表达式

　迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持。

　每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

　v-bind缩写

　v-on缩写

　它们看起来可能与普通的HTML略有不同，但:与@对于特性名来说都是合法字符，在所有支持Vue.js的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

　计算属性

　结果：

　Originalmessage:"Hello"

　Computedreversedmessage:"olleH"

　this.message.split(‘’).reverse().join(‘’)=data.message.split(‘’).reverse().join(‘’)，这个方法就是将翻转字符串

　我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

　（这块你只需要了解就行了，说的是计算属性具有缓存功能，如果不需要缓存那就用方法的形式写就行，就是method:{reversedMessage:function()}这种，就不会有缓存了）

　自定义的侦听器

　教程里有dome，最好去试试，看他的实现过程，（/v2/guide/computed.html#侦听器）

　在输入框里写英文问号就行

　Class与Style绑定

　这块对你来说也很重要，好像都很重要似得，哈哈。。。

　我们可以传给v-bind:class一个对象，以动态地切换class：

　上面的语法表示active这个class存在与否将取决于数据属性isActive是否为 truthy(就是true)。你可以在对象中传入更多属性来动态切换多个class。此外，v-bind:class指令也可以与普通的class属性共存。

　这种方式结果是class=”active”

　还可以用数组的形式，就跟jquery里的css({})方式一样

　结果就成这个样子了

　还可以用三元表达式

　v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用单引号括起来)来命名：

　直接绑定到一个样式对象通常更好，这会让模板更清晰

　（看起来和上面的Class用起来没什么差啦）

　从2.3.0起你可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

　<div:style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>

　这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。

　（这个我就不懂什么意思了，应该和浏览器有关系吧，真的，学到这里我发现这东西跟PHP语言特别特别的像，你是不是也感觉了）

　条件渲染

　先说说ifelse的用法吧，官网说的有些啰嗦，上一张图你就懂了

　<h1v-if="ok">Yes</h1>

　<h1v-else>No</h1>

　对，就是这么简单

　用key管理可复用的元素

　<templatev-if="loginType==='username'">

　<label>Username</label>

　<inputplaceholder="Enteryourusername">

　</template>

　<templatev-else>

　<label>Email</label>

　<inputplaceholder="Enteryouremailaddress">

　</template>

　如果这么写的效果就是，当初始化的时候loginType是’username’的时候,会展示<inputplaceholder="Enteryourusername">这个输入框，然后在这个里面输入值，再改变loginType的值，让它不是username，这时label的值虽然变了，但是输入框的值是没有清空的，因为两个模板使用了相同的元素，<input>不会被替换掉——仅仅是替换了它的placeholder。

　想亲手试一试的话（/v2/guide/conditional.html#用-key-管理可复用的元素）点这个链接就行了

　加上这个属性就好了，就会切换成功。

　v-show

　相当于css里的display:none，

　就这么写,“ok”的值是在new Vue()的实例里，data:{“ok”:true}

　练手地址

　/class/566e67417e7d40946afc5ddc

　 /class/566e67417e7d40946afc5ddc（在线教程）