Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处
生活随笔
收集整理的這篇文章主要介紹了
Vue纯零基础教学第三天--到走入Vue项目实际开发的内心深处
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
讓我們手摸著手大步向前走 ,最近看完 曾國藩傳，覺得很不錯，還有杜月笙與孟小冬 ，推薦大家在寫代碼的時候，要多讀書，好增加自己的文藝氣息。多些對書的感悟，放心游戲，多出去走走，今天的北京 真冷 3月30日記。
偵聽器實現(xiàn)模糊搜索
// 偵聽器，實現(xiàn)搜索功能異步操作watch: {// es6方法中的簡寫在寫一次以后就不寫了// 在search 里面 能用 nweValue 進行檢索數(shù)據(jù)// 模糊查詢 所有的接口通過json--server 給我們提供的接口search(newValue, oldValue) {axios.get("http://localhost:3000/brands?name_like=${newValue}").then(response => {this.items = response.data;}).catch(err => {});}}, 復制代碼VUE的核心 組件 和 路由 生命周期
組件
組件就是頁面上功能完備的區(qū)域。 結構，樣式 ，js，組件允許我們使用小型，獨立和通?？煞玫慕M件構建大型應用，仔細想任何的應用界面都可以抽象為一個組件數(shù)目組件是可以復用的vue 實例，且?guī)в幸粋€名字模塊：側重于功能或者數(shù)據(jù)的封裝組件：包含了template style 和 script組件有自己的作用域template 每個組件模板有且只有一個根元素組件中的data 要求 必須是一個函數(shù)且需要返回一個對象 復制代碼組件的分類和使用
分類：全局注冊和局部注冊使用步驟：1、注冊組件，2通過名字使用組件 復制代碼局部組件
<script>// 這里不能訪問 組件中的data // 組件也不能訪問new Vue 里面的成員new Vue({el: "#app",// 局部組件components: {// 組件有自己的作用域com: {// 組件就是一個vue 的實例// 組件的模板中應該只有一個根元素template: "<div><span>首頁 {{msg}} </span></div>",data(){// 組件中的data 必須的一個函數(shù),因為要讓不同的實例管理自己 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 父組件給 子組件傳值 與傳遞不同數(shù)據(jù)
<script>Vue.component("com", {// props 道具 里面是傳的是數(shù)組// 接收父組件傳過來的值 把外部的值傳給組件內部,這幾記住穿過來的就是字符串props: ["leve1", "leve2"],// 這里要綁定變量 所以 我們要綁定// prop 傳遞數(shù)字，布爾值，數(shù)組對象，單向數(shù)據(jù)流所有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數(shù)據(jù)// 來使用這種情況下最后定義一個本地的data屬性將這個prop 用作初始值leve1:{name:'首頁'}},methods: {}});</script> 復制代碼生命周期 鉤子函數(shù) 講解 重點 *****
生命周期 -----從生到死 生命周期 鉤子函數(shù)
beforeCreate 剛剛創(chuàng)建實例 created init 注入 調用往下走 設置 el繼續(xù)走 設置 template 模板然后在設置與沒有設置el 與 模板 中 做出選擇beforeMount 沒有掛載 時候可以進行干預mounted 編譯好的模板替換到 el 掛載頁面上頁面加載完畢beforeUpdate 數(shù)據(jù)更新一變化 執(zhí)行函數(shù)更新 updated 更新完畢渲染beforeDestroy 開始銷毀 監(jiān)聽器 事件 destroy 銷毀完成 復制代碼使用$mount
使用render 傳遞 組件傳值
鉤子函數(shù)運行原理與機制
<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: ""},// 鉤子函數(shù) beforecreate 在頁面創(chuàng)建好就執(zhí)行了beforeCreate() {console.log("beforeCreate", this.msg);},// 可以獲取到data 或者methods 中的成員created() {console.log("created", this.msg);},// 當vue 實例 的el 節(jié)點或組件掛載到頁面以前運行此函數(shù)beforeMount() {console.log("beforeMount", this.$refs.txt);},// 當vue 實例el 節(jié)點或組件掛載到頁面以后運行此函數(shù)mounted() {console.log("mounted", this.$refs.txt);},// 當vue 實例數(shù)據(jù) 發(fā)生改變時觸發(fā)此函數(shù)beforeUpdate() {console.log("moubeforeUpdatented");},// 當vue 實例數(shù)據(jù) 發(fā)生改變后觸發(fā)此函數(shù)updated() {console.log("updated");},// vue 實例銷毀之前觸發(fā)beforeDestroy() {console.log("beforeDestroy");},// vue 實例銷毀destroyed() {console.log("destroyed");}});</script></body> 復制代碼前端路由 單頁應用
單頁應用，是在一個頁面完成所有的業(yè)務功能，瀏覽器一開始會加重必須的HTML css 和 javaSCRIPT 之后操作這張頁面完成 一切都是 js 來控制
優(yōu)點：操作體驗流程完全的前端組件化 缺點：首次加載大量資源對搜索引擎不友好開發(fā)難度相對較高 復制代碼單頁應用實現(xiàn)的原理 前端路由 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>// 當錨點發(fā)生變化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、創(chuàng)建路由組件2、創(chuàng)建路由對象（設置路由規(guī)則） router 路由規(guī)則 里面包含 route 路由規(guī)則3、創(chuàng)建vue 實例配置路由對象*/var users = {template: "<div>用戶管理的額組件</div>"};var rights = {template: "<div>創(chuàng)建路由權限</div>"};var roles = {template: "<div>創(chuàng)建路由角色</div>"};var router = new VueRouter({// 設置路由規(guī)則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 是官方的路由管理器，讓構建單頁應用易如反掌官網(wǎng)說的下載 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的使用(电子围栏)