vue學習1

1.<div id="app">{{message}}<input v-model="message"></div>
new Vue({el:'#app'},data:{message:'Hello World'},component:{組件名})
2.{{*message}}/{{message.split('').reverse().join('')}} 字符串反轉
3.npm install dva-cli -g/dva new dva-quickstart
npm install --global vue-cli/vue init webpack my-project
4.<span v-bind:title="message">綁定標籤屬性 屬性綁定 縮寫:class
<p v-if="seen">如今你看到我了</p> if(true)
5.<li v-for="todo in todos">{{ todo.text }}</li>
6.<button v-on:click="reverseMessage">逆轉消息</button>
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
watch:{
//監聽數據變化相似回調
'a':function(val,odVal){

}
}
7.{{}}|v-text|v-html
8.v-if 不渲染此dom v-show css displaynone
9事件綁定 v-on:click="dothis"|@click="dothis"
10.es6寫法:import App from './App'== var App=require('./App')
export default {}== modules.export{}
11.app.vue <header msg='123'></header> header.vue props:['msg']
vue規定駝峯組建轉化 HelloWorld==><hello-world></hello-world>
12.事件觸發器 $on()監聽事件、$emit()在它上面觸發時間（事件名,參數）直接在組件<a v-on:xx=""></a>、$dispatch()派發事件在父組件添加events:{字符串：function:(){}},事件沿着父鏈冒泡、$broadcast()廣播事件、事件向下傳導給全部的後代
13.<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> retina高清屏
ppi 1英寸像素的個數
@media screen and(max-width-width:1024px){}
screen屏幕 print打印機 handled手持設備 all通用
14.1像素邊框:1px(邏輯像素)=2dp(物理像素) scaleY(.5)
15.相對單位rem
爲了適應各大屏幕的手機,px略顯固定,不能根據尺寸的大小而改變,試用相對單位更能體驗頁面兼容性。
em:根據父節點的font-size爲相對單位
rem：根據html的font-size爲相對單位
em在多層嵌套下，變得很是難以維護
rem更加能做爲全局統一設置的度量
16.不定寬高的水平垂直居中
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
flex版父元素設置:justify-content:center;align-items:center;display:-webkit-flex;
17.響應式設計
1.百分比佈局根據設備不一樣採用不一樣的css
2.彈性圖片
3.從新佈局,顯示與隱藏 新的佈局常常須要切換位置元素使用絕對定位,減小重繪提升渲染性能。同比例縮減元素尺寸，調整頁面結構佈局，隱藏冗餘的元素。
利:減小重複開發 弊：性能不是最優
18.var is_weixin = (function() { //判斷微信UA
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
})();
19.像素基礎：dpr爲設備像素縮放比，在dpr>=2時候爲retina屏幕，1px=（dpr）^2*dp。1px=2dp寬度上
20.交互優化:點擊事件的300ms延遲，移動設備上使用觸摸事件tab來代替click事件判斷手勢行爲。
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev
ionic start MyIonic2Project tutorial --v2
dva new quickstart
windows： npm install -g angular-cli/ng new project_name
核心:數據驅動和組件化 借鑑了angular的指令和react的組件化 20多K angular 56k react 46k適合移動端的開發
mvvm model(js對象) viewmodel view(dom) 數據的雙向綁定 手動觸發dom dom listener/directive
數據響應原理:數據改變驅動視圖自動更新
組件化:擴展html元素，封裝可複用的代碼
頁面設計規則:頁面上每一個獨立的可視、可交互區域是視爲一個組件
修飾符是以半角句號.指明的特殊後綴，用於指出一個指定應該以特殊方式綁定。.prevent修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()：
// 自動補全的擴展名webpack配置
extensions: ['.js', '.vue', '.json'],