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'],