Vue的基本使用(四)
阿新 • • 發佈：2018-12-02
ron axios lang oct .proto clas text utf-8 ref
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> <scriptsrc="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的基本使用(四)