vue | 易学教程

Vue ---day04

阅读更多关于 Vue ---day04

Vue Router 组件嵌套和路由嵌套是一一对应关系默认子路由： 1、父路由上不加 name 字段，加在子路由上；　　　　　　2、或者默认子路由上 path:""; 路由的精确匹配：　　<router-link to="/user" exact></router-linke> 修改路由默认类：　　linkActiveClass linkExactActiveClass 路由重定向，路由跳转　　redirect 路由别名　　路由的匹配规则依然是 path；　　别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构组件内守卫　　beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用,组件实例没有被创建（this不能用）　　beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用（foo/1 ---> foo/2, foo组件被复用，调用）　　beforeRouteLeave 导航离开该组件的对应路由时调用 404页面配置　　{path："*",component:404Component} 　　path匹配规则为星，任意的　　放在路由记录的末尾路由组件　　直接和路由绑定的组件称为路由组件　　路由组件才能访问路由对象： router route 　

Vue调试工具DevTools工具的安装

阅读更多关于 Vue调试工具DevTools工具的安装

1.DevTools是vue官方推荐的调试工具，下面介绍基于Google游览器的两种安装方式第一种：你的电脑可以访问外网的前提下，直接到vue的官网点击Devtools会跳转到github往下滑动找到如下图所示，安装Google插件选项点击你就会跳转到google的应用市场，如下点击右侧蓝色按钮安装即可，因为我的电脑安装过所以会显示从Chrom中删除第二种：你的电脑不能访问外网，你必须自己下载，然后添加的Google的扩展程序中，我这里有一个直接下载解压就可用的链接：https://pan.baidu.com/s/1pqH1u9uPJC3gsCkKt8hIpA 提取码：qjcc 下载后解压，然后点击游览器右上角的三个点，选择设置点击扩展程序，如下图选择加载已解压扩展程序然后找到刚才下载后解压的文件位置，一定要选到chrom这一级，如下图，确认即可安装成功后，右上角会出现vue的图标在开发vue的界面，F12会看到多一个插件来源： CSDN 作者： WYB_Phil 链接： https://blog.csdn.net/XiaoBo_S/article/details/104464096

vue报错之Duplicate keys detected: '0'. This may cause an update error.

阅读更多关于 vue报错之Duplicate keys detected: '0'. This may cause an update error.

今天搞动态添加表单浏览器一直出现百度一下发现原来是我在页面写了两个v-for循环，绑定了一样的key值 <div class="info" v-for="(item, index) in itemList" :key="index"></div> <div class="info" v-for="(item, index) in itemList" :key="index"></div> 可以修改其中一个的key值。 <div class="info" v-for="(item, index) in itemList" :key="'info-'+ index"></div> <div class="info1" v-for="(item, index) in itemList" :key="'info1-'+ index"></div> 本文案例为复制以下链接内容复制链接来源： CSDN 作者： PC_136 链接： https://blog.csdn.net/PC_136/article/details/104467026

VUE的双向绑定及局部组件的使用

阅读更多关于 VUE的双向绑定及局部组件的使用

vue的双向绑定,使用v-model,v-model只能使用在input textare select中 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <label for="username">用户名：</label> <input type="text" v-model="msg" id="username"> <p>{{ msg }}</p> <textarea placeholder="add multiple lines" v-model='msg'></textarea> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br>  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames

vue路由传参的几种基本方式

阅读更多关于 vue路由传参的几种基本方式

原文地址 this.$router.push跳转现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v-for="article in articles" @click="getDescribe(article.id)"> methods：方案一： getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) 方案一，需要对应路由配置如下： { path: '/describe/:id', name: 'Describe', component: Describe } 很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。 this.$route.params.id 方案二：父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。 this.$router.push({ name: 'Describe', params: { id: id } }) 对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。 { path: '/describe',

构建vue环境（node.js webpack vue-cli）

阅读更多关于构建vue环境（node.js webpack vue-cli）

1.安装node 首先下载前端IDE vscode (官方网站)=>https://code.visualstudio.com/ win +r 输入cmd ,像这样，对应出node版本号，安装成功 2.安装数据源，切换淘宝镜像下载 nodejs (官方网站)http://nodejs.cn，安装好nodejs后已经包含了npm ,由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue-cli 安装脚手架工具之前确保（node.和 npm 已经安装成功），验证如下如下在命令行里输入：npm install -g vue-cli 进行全局安装:安装完成后 vue -V(V大写)，如下安装成功 4创建项目在命令行里输入：vue init webpack 项目名称 npm run dev 运行OK 来源： CSDN 作者： huangxiuyu6229 链接： https://blog.csdn.net/huangxiuyu6229/article/details/104459192

Vue学习第六章-双向绑定操作

阅读更多关于 Vue学习第六章-双向绑定操作

双向绑定操作 1.v-model的基本使用双向绑定：在view跟model之间即有通过动态绑定数据将后端传递的数据转化成所看到的页面。又有通过DOM的事件监听将页面中的改动转化成后端的数据。简单来说就是修改了一方的值另一方的值也会相应修改。实现语法： v-model 无语法糖 <div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> <script src="..\vue.js"></script> <script> const app = new Vue({ el: '#app', data:{ message: 'hailo' } }) </script> </body> 你在输入框输入什么，message就会变成什么其实v-model的原理就是v-bind跟v-on的结合。不信你看我下面 <body> <div id="app"> <input type="text" :value="message" @input='inpurtext'> <h2>{{message}}</h2> </div> <script src="..\vue.js"></script> <script> const app = new Vue({ el: '#app', data:{

vue组件注册 Vue.extend Vue.component Vue.use的使用以及组件嵌套

阅读更多关于 vue组件注册 Vue.extend Vue.component Vue.use的使用以及组件嵌套

/** * vue.extend用法 * 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 * 注意：此实例可以挂载到根实例之外 */ const Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#opp') let navbar = { template: `<div class='nav'> <input type="text" placeholder="请输入关键字"/> </div>`, data:()=>{ return { } }, mounted() { console.log(this.$parent) } }; const MyPlugin = { install:(vue, arguments)=>{ console.log(arguments); vue.component('navbar', navbar); } } Vue

Vue总结篇之组件通信

阅读更多关于 Vue总结篇之组件通信

目录父子组件通信 props events（ e m i t 、 emit、 e m i t 、 on） ref、 p a r e n t 、 parent、 p a r e n t 、 children 非父子组件通信 $attrs & $listeners (祖孙通信) provide & inject (祖孙通信) 全局通信 eventBus(中央数据总线) Vuex 父子组件通信通过 props 向下传递，通过事件向上传递。 props （父子通信） e m i t 、 emit、 e m i t 、 on（子父通信） //子组件 <button @click="$emit('add',c)"></button> //父组件 <cart @add='cartAdd($event)'></cart> 注意：派送和监听事件都是同一个主体，即谁派送谁就监听 ref、 p a r e n t 、 parent、 p a r e n t 、 children 使用ref时需要注意 $refs 是作为渲染结果被创建的，所以在初始渲染的时候它还不存在，此时无法无法访问。 $refs 不是响应式的，只能拿到获取它的那一刻子组件实例的状态，所以要避免在模板和计算属性中使用它。非父子组件通信 $attrs & $listeners （适用于深层嵌套组件 3介）某些场景下

Vue中引入jQuery方法

阅读更多关于 Vue中引入jQuery方法

1、首先在package.json里的dependencies加入”jquery” : “^3.2.1”，例：（jquery后面的是版本，根据你自己需求更改） 2、在命令行里输入npm install jquery –save-dev 当然用淘宝镜像 cnpm 也是可以的；注意：jquery 一定要小写。 3、找到build文件夹下的webpack.base.conf.js文件，打开，添加： var webpack=require(‘webpack’); 例： 4、在module.exports里输入： plugins : [ new webpack . ProvidePlugin ( { $ : ”jquery” , jQuery : ”jquery” , “windows . jQuery” : ”jquery” } ) ] , 5、在main.js中引入,加入下面这行代码，全局引入 import $ from 'jquery' 来源： CSDN 作者： Murph_i 链接： https://blog.csdn.net/Murph_i/article/details/104450391

订阅 vue