1、目录1. vue基础21.1生命周期21.1.1 beforeCreate31.1.2 Created31.1.3 beforeMount31.1.4 Mounted41.1.5 beforeUpdate41.1.6 Updated41.1.7 beforeDestory41.1.8 Destoryed41.2模板语法51.2.1插值51.2.2指令51.2.3缩写81.3计算属性和侦听器81.3.1计算属性变量在computed里面定义，监听属性在data中定义81.3.2计算属性的用法91.3.3侦听器的用法91.4组件component91.4.1组件的定义91.4.2 全局组件101.4.2局部组件101.4.3父子组件传值111.4.4插槽121.5路由vue-router131.5.1路由安装131.5.2 vue的三种跳转方式141.5.3 vue路由传参几种方式141.5.4 vue路由两种模式151.5.5 路由嵌套161.5.6 路由懒加载及组件懒加载171.5.7路由重定向181.5.8路由的钩子函数191.6状态管理器vuex221.6.1 vuex安装221.
2、6.2核心概念231.6.3 使用下面两种方法存储数据231.6.4 组件内取值方法231. vue基础1.1生命周期1.1.1 beforeCreate从打印结果看，实例创建前，数据没有加载出来，无法访问，打印出来的都是undefined1.1.2 Created在实例创建完成后，数据已完成了初始化，可以被访问到，也能获得到methods方法；这个过程可以修改数据，这也是渲染之前修改数据的机会1.1.3 beforeMount已经在内存中编译完成，挂在之前被调用，render函数也是首次被调用，此时完成了虚拟DOM的构建，但并未渲染，这也是最后一次修改数据的机会1.1.4 Mounted这个过程模板挂载之后调用，完成渲染，所以我们可以操作DOM1.1.5 beforeUpdate当数据发生改变之后，此时实例中的数据是最新的，而页面中的数据是旧的，没有发生改变1.1.6 Updated更新后被调用，已完成渲染，页面更新，此时实例中的数据跟页面的数据是同步的1.1.7 beforeDestoryVue实例销毁之前被调用，这个过程可以做一些事情，比如清除定时器，事件等等1.1.8 Dest
3、oryedVue实例销毁后调用，并且vue中所有东西都解绑，所有的事件，监听事件都被移除，所有的子实例也被销毁1.2模板语法1.2.1插值1. 数据绑定最常见的形式就是使用“mustache”语法（大括号）文本插值： msg 2. 原始的HTML输出需要用v-html输出HTML渲染普通文本3. AttributeMustache不能作用在HTML attribute上，遇到这种情况要用v-bind指令4. 大括号可以使用三目运算符,计算 number + 1 a = 1 ? true : false 1.2.2指令1. v-once:执行一次性插值，当数据改变时，插值数据不会改变2. V-text:普通文本3. V-if:真假条件判断4. V-else-if:多个条件判断5. V-else:放在v-if或者v-else-if最后面6. v-show:也是真假判断，v-if为false元素被销毁，v-else元素还在7. V-for:数组遍历渲染每一项：item下标：index8. V-bind:绑定一个或者多个特性，如：:class=” isActive : isActive , t
4、ext-align : hasErr ”9. V-model:双向数据绑定10. V-on:主要用来监听dom事件，以便执行一块代码，简写11. 参数：12.动态参数： 可以绑定多个事件例如：v-on:focus,click,blur,input等13.修饰符1）数字修饰符：2）去掉首尾空格修饰符：事件修饰符：3）由于事件冒泡机制，我们给元素绑定点击事件，也会触发父级点击事件 4）.prevent用于阻止默认行为，在超链接中点击事件中使用该属性，超链接不会跳转，而只执行函数对应的内容百度一下5） 事件冒泡由内到外，加了.capture以后，反过来了，事件由外到内触发（顺序1，2，4，3）6） self修饰符，只有点击自身才会触发按钮7） native经常会用到很多小组件，有些小组件会触发一些事件，但是点击不会触发事件，就要用到native8） 鼠标按钮修饰符：left,right,middle 鼠标点击事件 1.2.3缩写V-bind缩写：V-on缩写：1.3计算属性和侦听器1.3.1计算属性变量在computed里面定义，监听属性在data中定义Watch：监测的是属性值，只要属性值
5、发生变化，其都会触发回调函数执行一系列操作Computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算计算属性不能执行异步任务，计算属性必须同步执行1.3.2计算属性的用法Computed:reserveText( )return 123; 1.3.3侦听器的用法watch:cityName:handler( newName,oldName)Console.log(newName),Immediate:true, /立即执行deep:true /如果属性较多时使用深度监听1.4组件component1.4.1组件的定义组件时vuejs强大的功能之一。组件可扩展HTML元素，封装可重用的代码1.4.2 全局组件 定义一个组件，然后再main.js引入，以标签的方式在组件中引用1.4.2局部组件 定义一个组件，在组件内import局部引用。1.4.3父子组件传值父往子传值：props:/数字类型propA:Number,/多个可能的类型propB:String,Number,/必填的字符串propC:Type:String,Require:true
6、,/带有默认的数字propD:Type:Number,Default:100,/数组写法propE:Type:Array,Default:function()Return 张三;,/带有默认值对象propF:Type:Object,Dafault:function()Return “message”:hello子往父传值：emit1.4.4插槽1. 插槽的定义：插槽就是子组件提供给父组件的占位符，用表示，父组件可以在这个占位符插入任何模板代码，如HTML，组件等，填充的内容会替换子组件的标签。2. 插槽的分类：匿名插槽、具名插槽、作用域插槽1） 匿名插槽（默认插槽）：可以叫单个插槽或者默认插槽2） 具名插槽：插槽有个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽3） 作用域插槽：就是传递参数的插槽。子组件的一些数据想在父组件中使用，必须通过规定的方法传递。1.5路由vue-router1.5.1路由安装1. 安装Npm install vue-router -save2.使用在main.js下引入，import router from vue-router在实例化的vue对象中使用router,New Vue(router)1.5.2 vue的三种跳转方式 百度一下this.$router.push(/vText)this.$router.replace(/vText)注：路由跳转push和replace的区别：Push:跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面Replace:同样会跳转到指定的url，不会向history添加一条记录，点击返回会跳转到上上一个页面1.5.3 vue路由传参几种方式1. 在定义path路由路径时，定义参数名和格式Path:/one/log/:num/:
《Vue基础知识大全》由会员昶分享，可在线阅读，更多相关《Vue基础知识大全》请在金锄头文库上搜索。
