Vue
點選檢視程式碼
-- Vue
-- ·Vue 是一套前端框架免除原生JavaScript中的DOM操作，簡化書寫
-- ·基於MVVM(Model-View-ViewModel)思想,實現資料的雙向繫結,
-- 將程式設計的關注點放在資料上
-- ·官網:https://cn.vuejs.org
--
-- Vue 快速入門
-- 1.新建 HTML 頁面，引入 Vue.js檔案
-- <script src="js/vue.js"></script>
-- 2.在JS程式碼區域，建立Vue核心物件，進行資料繫結
-- new Vue({
-- el: "#app",
-- data() {
-- return {
-- username:""
-- }
-- }
-- });
-- 3. 編寫檢視
-- <div id="app">
-- <input name="username" v-model="username" >
-- {{username}}
-- </div>
--
-- Vue 常用指令
-- ·指令:HTML 標籤上帶有 v- 字首的特殊屬性，不同指令具有不同含義。
-- 例如:v-if，v-for...
-- ·常用指令
-- 指令 作用
-- v-bind 為HTML標籤繫結屬性值，如設定 href，css樣式等
-- v-model 在表單元素上建立雙向資料繫結
-- v-on 為HTML標籤繫結事件
-- v-if
-- v-else 條件性的渲染某元素，判定為true時渲染,否則不渲染
-- v-else-if
-- v-show 根據條件展示某元素，區別在於切換的是display屬性的值
-- v-for 列表渲染，遍歷容器的元素或者物件的屬性
--
--
-- ·v-bind:
-- <a v-bind:href-"ur">百度一下</a>
-- <!--
-- v-bind 可以省略
-- -->
-- <a :href="url">百度一下</a>
--
-- ·v-model:
-- <input name="username" v-model="username">
--
-- ·html:
-- <input type="button" value="一個按鈕" v-on:click="show()">
-- <input type="button" value="一個按鈕" @click="show()">
-- ·vue:
-- new Vue({
-- el: "#app",
-- methods:{
-- show(){
-- alert("我被點了");
-- }
-- }
-- });
--
-- ·v-if:
-- <div v-if="count == 3">div1</div>
-- <div v-else-if"count == 2">div2</div>
-- <div v-else>div3</div>
--
-- ·v-show:
-- <div v-show="count == 3">div4</div>
--
-- ·v-for:
-- <div y-for="addr in addrs">
-- {{addr}}<br>
-- </div>
-- ·加索引
-- <div v-for="(addr,i) in addrs">
-- <!--i表示索引，從0開始-->
-- {i + 1} : {{addr}}<br>
-- </div>
--
-- Vue生命週期
-- 生命週期的八個階段:每觸發一個生命週期事件，會自動執行一個生命週期方法(鉤子)
-- 狀態 階段週期
-- beforeCreate 建立前
-- created 建立後
-- beforeMount 載入前
-- mounted 掛載完成
-- beforeUpdate 更新前
-- updated 更新後
-- beforeDestroy 銷燬前
-- destroyed 銷燬後
-- 關鍵：
-- ·mounted:掛載完成，Vue初始化成功，HTML頁面渲染成功:
-- 傳送非同步請求，載入資料
--
-- 示例:
-- new Vue({
-- el:"#app"，
-- mounted(){
-- alert("vue 掛載完畢，傳送非同步請求");
-- }
-- });
--
Element
點選檢視程式碼
-- Element
--
-- ·Element:是餓了麼公司前端開發團隊提供的一套基於Vue的網站元件庫，
-- 用於快速構建網頁
-- ·元件:組成網頁的部件，例如 超連結、按鈕、圖片、表格等等~
--
-- Element 快速入門
-- 1.引入Element 的css、js檔案 和 Vue.js
-- <script src="vue.js"></script>
-- <script src="element-ui/lib/index.js"></script>
-- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
-- 2.建立Vue核心物件
-- <script>
-- new Vue({
-- el:"#app
-- })
-- </script>
-- 3.官網複製Element元件程式碼
--
-- Element 佈局
-- Element 中有兩種佈局方式
-- Layout 佈局:透過基礎的 24 分欄，迅速簡便地建立佈局
-- Container 佈局容器:用於佈局的容器元件，方便快速搭建頁面的基本結構