小QA学习前端系列之vue实例

发表于

小QA学习前端系列之vue实例

不管是学习任何语言和框架，或者工具，都应该先把官方文档略读一遍，之后找个demo项目，开始看代码，然后照着人家的demo 敲一遍，基本上就入门，我是笨人，这是我认为学习效率最高的方式。
API:https://cn.vuejs.org/v2/api/#v-bind

啥是vue

就是一个前端框架，他吸收了react的优点例如：

1. 使用 Virtual DOM
2. 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
3. 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

同时它也融合了AngularJS 的一些优点

1. 数据绑定
2. 指令与组件

还有其他的一些优秀框架例如konckout等
详细内容大家可以看
https://cn.vuejs.org/v2/guide/comparison.html

生命周期

https://cn.vuejs.org/images/lifecycle.png
现在的软件设计都利用了生命周期概念，帮助在开发者在开发中更好的处理数据，例如Android的生命周期，React的生命周期。
VUE大概的流程如下

1
2
3
4
beforeCreateed()-> created()->beforeMount()->mounted(){->beforeUpdate()
->updated()}->beforeDestroy()->destroyed()
我们先大致了解下 vue 的生命周期，这对于以后我们看别人的代码有很大好处

开始实践

vue实例

创建vue实例

1
2
3
var vm = new Vue({
  // 选项
})

数据与方法

data 对象中能找到的所有的属性。
值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。
所以后面添加的属性 都无效
Vue 实例暴露了一些有用的实例属性与方法。都有前缀$

1
2
3
4
5
6
7
8
9
10
11
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

具体的API如下https://cn.vuejs.org/v2/api/#实例属性
因为我已经熟悉了node与webpack，所以直接上vue-cli 初始化项目
不熟悉的同学 还是建议在
https://jsfiddle.net/chrisvfritz/50wL7mdz/
这个模板下学习
OK 第一节完毕 明天继续按着文档看模板语法