Vue的基本使用
Posted s593941
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的基本使用的主要内容，如果未能解决你的问题，请参考以下文章