1.vue的開始
var vm = new Vue({ el: "#app", // el: 用來掛載 Vue 實例的元素 data: {}, // data: 要綁定的資料 props: {}, // props: 用來接收外部資料的屬性 methods: {}, // methods: 用來定義在 Vue 實例內使用的函數(方法) watch: {}, // watch: 用來觀察 Vue 實例內資料的變動 computed: {}, // compoted: 自動為內部資料計算過的屬性 template: "...", // template: 提供 Vue 實例編譯后的樣板 components: {} // components: 用來定義子元件 });2.組件注冊
組件注冊分為兩種:局部注冊 和 全局注冊
2.1 組件局部注冊2.2 組件全局注冊
2.3 復雜組件的打包?
// 子組件怎么做?怎么用? // 對于復雜的組件,可以將其用下面的方法打包 var app2 = new Vue({ el: ".app2", components: { CustomHeader: Vue.extend({ // extend 是構造一個組件的語法器. 你給它參數 他給你一個組件 template: "3.將網頁模板封裝成 Component 3.1 將 HTML 模板封裝在js中header" }), CustomMain: Vue.extend({ template: "" + "", components: { CustomBlock: Vue.extend({ template: "Main" + "" + " " + " " + " " + " " + " " + " " + " B" }) } }), CustomAside: Vue.extend({ template: "Aside" }) } });
var CustomMain = Vue.extend({ template: "3.2 將 HTML 模板封裝在HTML的Script標簽中" + "", components: { CustomBlock } });Main" + "" + " " + " " + " " + " " + "
3.3 render function ?
Vue的template模板 其實最后會被vue引擎編譯為 render function,最終渲染到網頁上
4.Vue元件生命周期4.2追蹤物件變化{{ count }}
Object.defineProperty() 的MDN文檔
資料變動檢測 5.props 從外部接受指定的資料// props 案例1
// props 案例25.1 Prop 接收參數驗證你的成績評價
組件可以為 props 指定驗證要求。如果未指定驗證要求,Vue 會發出警告。當組件給其他人使用時這很有用。
prop 是一個對象而不是字符串數組時,它包含驗證要求:
5.2 單向數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態,從而導致你的應用的數據流向難以理解。
額外的,每次父級組件發生更新時,子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了,Vue 會在瀏覽器的控制臺中發出警告。
單向數據流:
Parent: {{ message }}
Child:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98316.html
摘要:菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數,可以通過來返回函數值。它們都有前綴,以便與用戶定義的屬性區分開來。 開篇語 我最近學習了js,取得進步,現在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網站的vue.js教程http://...
摘要:有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂,之后會進行整理優化。 上次學習了vue-router的使用,讓我能夠在各個頁面間切換,將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。 注:本...
摘要:聲明式渲染的引入初步使用錯誤筆記中的忘記大寫,的忘了加引號以及忘了在末尾加逗號指令鼠標懸停幾秒鐘查看此處動態綁定的提示信息特性被稱為指令。指令帶有前綴,以表示它們是提供的特殊特性。 聲明式渲染 vue的引入 初步使用vue {{message}} var app=new Vue({ el: #app, data:{ me...
摘要:聲明式渲染的引入初步使用錯誤筆記中的忘記大寫,的忘了加引號以及忘了在末尾加逗號指令鼠標懸停幾秒鐘查看此處動態綁定的提示信息特性被稱為指令。指令帶有前綴,以表示它們是提供的特殊特性。 聲明式渲染 vue的引入 初步使用vue {{message}} var app=new Vue({ el: #app, data:{ me...
閱讀 4270·2021-09-26 10:11
閱讀 2666·2021-07-28 00:37
閱讀 3223·2019-08-29 15:29
閱讀 1178·2019-08-29 15:23
閱讀 3124·2019-08-26 18:37
閱讀 2468·2019-08-26 10:37
閱讀 597·2019-08-23 17:04
閱讀 2347·2019-08-23 13:44