title: 重学Vue（一）基础
tags:

  • 前端
  • Vue.js
    categories:
  • 前端
    date: 2019-10-09 11:01:00

仔细再过一遍Vue.js文档。对于需要的部分加上一些自己的理解。

介绍、Vue实例、模板语法、计算属性和侦听器

使用项目：iview-admin 作为示例代码。

介绍

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

将要被渲染的数据像使用普通变量一样声明使用

  1. <div id="app">
  2.   {{ message }}
  3. </div>
  1. var app = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     message: 'Hello Vue!'
  5.   }
  6. })

响应式关联DOM和数据

  1. <div id="app-2">
  2.   <span v-bind:title="message">
  3.     鼠标悬停几秒钟查看此处动态绑定的提示信息！
  4.   </span>
  5. </div>
  1. var app2 = new Vue({
  2.   el: '#app-2',
  3.   data: {
  4.     message: '页面加载于 ' + new Date().toLocaleString()
  5.   }
  6. })

这里引入了指令，带有前缀-v，如上的写法将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

条件与循环

  1. <div id="app-3">
  2.   <p v-if="seen">现在你看到我了</p>
  3. </div>
  1. var app3 = new Vue({
  2.   el: '#app-3',
  3.   data: {
  4.     seen: true
  5.   }
  6. })

不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构

前一个段代码示例绑定了span的title属性，这一段代码绑定到了p的DOM结构上。

  1. <div id="app-4">
  2.   <ol>
  3.     <li v-for="todo in todos">
  4.       {{ todo.text }}
  5.     </li>
  6.   </ol>
  7. </div>
  1. var app4 = new Vue({
  2.   el: '#app-4',
  3.   data: {
  4.     todos: [
  5.       { text: '学习 JavaScript' },
  6.       { text: '学习 Vue' },
  7.       { text: '整个牛项目' }
  8.     ]
  9.   }
  10. })
  12. /*
  13. 学习 JavaScript
  14. 学习 Vue
  15. 整个牛项目
  16. */

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

处理用户输入

组件化应用构建

Vue实例

创建一个Vue实例

数据与方法

实例生命周期钩子

生命周期图示

模板语法

插值

指令

缩写

计算属性和侦听器

计算属性

侦听器