河北建设银行官网招聘网站,如何查看网站是否开启gzip,抖抈app软件下载,网络营销推广主要做什么?有哪些方法和技巧一 ref属性
被用来给元素或子组件注册引用信息#xff08;id的替代者#xff09; 应用在html标签上获取的是真实DOM元素#xff0c;应用在组件标签上是组件实例对象#xff08;vc#xff09; 使用方式#xff1a; 打标识#xff1a;
......
或 获取#xff1a;this.…一 ref属性
被用来给元素或子组件注册引用信息id的替代者 应用在html标签上获取的是真实DOM元素应用在组件标签上是组件实例对象vc 使用方式 打标识
......
或 获取this.$refs.xxx templatedivh1 v-textmsg reftitle/h1button refbtn clickshowDOM点我输出上方的DOM元素/buttonHelloWorld refsch //div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;export default {name: App,components: { HelloWorld },data() {return {msg: lqz,};},methods: {showDOM() {console.log(this.$refs.title); //真实DOM元素console.log(this.$refs.btn); //真实DOM元素console.log(this.$refs.sch); //School组件的实例对象vc},},
};
/script二 props配置项
功能让组件接收外部传过来的数据
传递数据
接收数据
第一种方式只接收props:[name]
第二种方式限制类型props:{name:String}
第三种方式限制类型、限制必要性、指定默认值
props:{name:{type:String, //类型required:true, //必要性default:老王 //默认值}
}三 mixin(混入)
mixin(混入) 功能可以把多个组件共用的配置提取成一个混入对象
使用方式
第一步定义混入
export const hunhe {methods: {showName() {alert(this.name);},},mounted() {console.log(你好啊);},
};
export const hunhe2 {data() {return {x: 100,y: 200,};},
};第二步使用混入全局
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
import {hunhe,hunhe2} from ./mixin
//关闭Vue的生产提示
Vue.config.productionTip falseVue.mixin(hunhe)
Vue.mixin(hunhe2)//创建vm
new Vue({el:#app,render: h h(App)
})第三步使用混入局部
templatediv/div
/templatescript
import {hunhe,hunhe2} from ../mixinexport default {name: App,data() {return {name: lqz,};},mixins:[hunhe,hunhe2]
};
/script
四 插件 功能用于增强Vue 本质包含install方法的一个对象install的第一个参数是Vue第二个以后的参数是插件使用者传递的数据。 定义插件plugins/index.js import Vue from vue;export default {install(a) {console.log(执行了插件, a)// 定义指令//定义全局指令跟v-bind一样获取焦点Vue.directive(fbind, {//指令与元素成功绑定时一上来bind(element, binding) {element.value binding.value;},//指令所在元素被插入页面时inserted(element, binding) {element.focus();},//指令所在的模板被重新解析时update(element, binding) {element.value binding.value;},});//定义混入所有vc和vm上都有name和lqzVue.mixin({data() {return {name: 彭于晏,age: 19,};},});// 原型上放方法所有vc和vm都可以用helloVue.prototype.hello () {alert(你好啊);};}
}使用插件main.js中 import plugins from ./pluginsVue.use(plugins, 1, 2, 3);App.vue中
templatediv{{name}}input typetext v-fbind:valuevbrbutton clickhello点我/button/div
/templatescriptexport default {name: App,data() {return {v:xxx};},
};
/script
五 scoped样式
作用让样式在局部生效防止冲突。写法style scoped
六 插槽
作用让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于 父组件 子组件分类默认插槽、具名插槽使用方式
template v-slot:footerdivhtml结构2/div
/template七 Elementui的使用
Element - The worlds most popular Vue UI framework
