m0_71088505的博客

Article.vue中请求获取数据。main.js中定义。App.vue中引用。

2、跳转路由并且携带query参数，to的字符串写法。3、跳转路由并且携带query参数，to的对象写法。1、不携带参数的跳转。中使用children嵌套子路由。

路由：1.理解：一个路由(route)就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理。2.前端路由：key是路径，value是组件。1、先安装vue-router路由2.中应用插件3.创建路由router文件夹router.

中传过来的数据，scope这里面的名子自己定义，取games数据时候用自己定义的scope中的名字来取xxx.games，如中定义了其他数据，也可以xxx.msg，这样取定义的其他数据。: 在app.vue中使用MyCategory，里面包裹的结构是不显示的，要想在页面中显示，就需要用到插槽。: 可以用多个插槽，插入在不同位置，需要在子组件中定义

【代码】Vue配置代理(解决跨域请求）

主要是引入了import 'animate.css'样式库，然后再li标签外套了transition标签，引用了name里面的名称是animate.css拿过来的，绑定了enter-active-class和leave-active-classanimate库内自带的绑定样式。

先导入import 'animate.css'，多条数据transition-group，name用的animate.css库中的name，进出离开效果自动触发，enter-active-class和leave-avtive-class绑定的效果。元素外面包一层transition，展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果，appear上来默认展示动画效果。: 安装第三方样式库。

beforeDestroy钩子中添加。methods:中加一个方法。mounted钩子中添加。

【代码】Vue消息订阅与发布。

删除props接收的checkTodo，deleteTodo，删除给MyItem绑定的：checkTodo :deleteTodo。删除之前给Mylist绑定的：checkTodo :deleteTodo。: 删除props接收的checkTodo，deleteTodo。

通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on），通过父组件给子组件传递函数类型的props实现：子给父传递参数。

数据存储再localStroage中，刷新浏览器保存的数据仍在。

localStorage和sessionStorage

【代码】Vue中TodoList案例_总结。

与上一篇有俩个文件变化了：定义了一个方法checkAllTodo，实现全选和取消全选，并将方法传给儿子组件MyFooter：使用props接收checkAllTodo方法，并且定义一个change改变事件，触发checkAll方法将参数通过checkAllTo传给App.vue，这里的(e.target.checked)值为true或false效果。

用props接收todos参数，全部{{todo.lengh}}获取长度，已完成利用reduce函数统计完成个数（原理，pre初始值0，循环加todo.done满足条件+1）：向儿子组件MyFooter传递参数todos。

定义点击事件调用handleDelete()方法，将id传给deleteTodo删除方法进行删除。：添加了一个deleteTodo根据id删除方法，传递给儿子组件MyList。：通过props接收deleteTodo函数，并将其传给儿子组件MyItem。

与上一篇有三个文件变化了：中加了checkTodo方法：中拿到checkTodo，再传给MyItem定义change改变时候触发方法将id传给App.vue效果。

【代码】Vue中TodoList案例_添加。

【代码】Vue中TodoList案例_初始化列表。

【代码】Vue中TodoList案例_静态。

效果：冲突由于App.vue会将其样式汇总到一起，import先引入Student再引入的School，所以School中的背景颜色会将Student中的背景颜色覆盖掉。加了一个特殊的标签属性随机生成的，再配合标签属性选择器就可以控制指定的div。作用：让样式在局部生效，防止冲突。中的背景颜色设置的aqua艳蓝色。

【代码】Vue中的插件使用。

效果： 生命周期挂载流程图解： 生命周期更新流程图解： 生命周期销毁流程图解： 各个生命周期： 各个生命周期（包含销毁）：

【代码】Vue中mixin混入。

如果想改props传过来的值应该怎样做？不能直接修改props的值。

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)1.被用来给元素或子组件注册引用信息（id的替代者）

里面引用的vue只到文件夹，vue文件夹下的哪个js就由这里的moudle来指定的了，这里可以看到指定了一个阉割版的vue。报错：原因是引用了一个运行时版本的vue，也就是阉割版（默认）的vue，残缺了模板解析器。：把原本的rander函数注释掉，换成我们之前会的template模板样式。：h1是html的内置元素，整个元素里需写具体的内容，所有需要传第二参数。把需要编译的模板函数交给rander函数。：用的App组件，都在App组件了配置的。使用编译器包含在里面的版本的vue。

放静态资源，例如logo图，png，视频等，方便大家使用。: 程序员开发出来的所有组件往这里放，唯独App.vue不放在里面。: 是整个应用的界面。

第二步：cmd中切换到要创建项目的目录(我放在桌面cd desktop），然后使用命令创建项目；了解：balel=>写vue代码要写到ES6相关的js，最终要转成ES5，就要用到babel。进入选项，Vue版本用的几就选几，我这里用的Vue2就选择的第一个。eslint=>做语法检查的，检查js写的是否合理。第一步(仅第一次执行）: 全局安装@vue/cli。直接访问Local的地址即可，Network是给同局域网的其他人用的。目前脚手架最新版本是v5.0.8。

原因：.vue文件浏览器不能直接运行；import语句浏览器不认识；

VueComponent构造函数和重要内置对象

【代码】Vue组件的嵌套。

【代码】Vue组件的基本使用。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。1.v-once所在节点在初次动态渲染后，就视为静态内容了。1.跳过其所在节点的编译过程。与事件修饰符按钮的不要搞混了。可以解决网速慢时页面展示出。

cookie安全

若：，则v-model收集的是value值，用户输入的就是value值。若：，则v-model收集的是value值，且要给标签配置value值。

定义一串数组arr，使用sort排序，会收到前后两个数据项设置两个参数a，b。

效果：存在问题，返回值时候，一遍遍赋值，值越来越少，最后检索不到。 效果：