Vue.js(声明和渲染)

Vue的声明和渲染

去Vue官网看了一下自己试试遇到了不少问题，在学习的过程中记录一下
本文使用vue-cli脚手架生成项目。

既然是刚刚学习，我们就把所有的东西都写App.vue里吧
我发现如果直接复制官网上的代码是行不通的我们看一下官网的一个例子

我直接复制过去发现页面是一面空白的，需要改为下面的格式

注意
修改完成后需要保存，你的网页才会刷新
保存后

完事了，我们完成了第一个Vue应用。。。
我们继续看官网的下一个例子

到我们这就就变成了

我们在标签内添加了一个v-bind:title=“message”
v-bind是Vue的指令，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。（摘抄一下）
现在将鼠标放在这个标签上，就会弹出页面加载的时间。

我们看一个循环样例

页面呈现

我把代码重点圈起来我们看一下

首先我们有一个todos的数组，之后我们通过‘v-for’来循环这个数组来生成了3个

• </>标签，这种写法的确是挺讨人喜欢的，最初接触的时候非常非常不习惯，倒是越用越舒服。

• 点击事件（v-on:click）

  按钮的on-click是非常常用了，在vue中又有一些不同
  先看一下Vue给的例子
  
  可以看到，我们一个

  标签 message被赋值为‘Hello Vue.js’
  中有一个v-on:click的点击事件，执行“reverseMessage”函数，这个函数的作用就是将message颠倒后从新赋给message
  
  点击按钮后message就会被颠倒。