4.5学vue

1.vue简介（vue是渐进是框架）

库 jquery
框架 vue拥有完整的解决方案，我们写好人家调用我们

vue全家捅 vuejs + vue-router +vuex+axios
通过组合形成
数据驱动 mvvm

2.安装vue
cdn方式 网址
npm安装

npm init
->产生一个pacakge.json的文件，表述项目依赖
npm install vue
安装vue

3.模块话使用方法

<script src="vue.js"></script>
<script>
    let vm=new vue({
        el:"#app",
        data:{
            msg:'holle'    //使用时用 {{msg}}
        }
        methods:{
            fn(){alert(1)}
        }
    })
</script>

4.html里面的vue代码段

{{msg}} //可以放表达式 赋值 取值 三元  a===a？1:0;

4.vue指令

dom行间属性在<>内写，所有指令都以v-开头
    v-text  等同{{}}，不美观;会插入到内容中
    v-html 把里面的字符当着html解析，一定是可以信任的
    v-show 操作样式
    v-if  操作dom
    v-else
    v-else-if
    v-for 会复用 <li v-for="(value,index) in arr">{{index }}{{value}}</li>
    v-on ===@ 绑定事件<div v-on:mousedown="fn">点我啊</div> 自动传 $event
    v-bind 绑定 简写 :
    v-model 数据双向绑定  如果给checkbox需要value
    v-pre
    v-cloak 解决块级的闪烁问题
    v-once 之邦定一次，数据变化页面不刷新

5.数据 绑定

数据劫持加 getter setter
1。初始化
let vm=new vue({
    el:"#app",
    data:{
        msg:'holle'    //使用时用 {{msg}}
        a={school:' '}      
    }
})
使用变量时先初始化，不然不会数据绑定
2.添加
vm.$set()//添加属性
3.重写
vm.a={}

6.数组

{{arr[1]}}
vm.arr[0]=100;//没有用
pop push shift unshift sort reserve splice 都可以

7.bootstrap

npm install vue axios bootstrap

8.vuetools 可以安装到chrome浏览器上的插件，方便调试

9.json的利用

后端数据放到json里面
前端使用json的数据生成页面
    专门用来发送axios库的方法
    <script axios.js></script>
    created(){//钩子函数，数据被初始化后调用 this指向
        axios.get('data.json').then(function(res){成功},function(res){失败})
    }

10回调函数

将后续的处理逻辑传到当前要做的事，事情做好了在调用此函数
promise 解决回调问题 三个状态 成功态 失败态 默认:等待态 //自带
let p=new Promise( (resolve,reject)=>{自己的函数} );
p.them((data)=>{成功函数},(data)=>{失败函数});

11.事件修饰符

修饰符 .number
按键修饰符 .enter.ctrl
事件 stopPropagation,cancelBubble=true

12.filters 过滤器

{{'123'}|my }
filters:{
    my(data,param1,param2){
    }
}

13.computed 计算属性

方法不会有缓存，computed 会根据依赖的属性缓存（归vue管理的数据可以响应式变化）
不支持异步
computed:{
    a(){//调用一样
    }
}

15watch

支持异步
watch:{
    a(newVal,oldVal){  //和观察者一样
    }
}

16template 标签

是vue给的，没有任何意义的用来包裹的标签
如果在Vue（{
    template:'<div>替换页面内容为本内容</div>'
}）

17动态绑定样式

4种方法，

18.实现单页开发的方式 路由

history 浏览器自带的功能 (history.pushState()) 上线时使用 
hash 通过hash记录跳转的 开发时使用 <a href="#/contests">

19箭头函数
20声明周期

new Vue({ //根实例，初始化会有很多方法（钩子方法），vue参考vue实例

})

21.mouted

<p refs="myp">{{msg}}</p>
mounted(){
    this.$nextTick()=>{ //等渲染dom完成后获取vue对象
    }
}

22组件化开发

把一个很复杂的页面分割成若干个独立的组件
页面级组件 一个页面是一个组件
基础组件 讲课复用的部分抽离出来

全局组件  写插件
局部组件 态

一个自定义标签， vue就会把他看作一个组件
1创建组件
2注册主键 components
3引用组件

组件的嵌套