Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处
生活随笔
收集整理的這篇文章主要介紹了
Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
讓我們手摸著手大步向前走 ,最近看完 曾國藩傳，覺得很不錯，還有杜月笙與孟小冬 ，推薦大家在寫代碼的時候，要多讀書，好增加自己的文藝氣息。多些對書的感悟，放心游戲，多出去走走，今天的北京 真冷 3月30日記。
偵聽器實現模糊搜索
// 偵聽器，實現搜索功能異步操作watch: {// es6方法中的簡寫在寫一次以后就不寫了// 在search 里面 能用 nweValue 進行檢索數據// 模糊查詢 所有的接口通過json--server 給我們提供的接口search(newValue, oldValue) {axios.get("http://localhost:3000/brands?name_like=${newValue}").then(response => {this.items = response.data;}).catch(err => {});}}, 復制代碼VUE的核心 組件 和 路由 生命周期
組件
組件就是頁面上功能完備的區域。 結構，樣式 ，js，組件允許我們使用小型，獨立和通常可服用的組件構建大型應用，仔細想任何的應用界面都可以抽象為一個組件數目組件是可以復用的vue 實例，且帶有一個名字模塊：側重于功能或者數據的封裝組件：包含了template style 和 script組件有自己的作用域template 每個組件模板有且只有一個根元素組件中的data 要求 必須是一個函數且需要返回一個對象 復制代碼組件的分類和使用
分類：全局注冊和局部注冊使用步驟：1、注冊組件，2通過名字使用組件 復制代碼局部組件
<script>// 這里不能訪問 組件中的data // 組件也不能訪問new Vue 里面的成員new Vue({el: "#app",// 局部組件components: {// 組件有自己的作用域com: {// 組件就是一個vue 的實例// 組件的模板中應該只有一個根元素template: "<div><span>首頁 {{msg}} </span></div>",data(){// 組件中的data 必須的一個函數,因為要讓不同的實例管理自己 return{msg:'hello',}}}},methods: {}});</script> 復制代碼全局注冊組件
// 全局組件Vue.component("Coma", {template:"<div><button @click='handle'>按鈕</button><span>{{count}}</span></div>",data() {return {count: 0}},methods: {handle() {this.count ++;}}}); 復制代碼父子組件
// 父組件Vue.component("parant-com", {template: "<div>父組件---使用子組件<child-com/></div>"});// 子組件Vue.component("child-com", {template: "<div>子組件</div>"}); 復制代碼父子組件介紹 在父組件里面 要把子組件 放到里面 才能生效 <\child-com/>
props 父組件給 子組件傳值 與傳遞不同數據
<script>Vue.component("com", {// props 道具 里面是傳的是數組// 接收父組件傳過來的值 把外部的值傳給組件內部,這幾記住穿過來的就是字符串props: ["leve1", "leve2"],// 這里要綁定變量 所以 我們要綁定// prop 傳遞數字，布爾值，數組對象，單向數據流所有prop 向下傳輸template: "<div><span>{{leve1}}</span>-----<span>{{leve2}}</span></div>",mounted(){console.log(this.leve1)}});new Vue({el: "#app",data: {// leve1:1// leve1:true// 這個prop 用來傳遞 一個初始值，那這個子組件接下來希望將其作為本地的prop數據// 來使用這種情況下最后定義一個本地的data屬性將這個prop 用作初始值leve1:{name:'首頁'}},methods: {}});</script> 復制代碼生命周期 鉤子函數 講解 重點 *****
生命周期 -----從生到死 生命周期 鉤子函數
beforeCreate 剛剛創建實例 created init 注入 調用往下走 設置 el繼續走 設置 template 模板然后在設置與沒有設置el 與 模板 中 做出選擇beforeMount 沒有掛載 時候可以進行干預mounted 編譯好的模板替換到 el 掛載頁面上頁面加載完畢beforeUpdate 數據更新一變化 執行函數更新 updated 更新完畢渲染beforeDestroy 開始銷毀 監聽器 事件 destroy 銷毀完成 復制代碼使用$mount
使用render 傳遞 組件傳值
鉤子函數運行原理與機制
<body><div id="app"><input ref="txt" type="text" v-model="something" /></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="./node_modules/axios/dist/axios.js"></script><script>var vm = new Vue({el: "#app",data: {msg: "hello VUe",something: ""},// 鉤子函數 beforecreate 在頁面創建好就執行了beforeCreate() {console.log("beforeCreate", this.msg);},// 可以獲取到data 或者methods 中的成員created() {console.log("created", this.msg);},// 當vue 實例 的el 節點或組件掛載到頁面以前運行此函數beforeMount() {console.log("beforeMount", this.$refs.txt);},// 當vue 實例el 節點或組件掛載到頁面以后運行此函數mounted() {console.log("mounted", this.$refs.txt);},// 當vue 實例數據 發生改變時觸發此函數beforeUpdate() {console.log("moubeforeUpdatented");},// 當vue 實例數據 發生改變后觸發此函數updated() {console.log("updated");},// vue 實例銷毀之前觸發beforeDestroy() {console.log("beforeDestroy");},// vue 實例銷毀destroyed() {console.log("destroyed");}});</script></body> 復制代碼前端路由 單頁應用
單頁應用，是在一個頁面完成所有的業務功能，瀏覽器一開始會加重必須的HTML css 和 javaSCRIPT 之后操作這張頁面完成 一切都是 js 來控制
優點：操作體驗流程完全的前端組件化 缺點：首次加載大量資源對搜索引擎不友好開發難度相對較高 復制代碼單頁應用實現的原理 前端路由 DEMO
hash 路由 謹記：前端路由是通過錨點來識別的 復制代碼 <body><div id="app"><ul><li><a href="#/users">用戶管理</a></li><li><a href="#/rights">權限管理</a></li><li><a href="#/roles">角色管理</a></li></ul></div><div id="container"></div><script>// 當錨點發生變化window.onhashchange = function() {// 獲取錨點var hash = location.hash;hash = hash.replace("#", "");// 把錨點當成路徑來判斷var container = document.getElementById("container");switch (hash) {case "/users":container.innerHTML = "這里是用戶管理";<!--這里記得使用break 啊不然有穿透效果的 -->break;case "/rights":container.innerHTML = "這里是權限管理";break;case "/roles":container.innerHTML = "這里是角色管理";break;}};</script></body> 復制代碼router-view
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title></head><body><div id="app"><ul><li><a href="#/users">用戶管理</a></li><li><a href="#/rights">權限管理</a></li><li><a href="#/roles">角色管理</a></li></ul><!-- 給路由匹配到的組件占位 --><router-view></router-view> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <!-- 上面是 vue-router 全局引用 --> <script src="./node_modules/axios/dist/axios.js"></script> <script>/*vue-router 會全局 范圍內使用vue 自動調用vue.use注冊 vue-router 插件1、創建路由組件2、創建路由對象（設置路由規則） router 路由規則 里面包含 route 路由規則3、創建vue 實例配置路由對象*/var users = {template: "<div>用戶管理的額組件</div>"};var rights = {template: "<div>創建路由權限</div>"};var roles = {template: "<div>創建路由角色</div>"};var router = new VueRouter({// 設置路由規則routes: [<!-- 這里使用 redirect 進行重定向 -->{path:'/',redirect:'/users'}{ path: "/users", component: users },{ path: "/rights", component: rights },{ path: "roles", component: roles }]});var vm = new Vue({el: "#app",router});</script></body> </html><!-- vue- router 是官方的路由管理器，讓構建單頁應用易如反掌官網說的下載 router npm install vue-router然后需要導入 在模塊化工程中使用它import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VUERouter)--> 復制代碼轉載于:https://juejin.im/post/5c9f7469e51d451bb931da49
總結
以上是生活随笔為你收集整理的Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于 ? extends T 和 ? s
- 下一篇： Vue+高德地图API的使用(电子围栏)