spa框架：单页应用 （1个页面）组件：component 把一个复杂的页面拆分成若干个组件，最后再拼成一个完整的页面组件的分类：页面级组件（home组件 ,list组件）基础组件（页面组件包含着基础组件，可复用的组件）组件的使用：全局组件（不需要在组件中再次声明了）-写一些插件时可能会需要用到全局组件 局部组件（在某个组件中声明的）自己写的一些组件一般都是局部组件全局组件：Vue.component(tagName,options)局部组件：new Vue({el:'',components:{child:{template:'
'}}})1.组件的名字不能使用已经存在的标签2.一个组件就是一个对象3.名字规范 myHello会自动转化成myhello4.组件模板中必须只能仅仅有一个根节点 5.标签中的名字可以转化（知横线转驼峰->大写转小写）一律名字相同即可6.组件中的data必须是一个函数 7.组件中的数据可以在自己的模板中使用template:'
' //用模板中的内容替换掉标签(el)局部组件 定义在内部的，组件之间应该是互不影响的，所以data是个函数，返回一个新对象，来避免相互引用的问题对象是引用数据类型组件中函数的this指向的是当前组件的实例组件的使用顺序 1.引入这个组件 2.注册组件 3.在模板中使用（是在父组件模板中使用）template中的内容会被转化成虚拟dom,文档碎片，先获取第一个元素通过createElement创建一个元素，firstChild appendChild到这个dom元素里MVVM=数据劫持+compile+发布订阅组件的特点：相互独立，两个人之间没有任何关系子组件不能直接更改父组件的数据 ，可以子组件传递给父组件，父组件改变后再重新渲染子组件 单向数据流 父组件变化刷新子组件属性校验：校验父灯传递过来的属性props:['title'] 数组方式不能实现属性的校验props:{ title:{ type:[Number,Boolean,Array,Object,String],default:'无',validator(val){ val代表传递过来的值 ，如果返回true通过 ，返回false，不通过return val>50}}} 子组件的属性refref放在原生dom上可以获取元素，放在组件上可以获取当前组件eg:this.$refs.child.hit();子组件通过event给父组件传递信息第一种方法：子组件：this.$emit('child-fn','blue') 第一个参数是方法，第二个参数是传递给父级的this.$on('child-fn',changeColor) 这个this指的是child给子组件绑了一个监听函数，这个监听函数是父类的第二种方法：子组件：this.$emit('update:msg','blue');第三种方法：子组件：this.$emit('update:msg','blue');使用模板编译的方式：1.有el2.template3.render会将el和template的形式转化成AST(抽象语法树)会转化成一个函数render 会个vhode{tage:'div',children:['hello',{tab:'h1'}]}->createElement->append页面中let vm = new Vue({ el:'#app', render:createElement=>{ return createElement('div',{class:'a'},['hello',createElement('h1','你好')]) } /*template:`
hello
你好
`*/ })//父组件挂载完成并不能确保子组件一定渲染完成，所以在mounted中一般会加nextTick防止无法获取的最新的结果mouted(){this.$nextTick(()=>{})}slot:例如别人写好的一个模态框组件 我们来使用,我们会先引入进来,传入一些自己的内容,所以绑定的方法都是自己的父组件中：
{{msg}}
子组件中：×keeplive：保持缓存组件切换时用的东西加了keeplive created只会执行一次 activated都会执行不加keeplive created都会执行 activated不会执行router 路由 需要引用vue-router.js这个js安装npm init -ynpm install vue-router不同的url返回不同的结果vue的路由（spa）spa中只有一个首页，切换url地址显示不同的组件 切换路径但是页面仍然是以前的那个1.hash #2.pushState 没有#号(在开发的时候会产生404)，上线时会使用这个方式，可以依赖服务端解决404问题3.mode模式 默认就是hash 如果mode:'history' h5的api步骤：1.创建一个VuerRouter实例 let router = new VueRouter({ routes // 将路由表注入进来 });2.准备好需要切换的组件 let Home = {template:'
首页
'}; let List = {template:'
列表页
'};3.将路由实例放在vue实例中,在任意组件中会多两个属性let vm = new Vue({ el:'#app', router // this.$router this.$route });//路由表 let routes = [ {path:'/home',component:Home}, {path:'/list',component:List} ];router-view会将默认匹配到的结果插到此标签内router-linkto动态绑定时可以放对象 tag表示编译后的标签名let router = new VueRouter({ mode:'history', // h5 pushState没有# 但是会有404,开发时采用默认hash的形式 routes:[ {path:'',component:Home}, // 配置默认显示的组件 {path:'/home',component:Home}, {path:'/list',component:List}, // {path:'*',component:List} //如果这样写组件是切换了 但是路径还是写错的 {path:'*',redirect:'/list'} //重定向 一般是404配置 ] });路由的嵌套routes:[ {path:'/home',component:Home}, { path:'/profile', component:Profile, children:[ //children的path不能加/ {path:'aboutme',component:AboutMe}, {path:'introduce',component:Introduce}, ] } ]webpack用来打包vue- vue组件都写在写在一起了,.vue文件,每一个.vue文件都是一个组件 .js babel-loader .css css-loader.vue vue-loader组件组成1.模板（结构） 需要vue-template-compiler2.逻辑（行为）3.样式 webpack(模块化)webpack webpack-dev-serverjs打包 babel-core babel-loader babel-preset-es2015 babel-preset-stage-0css模块 less less-loader css-loader style-loaderimg模块 url-loader file-loaderhtml打包 html-webpack-pluginvue模块 vue-loader vue-template-compilervue vue-routervue-cli 脚手架npm install vue-cli -gvue init 模板名 项目名vue init webpack vue-pro-webpack
