![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
毛没齐
喜欢编程或者喜欢摄影的小伙伴可以关注我的公众号,搜索 敲呗 就可以看见了
展开
-
vue.js 按键修饰符
在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: //在输入框按下回车键时调用方法<input type="text" v-on:keyup.13="logname" value="name" > //在输入框按下Shift键时调用方法<input type="text" v-on:keyup.16="lo原创 2018-07-29 10:43:27 · 1118 阅读 · 2 评论 -
vue.js 初次路由显示设置
①设置 path 为 ‘/’const router= new VueRouter({ routes:[ {path:'/',name:'home',component:Home}, //页面第一显示的组件 {path:'/menu',name:'menu',component:Menu}, {path:'*',redirect:'/'...原创 2018-08-22 16:42:24 · 1247 阅读 · 0 评论 -
vue.js 导航守卫(全局)
什么是导航守卫?笼统的说,导航守卫是控制用户能够进入哪些路由和不能进入哪些路由的控制器,也就是管理路由的打比方,在你第一次进入csdn网站,想写博客时,你必须先登录,才能进入博客编写;登陆界面就好比你能进入的路由,而博客是你不能进入的路由,当你登陆后,控制器才会给你权限,才能进入博客路由,这就是导航守卫的用途全局路由 要在 main.js 文件下创建想用导航守卫先要有路由...原创 2018-08-23 11:57:44 · 2070 阅读 · 0 评论 -
vue.js 导航守卫(组件内的守卫)
组件内的守卫分为三种beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave① beforeRouteEnter进入组件之前 进入该组件之前被调用,组件实例还没有被创建,不能使用 this关键字不过,你可以通过传一个回调给 next来访问组件实例,也就是说可以通过 next 来回调实例化后的组件,用next...原创 2018-08-23 15:11:44 · 9696 阅读 · 0 评论 -
vue.js router-view 的复用
<router-view> 的 name 属性<router-view>设置了 name,则会渲染对应的路由配置中 components 下的相应组件//main.js //路由import Home from './components/Home'import Contact from './components/about/Contact'im...原创 2018-08-23 16:33:57 · 1603 阅读 · 0 评论 -
vue.js 路由之滚动行为
const router = new VueRouter({ routes: [...], scrollBehavior(to,from,savedPosition){ // return {x:100,y:100} //浏览器以页面的x:100,y:100的位置开始显示 // return{ selector : '.a' } ...原创 2018-08-23 16:42:15 · 401 阅读 · 0 评论 -
vue.js 跨域请求 fetch / axios
跨域请求配置假设我们的请求地址:http://localhost/Graduation_Thesis/a.php在vue项目下 找到 config > index.js 文件;修改 index.js 文件下的 proxyTable 对象的内容;如下 proxyTable: { '/api': { // '/api'相当于代...原创 2018-08-23 23:04:59 · 2448 阅读 · 0 评论 -
vue.js props属性传值与事件传值
利用 props 传值时,当 传递的种类不同时,效果也是不同的当传的是 引用 类型时,不管是在 父组件 中改变了这个值,还是在 子组件 中改变了这个值,父组件和子组件中的值,互相影响而传的是 传值 类型时 ,不管是在 父组件 中改变了这个值,还是在 子组件 中改变了这个值,父组件和子组件中的值都不会随之而改变,都不会互相影响父组件 传值给 子组件(props属性传值)...原创 2018-08-24 13:59:09 · 5874 阅读 · 0 评论 -
vue.js 调用 有道翻译API 实现翻译功能
在有道智云 注册用户信息并拿到有道翻译的应用ID和应用密钥(怎么注册,网站都有)调用API http地址:http://openapi.youdao.com/api?q=需要翻译的文本&appKey=应用ID&salt=随机数&from=源语言&to=目标语言&sign=标签//标签=md5(应用ID+需要翻译的文本+随机数+应用密钥)...原创 2018-08-25 23:11:20 · 4993 阅读 · 0 评论 -
Vue项目打包————遇到的问题
打包语句npm run build网页不显示解决方法:修改 config/index.js 下的 assetsPublicPath 为 './',网页图片不显示解决方法: 在 build/utils.js 添加 publicPath:'../wan../' 语句网页不显示,空白解决方法:删除 main.js 的...原创 2018-12-12 22:54:04 · 462 阅读 · 0 评论 -
vue之watch的数据监听使用
Vue提供了一个watch方法可以监听data内指定数据变化监听简单数据当value1或value2的内容发生变化时,就会分别调用value1()方法或value2()方法注意:watch里面的方法名与data内的值名一致data() { return { value1: 0, value2: 0 }},watch: ...原创 2018-12-19 22:13:26 · 1425 阅读 · 1 评论 -
vue.js socket.io的使用
安装依赖包npm install vue-socket.io --savemain.js文件配置import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({ debug: true, connection: 'http://localhost:3000', vuex: { }}...原创 2018-12-16 17:20:34 · 7195 阅读 · 4 评论 -
Vuex的使用
安装Vuex依赖包npm install vuex --save在vue脚手架中 src 文件下新建一个 Vuex文件夹,并在此文件夹下加入一个store.js文件store.js文件内容:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ ...原创 2018-12-17 14:48:48 · 181 阅读 · 0 评论 -
vue.js 二级路由/三级路由
为什么要用二级和三级路由?当项目中 有多个 <router-view> 时,就必须使用分级路由;如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路由,那么项目中的 <router-view> 的内容显示就会混乱;这是不友好的;如果对路由进行分级,那么当触发某个二级或三级路由时,此路由就会将对应组件内容传给自己的父级路由组件...原创 2018-08-22 16:34:36 · 18393 阅读 · 2 评论 -
Vue.js 路由器使用技巧
<router-link> 是用于 路由器的无刷新跳转改变<router-link> 标签默认显示标签<router-link> 标签默认显示 Dom 为 <a><router-link to="/" class="nav-link">主页</router-link>通过 ta原创 2018-08-22 11:59:18 · 661 阅读 · 0 评论 -
vue.js v-model 实现双向数据绑定
双向数据绑定一定与 input / select /textarea 其中一个有关联双向数据绑定:两方的数据,不管哪一方发生改变都会实时的影响另外一方使用 v-model 属性实现组件绑定数据 <!--vue-app是根容器--> <div id="vue-app"> <input type="text" v...原创 2018-07-29 11:03:17 · 415 阅读 · 0 评论 -
vue.js ref属性使用
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象(根元素上)上给text组件注册信息,text组件的信息将会传递给他根容器(<div id="vue-app">)的$refs对象上 <!--vue-app是根容器--> <div id="vue-app"> <input ty...原创 2018-07-29 21:04:11 · 4831 阅读 · 0 评论 -
Vue.js 动态绑定CSS样式
第一种方法:v-bind:class="{a:b,c:b}" a c 代表CSS样式表里相应的样式名 b 代表true(启用此样式)/false(不启用此样式)html <!--vue-app是根容器--> <div id="vue-app"> <input type="button" v-on:...原创 2018-07-30 15:54:23 · 44336 阅读 · 3 评论 -
vue.js v-if / v-else-if / v-else 和 v-show 的使用与差别
v-if / v-else-if / v-else的使用这些不难理解,与 if(){}else if(){}else{} 是一个玩法;值得注意的是:①他们只能是 兄弟元素②v-else-if 上一个兄弟元素必须是 v-if ②v-else 上一个兄弟元素必须是 v-if 或者是 v-else-if④一个判断语句组中只能有一个”显示“⑤判断为 false...原创 2018-07-30 16:38:19 · 1756 阅读 · 0 评论 -
Vue.js v-for的使用
v-for就是平时的for循环html <!--vue-app是根容器--> <div id="vue-app"> <p>第一个数组</p> <ul> <li v-for="name in names">{{ name }原创 2018-07-30 17:37:49 · 4027 阅读 · 2 评论 -
JS 面向对象编程之类的继承
类:浏览器的分类原型:类的方法 prototype(及类的属性与方法)原型链:继承(既是类与类之间的原型继承)自定义类的继承//a类继承b类a.prototype= new b()注意://这不是继承,是引用a.prototype = b.prototypea的原型被添加或删除,b的原型也会随之改变,反之b变a也会变化;这不符合继承的关系继承只允许 子 ...原创 2018-07-31 10:07:13 · 106 阅读 · 0 评论 -
Vue.js 自定义组件的创建与应用
通过:Vue.component('my-component-name', { /* ... */ }) 创建自定义组件html <!--vue-app是根容器--> <div id="vue-app"> <hw></hw> //自定义标签 </div>j...原创 2018-07-31 15:20:53 · 1082 阅读 · 0 评论 -
vue.js 搭建脚手架
前提: 有 node 环境 和 npm环境 ①全局安装 vue-cli (命令行工具 (CLI))//安装这个才能使用 vue关键字npm install --global vue-cli//检验是否安装成功(返回版本号)vue --version②创建一个基于 webpack 模板的新项目文件(在哪个文件下使用 语句,就会在那...原创 2018-07-31 16:15:44 · 168 阅读 · 0 评论 -
Vue.js 脚手架的使用
脚手架的src文件结构说明:components问件下存放着自己的创建的子组件文件,将创建好的子组件放到 App.vue或者main.js文件中进行注册使用,这样,组件就会出现在页面上...原创 2018-08-01 13:42:34 · 395 阅读 · 0 评论 -
Vue.js 脚手架 之 组件的创建与使用
使用之前要创建在 components 文件下创建一个自己的 组件文件(.vue)初始结构为<!--html区域--><template> </template><!--JS区域--><script> export default { name: "hw" }<..原创 2018-08-01 14:28:20 · 5567 阅读 · 1 评论 -
Vue.js 组件css样式作用域
App.vue文件中普通的去定义的css样式,而子组件未定义css样式,App.vue文件中的css样式会影响其他的 子组件 的样式当 子组件 中定义了 css样式,子组件的样式会覆盖 App.vue 中的样式想要每个组件的 css 样式都是独立的,就在 <style> 标签上加上 scoped <style scoped> h1{...原创 2018-08-01 14:52:18 · 1589 阅读 · 0 评论 -
vue.js 路由器的使用
在 vue 项目中装 路由模块npm install vue-router --save-dev在配置路由之前,先来了解下 <router-link> 和 <router-view> 标签<router-link> 和 <a> 标签是一样的作用用于跳转<router-link to="/body">点我跳转页...原创 2018-08-06 12:50:49 · 244 阅读 · 0 评论 -
vue.js vue-resource——http请求
在 vue项目中引用 vue-resource 模块npm install vue-resource --save-dev在 main.js 文件中 引用//引入 vue-resource模板import VueResource from 'vue-resource'Vue.config.productionTip = false;Vue.use(VueResourc...原创 2018-08-06 13:37:02 · 560 阅读 · 1 评论 -
Vue 使用 element-ui组件中 el-upload 上传图片
默认已经引进 element-ui 组件简单的使用可查看官方API列出自己在使用中遇到的问题<el-upload>无法在手机中使用刚开始用下面的语句限制上传文件的类型accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"下面的代码,在pc端使用是可以正常使用,但在手机...原创 2018-12-23 21:54:31 · 7287 阅读 · 1 评论