1.获取原生的DOM的方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 14 Vue.component("Test",{ 15 data(){ 16 return {} 17 }, 18 template:`<div>我是测试组件</div>` 19 }); 20 Vue.component("Test2",{ 21 data(){ 22 return {} 23 }, 24 template:`<div>我是测试组件2</div>` 25 }); 26 27 let App = { 28 data(){ 29 return {} 30 }, 31 template:` 32 <div> 33 <input type="text" ref="input"> 34 <Test ref="abc"></Test> 35 <Test2 ref="abc2"></Test2> 36 </div> 37 38 `, 39 mounted(){ 40 console.log(this.$refs.input);//获取原始DOM 41 this.$refs.input.focus(); 42 console.log(this.$refs.abc);//获取组件实例对象 43 console.log(this.$refs.abc2); 44 console.log(this.$refs.abc.$parent);//获取父组件 45 console.log(this.$refs.abc.$root);//获取根组件 Vue实例 46 console.log(this.$children); 47 console.log(this.$refs); 48 for (let key in this.$refs){ 49 // console.log(this.$refs[key]) 50 } 51 } 52 }; 53 54 new Vue({ 55 el:"#app", 56 data(){ 57 return { 58 59 } 60 }, 61 template:`<App />`, 62 components:{ 63 App 64 } 65 }) 66 </script> 67 </body> 68 </html>
2.webpack模块的使用
1.nodejs安装
2.npm init --yes（管理包）
3. vue init webpack 项目名
4.ele-ui使用
npm i element-ui -S
在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
5.jquery的使用
npm install jquery
在webpack.base.conf.js中修改
var webpack = require('webpack');
plugins:[ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "window.jQuery":"jquery" }) ],
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '$': 'jquery', } },