前端

重学Vue（一）基础

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

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

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

介绍

声明式渲染

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

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

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

响应式关联DOM和数据

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

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

条件与循环

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

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

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

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

/*
学习 JavaScript
学习 Vue
整个牛项目
*/

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

处理用户输入

组件化应用构建

Vue实例

创建一个Vue实例

数据与方法

实例生命周期钩子

生命周期图示

模板语法

插值

指令

缩写

计算属性和侦听器

计算属性

侦听器

推荐文章