[30天 Vue学好学满 DAY2] Vue.js介绍

核心概念-渐进式框架(progressive framework)

一个完整的页面是由各个组件(component)组成，并关注於各组件的渲染，并透过绑定或全域变数(Vuex)进行沟通，自由组合各组件。

命令式渲染 vs 声明式渲染(vue)

命令式渲染:当DOM发生变化，程序需做出相互的操作，整体耦合度高。
声明式渲染:不须操作DOM，开发者定义结果，进行响应式更新。

MVVM（Model–view–viewmodel）

Model:资料存取层，进行资料处理
View:视图
ViewModel:资料连结器，不须操作，透过资料变动触发。

元件or组件(components)

定义後可重用
有父子概念(树状)

• 父->子 (prop)
• 子->父 ($emit)
• 全域变数 (vuex)
• 数据绑定
  透过import嵌入
  
  官网示意图

实例(Instance)

创建实例後，透过改变实例中的物件达到即时响应页面内容。
透过Vue()建立，以下为官网范例

<-- HTML 显示 -->
<div id="app">
  {{ message }}
</div>

// 新建实例
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

即时响应:开启console後，透过以下指令可让官网页面进行响应式调整。

app.message='test'

app -> 实例
el -> 使 Vue 与 HTML 进行绑定
data -> 带入的资料

使用方式

下载後透过直接引入
透过 Vue-cli 产生基础专案

详细安装方式可参考官网，明天将透过Vue-cli建置基础专案开始实作。

有错误请不吝指教!
参考资料
https://zhuanlan.zhihu.com/p/342747079
https://ithelp.ithome.com.tw/articles/10213157
https://cn.vuejs.org/v2/guide/installation.html
https://medium.com/pierceshih/vue-js-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-day13-vue%E5%AF%A6%E4%BE%8B-72eb192b647c