Vue的基本使用(四)
1.refs属性的使用
<!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"></div>
<script src="vue.js"></script>
<script>
Vue.component('Test',{
data(){
return {} },
template:`
<div>我是测试组件</div>
` })
Vue.component('Test2',{
data(){
return {} },
template:`
<div>我是测试组件2</div>
` })
let App = {
data(){
return { }
},
template:`
<div>
<input type="text" ref = 'input'>
<Test2 ref = 'efg'/>
<Test ref = 'abc'/> </div> `,
mounted(){
// console.log(this.$refs.input);//获取原始DOM
this.$refs.input.focus();
console.log(this.$refs.abc); //获取组件实例对象
console.log(this.$refs.abc.$parent); //获取父组件
console.log(this.$refs.abc.$root);
console.log(this.$children);
// for(let key in this.$refs){
// console.log( this.$refs[key]);
// } }
}
new Vue({
el:'#app',
data(){
return { }
},
template:`<App />`,
components:{
App
} })
</script>
</body>
</html>
2.axios(相当于jquery中的ajax)
将axios挂载到vue的原型上,那么在各个组件中都能使用,因为面向对象
下载axios
npm install axios 在vue中的使用
main.js中: import Axios fomr 'axios' Vue.prototype.$https = Axios
3.ElementUI的使用
下载element-ui
npm install element-ui -S 在Vue中引入element-ui 在main.js中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//样式文件需要单独引入
import App from './App.vue'; Vue.use(ElementUI); new Vue({
el: '#app',
render: h =>(App)
});
Vue的基本使用(四)的更多相关文章
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- vue实战记录(四)- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- Vue入门系列(四)之Vue事件处理
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 简单的总结四(项目流程,DIY脚手架、vue-cli的使用)
项目流程 1.下载 cdn 2.引包 vue-router依赖vue vue-router.js 3.如果是模块化机制 Vue.use(vue-router) 4.创建示例 let Home = {/ ...
- 从无到有构建vue实战项目(四)
六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...
- Vue 学习笔记(四)
一.路由简单示例 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <sc ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
随机推荐
- Qt DLL总结【三】-VS2008+Qt 使用QPluginLoader访问DLL
目录 Qt DLL总结[一]-链接库预备知识 Qt DLL总结[二]-创建及调用QT的 DLL Qt DLL总结[三]-VS2008+Qt 使用QPluginLoader访问DLL 开发环境:VS20 ...
- 运维不仅仅是Linux,居然还要知道这么多?
摘要: 运维不仅仅是懂Linux就行,因为还有一大部分的Windows运维,向windows运维人员致敬.当然我们这篇文章不是说运维除了懂Linux,还要懂Windows,而是涉及运维的其他方方面面. ...
- Delphi 使用双缓冲解决图片切换时的闪烁问题 good
var TempCanvas: TCanvas; BufDC: HDC; BufBitmap: HBITMAP; begin // 创建一个与显示设备兼容的内存设备 BufDC := CreateCo ...
- Terminator快捷键
窗口相关 窗口开关 上下开新窗口 Ctrl+Shift+O垂直开新窗口 Ctrl+Shift+E关闭当前窗口 Ctrl+Shift+W 改变当前激活窗口 逆时针改变当前窗口 Ctrl+Sh ...
- IIS6.0 WEB园配置
为应用程序池创建 Web 园请注意以下几点: 一.每一个工作进程都会消耗系统资源和CPU占用率:太多的工作进程会导致系统资源和CPU利用率的急剧消耗: 二.每一个工作进程都具有自己的状态数据,如果We ...
- win2003浏览器提示是否需要将当前访问的网站添加到自己信任的站点中去
Win2003的操作系统,的确比其它操作系统在安全上增加了不少,这是为用户所考虑的.当然,既然提供了安全性,尤其是在上网的时候,可以禁止某些活动脚本的显示,这样,就可以多方面的避免在使用Win2003 ...
- DOM模型-属性操作
HTML 元素包括标签名和若干个键值对,这个键值对就称为"属性"(attribute)."属性"本身是一个对象(Attr对象),但是实际上,这个对象极少使用.一 ...
- .NET开发框架(一)-框架介绍与视频演示
本文主要介绍一套基于.NET CORE的SPA高并发.高可用的开发框架. 我们暂且称它为:(让你懂.NET)开发框架. 以此为主线,陆续编写教程,讲述如何构建高并发.高可用的框架. (欢迎转载与分享) ...
- 妹子问我maven是啥?从相亲说起。。
自从上一篇原创文章: 第一次教妹子安装IDEA 在<java技术之家>公号发表之后,大家的好评如潮,这给了我继续写下去的信心.感谢你们的支持,我会继续努力的. 自从漂亮妹妹加入我们研发团队 ...
- BootStrap4.0Demo+轮播素材记录
整理一些关于前端的东西: BootStrap4.0Demo: 官方DEMO:http://code.z01.com/v4/components/carousel.html 下午翻了点不错的轮播素材: ...