### Vue.js
PHP 程序員除了寫后臺程序之外,還有很大一部分工作在展現層,和瀏覽器前端打交道。2017 年你還在用 jQuery 操作 DOM 實現界面渲染嗎?已經完全 out 了。現在用 Vue.js 可以非常方便地實現數據和 DOM 元素的綁定。通過 Ajax 請求后臺接口返回數據后,更新前端數據自動實現界面渲染。
如果你不光要寫 Web 程序,同時還希望兼顧 Android 、IOS 、PC 客戶端等平臺,React Native 是一個不錯的選擇。
```
<script>
export default {
name: "Home",
data() {
return {};
},
methods: {
// 組件的方法
},
watch: {
// watch擅長處理的場景:一個數據影響多個數據
},
computed: {
// computed擅長處理的場景:一個數據受多個數據影響
},
beforeCreate: function() {
// 在實例初始化之后,數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
},
created: function() {
// 實例已經創建完成之后被調用。在這一步,實例已完成以下的配置:數據觀測(data observer),屬性和方法的運算, watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。
},
beforeMount: function() {
// 在掛載開始之前被調用:相關的 render 函數首次被調用。
},
mounted: function() {
// 編譯好的HTML掛載到頁面完成后執行的事件鉤子
// el 被新創建的 vm.$el 替換,并掛載到實例上去之后調用該鉤子。
// 此鉤子函數中一般會做一些ajax請求獲取數據進行數據初始化
console.log("Home done");
},
beforeUpdate: function() {
// 數據更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態,這不會觸發附加的重渲染過程。
},
updated: function() {
// 由于數據更改導致的虛擬 DOM 重新渲染和打補丁,在這之后會調用該鉤子。
// 當這個鉤子被調用時,組件 DOM 已經更新,所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下,你應該避免在此期間更改狀態,因為這可能會導致更新無限循環。
// 該鉤子在服務器端渲染期間不被調用。
},
beforeDestroy: function() {
// 實例銷毀之前調用。在這一步,實例仍然完全可用。
},
destroyed: function() {
// Vue 實例銷毀后調用。調用后,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調用。
}
};
</script>
```
#### (1)渲染列表
> 初始化數據
~~~
var dom = null;
$.post("/list",{'page':1},function(res){
dom = new Vue({
el: '#app',
data: {
sites:res.data
}
});
});
~~~
> 再次渲染數據
~~~
layui.jquery.post("/list",{'page':obj.curr},function(res){
layer.close(load);
dom.sites=res.data;
});
~~~
#### (2)預加載前隱藏原始代碼(不用解釋)
```css
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
```
```html
<tbody id="tbo" v-cloak>
<tr v-for="of in oflist">
<!-- 省略若干代碼 -->
</tr>
</tbody>
```
- 文檔目錄
- 一、PHP筆記
- 安裝及部署工具
- Oneinstack使用筆記
- LNMP使用筆記
- Composer使用筆記
- Composer包制作和應用
- Windows下的PHP
- Docker安裝MySQL
- PHP知識匯總
- PHP8.0特性
- PHP雜項總結
- empty測試
- 阿里云SDK使用文檔
- Swoole學習筆記
- PHP系統操作函數
- PHP系統探針
- PHPExcel導入導出數據
- PHP正則
- 數組函數
- Workerman小記
- trait
- 抽象類
- MVC設計模式
- PHP連接Access數據庫
- guzzlehttp
- PHP加密方法
- PHP框架集合
- ThinkPHP
- YII
- Laravel使用筆記
- easyswoole
- TP5.1的正確使用方式
- ThinkPHP6.0隊列
- PHP相關技術
- JWT
- 支付筆記
- PHP新寫法
- PHP常用函數
- 二、運維筆記
- CentOS
- 常用命令
- 文件操作類
- 問題記錄
- iptables
- 壓縮解壓命令
- CentOS8筆記
- Linux常用信息查看命令
- curl
- dig&nslookup
- 運維技術
- DNS體系
- CDN體系
- Haproxy負載均衡
- Ansible筆記
- crontab
- LVS簡單理解
- 日志分析
- Python系統監控
- Linux系統監控
- 負載均衡方法
- Shell腳本示例
- ntp同步時間
- 寶塔運維
- Goaccess的使用
- Supervisor使用
- 用戶管理
- RSA證書登錄
- 網絡技術
- DHCP
- IPv6學習
- 網絡技術筆記
- 抓包筆記
- IPv4
- TCP
- IP基礎知識總結
- IPv6地址庫
- IPv6地址列表
- 云產品
- 對象存儲大比拼
- 靜態站點部署方案
- Apache配置總結
- Docker筆記
- 三、Web體系
- HTTP
- HTTP頭字段總結
- head頭部細講
- 跨域請求
- HTTPS
- HTTP狀態碼表
- 關于IP的HTTP頭部
- HTTP Method 詳細解讀
- HTTP的表單提交方式
- Vue
- Vue學習筆記
- ElementUI筆記
- Vue項目部署
- vue+layui
- vue-resource的使用
- axios的使用
- vue-element-admin
- Electron打包Vue
- Javascript
- JavaScript遍歷json總結
- jQuery方法匯總
- WebSocket
- 案例:使用JavaScript獲取用戶內網IP地址
- JS導出Excel
- 前端筆記
- Viewer.js
- CSS筆記
- LayUI使用筆記
- 大屏系統
- 前端大屏系統
- 大屏預覽
- 大屏HTML源碼
- 常見Web攻擊
- OAuth2.0
- 綜合知識
- 四、數據庫
- MySQL
- MySQL數據庫備份
- MySQL用戶管理
- JSON字段查詢
- mysqldump導入導出數據庫總結
- MySQL數據類型
- MySQL數據庫案例總結
- MySQL8.0.11安裝筆記
- Binlog筆記
- Navicat的使用
- MySQL常用內置函數
- Windows安裝mysql8.0
- 存儲過程
- 字符集
- MySQL主從復制
- PHPEnv一鍵安裝MySQL
- Redis
- Redis筆記
- Redis在Windows的使用
- phpredis教程
- Redis事務
- redis集群
- Redis主從復制
- MongoDB
- MongoDb匯總
- 遇到問題
- 備份與還原
- 語法
- MongoDB安裝
- Postgresql
- 安裝
- PG筆記
- PG在ThinkPHP中使用
- PG數據庫和MySQL數據庫對比
- Elasticsearch
- 查詢
- 數據格式
- 五、Nginx
- Nginx筆記
- 反向代理&負載均衡
- Nginx配置文件全面解析
- https/ssl配置
- 日志切割
- Openresty筆記
- 變量解釋
- Tengine
- Nginx語法
- 文件服務器
- 六、其他語言
- Node.js
- Express
- 安裝問題
- pm2的使用
- Python
- Tornado
- pip的使用
- Scrapy
- 多進程
- Python導出本地Excel
- Requests庫
- Socket庫
- Django
- 問題記錄
- Python虛擬環境
- Fabric庫
- Flask
- MongoDB的使用
- uwsgi部署
- Gunicorn部署
- Flask的虛擬環境
- Java
- JDK安裝
- JSP頁面
- JSP項目部署
- 學習計劃
- Java學習記錄
- Java相關狀態碼
- Jfinal筆記
- Websocket
- 客戶端JavaScript
- Workman
- Swoole
- .NET
- WPF
- PowerShell
- 文件操作
- Interop.Excel
- DotNet筆記
- Go
- beego
- gin
- 備份MySQL數據庫至OSS
- 對象存儲比較更新
- 使用Go做一個靜態文件服務器
- Ruby
- 七、雜項
- 其他筆記
- 義務勞動系統操作說明
- USB電流筆記
- Git使用筆記
- git常用命令列表
- git碼云配置hook鉤子實現自動部署
- 搭建git服務器
- 命令手冊
- git鉤子
- 自建Git服務器配置自動部署
- 算法匯總
- 時間復雜度和空間復雜度的簡單講解
- 加密算法
- 測試
- AB測試
- OFFICE
- Excel
- 數學筆記
- 對數
- 指數
- 三角函數
- 我用latex寫公式
- 博客生成器
- markdown轉html
- Jekyll
- Hugo
- 附:測試四大git-pages
- Hexo
- svn使用簡記
- 正則表達式
- 草稿
- 個人成長篇
- 自創JS加密PHP解密程序
- 有趣的github項目
- 編輯器使用習慣
- 電腦選購指南
- 服務器重裝備忘錄