随笔分类 - Vue
摘要：1、图书列表 实现静态列表效果 基于数据实现模板效果 处理每行的操作按钮 静态列表的效果： html结构： 1 <div id="app"> 2 <div class="grid"> 3 <table> 4 <thead> 5 <tr> 6 <th> 编号</th> 7 <th>名称</th> 8
阅读全文
摘要：需求： 表单输入框中输入用户名，失去焦点时验证用户名是否存在，如果已经存在，提示重新输入，如果不存在提示用户名可以使用。 实现分析： 通过v-model实现数据的绑定 需要提供提示信息 需要侦听器监听输入信息的变化 需要修改触发事件 实现验证用户名是否可用的效果： 实现代码： 1 <!DOCTYPE
阅读全文
摘要：官网地址：https://cn.vuejs.org/v2/guide/plugins.html 使用指令创建项目： 运行项目，看项目能否正常运行： 运行结果说明项目能正常运行： 在官网中有这样的部分： 在生成的项目中新建该目录： myButton.vue myButton.js main.js Ab
阅读全文
摘要：使用2.x来进行创建项目： 安装vue-router的依赖： 运行项目：npm run dev 生成的项目目录： 步骤： 1、创建组件 2、配置路由 3、创建路由对象 4、注入 新建几个： 创建组件： Home.vue Foods.vue 配置路由： routers.js 创建路由对象： 注入： A
阅读全文
摘要：输入指令开启项目管理的页面 指令：vue ui 在浏览器中打开的页面； 可进行在里面创建项目或者导入项目： 也可以进行项目的配置： 在创建项目的过程可以在命令行控制台中看到 不能将命令行的控制台关闭，要不然会发生连接中断 项目创建好的页面： 可以进行插件的安装，以及项目需要的配置 可以在任务中实现项
阅读全文
摘要：快速原型开发 在上一篇博文中安装vue-cli 2.x版本 如果安装了vue-cli 2.x或1.x版本，需要先卸载，再安装 @vue/cli 3.x版本； 卸载老版本：npm uninstall vue-cli -g 安装新版本：cnpm install @vue/cli -g 快速原型开发： 需
阅读全文
摘要：Vue-CLI 2.x脚手架工具基于webpack simple模板构建项目 vue-cli是一个基于vue.js进行快速开发的完整系统。基于webpack构建，并进行默认配置，可通过插件扩展，可升级； vue-cli帮我们创建基本项目结构，跳过繁琐的项目配置环节，将精力集中在业务上； vue-cl
阅读全文
摘要：定义数据 根据上一篇博文配置项目的结构的基础上继续进行优化； 在app.vue中的导出模块/组件部分设置其属性： 在一个template标签中进行调用： 实现上述定义数据的总代码，只修改了app.vue 1 <template> 2 <div> 3 4 <h2> 欢迎来到perfect*的博客园！！
阅读全文
摘要：单文件组件介绍 vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件； vue文件结构 由于.vue封装了html、js、css的代码，所以它由以下几部分组成； <template> html </templat
阅读全文
摘要：路由可以结合过渡效果使用； 使用<transition></transition>将<router-view></router-view>包裹住，再写样式即可。 在下面的实例中用到了第三方的动画库animate来进行过渡 animate官网：https://daneden.github.io/ani
阅读全文
摘要：在上一篇的博文中，实现的跳转是在页面中进行实现的 利用vue-router实例方法，使用js对路由进行动态跳转； 1、router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录； 2、router.replace：参数为路由对象，跳转到指定路由，跳转后不产生历史记录； 由效果图可以
阅读全文
摘要：在上一章博文中使用路由对象$route获取参数时，组件和路由对象耦合，在这篇博文中就可以使用props来进行解耦； 1、在组件中使用props选项定义数据，接收参数； 2、在路由中，使用props选项来进行设置，路由中的props有三种模式： a、布尔模式：props设置为true,可接收param
阅读全文
摘要：使用路由对象$route获取参数： 1、params： 参数获取：使用$route.params获取参数； 参数传递： URL传参：例 <route-linke to : "/foods/bjc/北京烤鸭/68"> 注：在对应路由path上使用 /:+属性名称接收参数 实例： 需要在子组件的路由中定
阅读全文
摘要：vue-router路由常用配置 1、mode：配置路由模式，默认为hash，由于URL很丑，可以修改为history，但是需要服务端的支持； 以上一篇的博文为实例： 初始时url的显示： 使用mode之后的显示： 使用mode的代码： 但是当复制该链接在新的窗口打开的时候，不能打开该链接，如图：
阅读全文
摘要：vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用； 单页应用（SPA）只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容；简单来说，根据不同的url与数据，将他们都显示在同一个页面中，就可称为单页应用；而控制页面跳转需要用路由。 vue-router下载：
阅读全文
摘要：slot详细介绍网址：https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容，例如： <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢？ Vue提供了一个极为方便的内置组件<slot
阅读全文
摘要：Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信； 我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的； 实例： 初始加载界面： 初始界面代码： 使用监听事件后： 添加的监听事件的代码： 调用事件部分： 最终代码： 1
阅读全文
摘要：单向数据流：父组件值的更新，会影响到子组件，反之则不行； 修改子组件的值： 局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据； 如果对数据进行简单的操作，可以使用计算属性； 由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错 此时
阅读全文
摘要：子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值； 使用步骤： 定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件； 准备获取数据：父组件com-a要获取子组件data中的height属性； 在子组件com-b中，需要用$.emit()方法
阅读全文
摘要：父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信； 使用步骤： 定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件； 准备获取数据：com-b要获取父组件data中的name属性； 在<com-b :name=“name”></com-b> 使用v-bind
阅读全文
