vue 学习笔记1
1、子组件在父组件的原生的事件
例如一个child子组件的点击事件<child @click="handleClick">点击</child>
这种情况在父组件中是不能触发点击事件,这里click点击事件对子组件是自定义事件,如果想变成
原生的事件必须加navtiv修饰符<child @click.native="handleClick">
2、input、textarea, change事件不能触发,而是采用input事件
<template>
<div>
<input type="text" placeholder="请输入..." @input="hanldeChange" v-model="msg">
</div>
</template> <script>
export default {
name: "OutInput1",
data () {
return {
msg:""
}
},
methods :{
hanldeChange(){
console.log(this.msg)
}
}
}
在这里input事件可以监听到vue中的input用户输入的值,取代了change事件
</script> 3
vue-cli 2.0的static文件夹中组件可以访问其中的静态文件,例如axios,
在static文件夹中有个index.json文件,下面的路径可以访问其中的index.json文件中的内容
在http://localhost:8080/static/index.json也能访问到其中的数据
mounted(){
this.get()
},
methods:{ get(){
axios.get('/static/index.json').then(
res =>{
var respose = res.data
console.log(respose)
}
)
} },
mounted(){
this.get()
},
methods:{ get(){
axios.get('/static/index.json').then(
res =>{
var respose = res.data
console.log(respose)
}
)
} },
webpack也为我们提供了一个借口,可以访问内部的数据,在vue-cli2.0中的config文件夹中的index.js
中proxyTable空对象可以这样设置:
proxyTable: {
"/api":{
target:"http://localhost:8080",
pathRewrite:{
"^/api":"/static"
}
}
}
这样下面的路径可以这样写了
修改config index.js文件后路径这样就可以模拟后台数据的接口
get(){
axios.get('/api/index.json').then(
res =>{
var respose = res.data
console.log(respose)
}
)
}
vue 学习笔记1的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
随机推荐
- python r(不进行转义)的用法
第一种用法,直接针对字符串:r‘E:\ui\bbq.txt’ 第二种用法,针对变量名:r'' + 变量名
- Python源码文件中带有中文时,输出乱码
Python源码文件中带有中文时,文件头应加注释: #!/usr/bin/env python # -*- coding: utf-8 -*- 第一行注释是为了告诉Linux/OS X系统,这是一个P ...
- TCP/IP_网络基础知识
今天看到k8s的网络,顿感网络知识不是特别扎实,立马回头补一下Tcp-ip知识,顺便记录下学习的过程: 计算机与网络发展的7个阶段: 批处理时代(计算机按照顺序处理,50年代)->分时系统时代( ...
- 【Selenium-WebDriver自学】Selenium-IDE调试(四)
==================================================================================================== ...
- 8.2.1-优化SELECT语句
8.2.1.优化 SELECT 语句 由SELECT 语句组成的查询,在数据中执行所有的查询.对这类语句的调优排在首位,无论是调优动态web网页的二级响应时间,还是减少生成巨大隔夜报告的时间. 而且, ...
- oracle删除表数据的两种的方式
转自:https://blog.csdn.net/qq_37840993/article/details/82490787 平时写sql中我们都会用到删除语句,而平时删除表数据的时候我们经常会用到两种 ...
- 20165304 2017-2018-2 《Java程序设计》第3周学习总结
教材学习总结 类与对象学习总结 1.类:java作为面向对象型语言具有三个特性:①封装性.②继承性.③多态性.java中类是基本要素,类声明的变量叫对象.在类中定义体的函数题叫方法. 2.类与程序的基 ...
- WebService与RESTful WebService
Manual Instruction Document Web Service JAX-WS & JAX-RS Author: Liu Xiang Date: 2018/01/12 1. Su ...
- 轻量级Java持久化框架,Hibernate完美助手,Minidao 1.6.2版本发布
Minidao 1.6.2 版本发布,轻量级Java持久化框架(Hibernate完美助手) Minidao产生初衷? 采用Hibernate的J2EE项目都有一个痛病,针对复杂业务SQL,hiber ...
- hive理论
join操作: 这个 group by count()操作: 数据倾斜: 操作• Join on a.id=b.id• Group by• Count Distinct count(groupby)• ...