全部HTML元素能夠看做盒子,在CSS中,"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容javascript
JavaScript是一種弱類型語言html
6種原始類型前端
*可使用typeof 判斷數據類型,數組以及null都屬於Object
*Object屬於引用類型,具備:constructor、hasOwnProperty、isPropertyOf、propertyIsEnumerable等方法。vue
對象的屬性html5
修改默認特性使用defineProperty(),訪問器屬性不能直接定義,只能調該用方法。java
對象的建立git
構造函數:正則表達式
function Person(name, age ,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ console.log(this.name); } } let person1 = new Person("name", 20, "job");
原型模式:數組
function Person(){ } Person.prototype.name = "name"; Person.prototype.age = 20; Person.prototype.job = "job"; Person.prototype.sayName = function(){ console.log(this.name); } let person1 = new Person();
JavaScript經常使用的字符串操做瀏覽器
JavaScript經常使用的數組操做
- concat - 合併數組 - push、pop - 分別爲添加、刪除元素,堆棧形式 - unshift、shift - 添加、刪除元素,隊列形式 - reverse - 反轉 - sort() - 排序, arr.sort(function(a,b){return a-b;} 輸入比較函數 - slice、splice - 刪除,參數爲起始位置和個數,slice不改變原素組,返回新數組,splice會改變原素組,返回被刪除的數組。 - substring、substr - 截取數組,相似於上面字符串中的這兩個方法。
爲了避免讓分塊的代碼污染全局,以及更好地使用別人的代碼因此產生了JavaScript模塊化的需求
可使用當即執行函數
var params = 'test'; var module = (function(params){ var mod = function(){ //... }; return {mod: mod}; })(params);
外部不能直接訪問模塊內部的變量,傳入外部變量後,在內部改變它的值也不影響全局。
特性
如下寫法涉及到了全部樣式以及類名的綁定方式,不詳細說明了
:style=「[item.a,item.b]」 :style="{width:item.value+'px'}" :style="{color: activeColor, fontSize: fontSize + 'px' }" :style="item.titlefont" :style="a<0? 'color:red':'color:black'" :style="item.choosetype==3?{width:ul_width+'px'}:''"
:class="{a:item.x==1}" :class="[b ,{a:item.x==1}]" :class="{a:item.x==1, b:item.x==2}" <div v-bind:class="[isActive ? activeClass : '', errorClass]">
遇到的問題以及學習到的知識點
<div class="member-card"> <!--header外邊距體如今外層div上--> <header>{{constellation}}</header> <footer> <div>{{memberGrade}}</div> <div>{{memberName}}</div> </footer> </div>
緣由:
解決方法
<div class="root"> <div class="father"> <div class="child"></div> </div> </div>
let root = document.getElementsByClassName('root')[0]; let father = document.getElementsByClassName('father')[0]; let child = document.getElementsByClassName('child')[0]; root.onclick = function () { console.log("root"); }; father.onclick = function () { console.log("father"); }; child.onclick = function () { console.log("child"); };
點擊最內層div時控制檯依次顯示:child、father、root。按照DOM層次結構像至低向上直到頂端,這就是事件冒泡。
實現彈窗,而後點擊空其餘任意地方隱藏彈窗
<!--html--> <div class="father"> <div class="child"></div> </div>
/*javascript*/ let father = document.getElementsByClassName('root')[0]; let child = document.getElementsByClassName('child')[0]; father.onclick = function () { console.log("father"); }; child.onclick = function (e) { let ev = e||window.event; ev.stopPropagation(); };
<!--vue--> <div class="father"> <div class="child" @click.stop=""></div> </div>
*模仿網易雲音樂播放器頁面
地址:https://gitee.com/zhangweiqin...
先了解:rem、em、px
由於rem大小隻和根元素字體大小有關因此只要根據設備設置不一樣的根元素大小,而後以相同的rem做單位獲得的實際大小是不一樣的,實現自適應。
document.documentElement.style.fontSize = document.documentElement/375*20 + 'px'; /* 這樣 若是在寬度爲375(iphone6/7/8)的環境下1rem = 20px. 也能夠選擇在寬度爲360(大部分1080p屏幕)的環境下開發則相應的除以360, 根據設計稿的寬度不一樣選擇方便計算的方式。 */
App.vue下目前只有主頁面以及歌單頁面,主界面下兩個子路由:個人音樂、發現,兩個組件:我的設置頁面、播放控制條。
{path: "/", redirect: "/index/myMusic"}, //重定向 {//主界面 path: '/index', name: 'index', component: index, children: [ {//個人音樂 path: '/index/myMusic', name: 'myMusic', component: myMusic }, {//發現 path: '/index/findMusic', name: 'findMusic', component: findMusic } ] }, {//歌單頁面 path: '/songList', name: 'songList', component: songList }
路由的使用以及傳參:(兩種方式)
{ path: 'helloWorld', name: helloWorld, component: ··· } this.$router.push({path: '/helloWorld',query: {msg: 'hello'}}); <router-link :to="{ name: 'helloWorld', query: { msg: 'hello!' }}"></router-link> this.$router.push({ name: 'helloWorld', params: { msg: 'hello'}}); <router-link :to="{ name: 'helloWorld', params: { msg: 'hello' }}"></router-link> console.log(this.$route.query); //{msg:hello},不一樣的是query傳遞參數會被附加到url地址上 console.log(this.$route.params); //{msg:hello}
1. import userSetting from '@/view/modules/userSetting.vue'; 2. const userSetting = resolve => require(['@/view/modules/userSetting.vue'],resolve); //懶加載
異步加載,優勢:最大化的實現隨用隨載,減小首頁加載延遲;缺點:可能會形成網頁顯示過慢且渲染良莠不齊的問題
//單文件組件 components: { userSetting },
父組件->子組件:
<!--發送--> <userSetting :data="'msg from father'"> </userSetting>
//接收 export default { name: "user-setting", props:['data'] }
子組件->父組件:
<!--發送--> <div class="set-item" @click="$emit('msgFromSon','msg from son')"> 高級設置 </div>
<!--接收--> <userSetting v-show="setting" @msgFromSon="recive"> </userSetting>
methods: { recive(msg) { console.log(msg); //msg from son } }
Vue.extend(): 使用基礎 Vue 構造器,建立一個「子類」。參數是一個包含組件選項的對象。
let alertOptions = { data:function(){ return { title: title, text: text, } }, methods:{ close() { resolve('ok'); dialogClose(vm); } }, template: '<alert @close="close" :title="this.title" :text="this.text"></alert>', components: {alert} } let creator = Vue.extend(alertOptions)
vm.$mount():手動地掛載一個未掛載的實例。
//掛在到#app下 new creator().$mount('#app') //在文檔以外渲染而且隨後掛載 vm = new creator().$mount() dialogContainer.appendChild(vm.$el)