Vue.js基础总结（一）声明、渲染、条件及循环

✪说起vue,眼下可谓是当代最火热的框架了，下面是我收集的资料及个人小结：

注释：
1、文本 {{ msg }}
2、纯HTML v-html v-text 防止XSS,CSRF/详情页面图文信息
3、表达式 三元运算符
4、指令 ==v-model v-html v-test v-if v-else-if v-else v-show v-bind v-on v-once v-pre v-cloak v-slot ==
5、v-if、 v-show
6、v-for

1.什么是vue呢？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API；构建数据驱动的Web界面的库。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

声明式渲染：文本插值
HTML：

<div id="app">
  {{ message }}
</div>

js:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

以上结果会显示为Hello Vue!，在这里数据和 DOM 已经被建立了关联，所有东西都是响应式的，在浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，将看到相应地更新。

声明式渲染：绑定元素特性
HTML：

<div id="app-2">
  <span v-bind:title="message">
    查看此处动态绑定的提示信息！
  </span>
</div>

js:

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

以上结果会显示为查看此处动态绑定的提示信息！
HTML:

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

js:

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

结果为：现在你看到我了,如果在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

v-for 指令可以绑定数组的数据来渲染一个项目列表：
HTML:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

js:

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

结果为：1.学习 JavaScript
2.学习 Vue
3.整个牛项目