由于项目比较老不是前后端分离就算啦,而且还是普通的HTML,扩展性极差,真是难顶.但是工作还是要做,既然做了那就记录一下吧
步骤一
先引入vue.js
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
步骤二
编写vue组件(js文件)
var myload = {
template: `
<div class="amount">
<input v-model="qfwTxt" @blur="onblur" @focus="onfocus"/>
<input v-model="bigTxt" readonly/>
</div>
`,
props: ['decimal_point'],//接收父组件传的值
data() {
return {
qfwTxt: '',
bigTxt: ''
}
},
methods: {
onblur() {
// 其他处理
// this.qfwTxt = thousandth(this.qfwTxt, this.decimal_point);
this.bigTxt = `${this.qfwTxt}元`;
//把值传给父组件
this.$emit('childfun', this.qfwTxt)
//借助v-model原理将值返回给父组件
this.$emit('input', this.qfwTxt)
},
onfocus() {
//具体操作
}
},
created() {
//初始化赋值
if (this.$attrs.value) {
this.qfwTxt = this.$attrs.value;
this.bigTxt = `${this.$attrs.value}元`;
}
}
}
可以看到,其实就是定义了一个对象,template用来定义组件的dom,props、data和methods等这些就是组件的一些基本使用了具体的话就按照业务需求即可. created方法是组件的生命周期函数,因为我做的组件要在父子间互通,并且会有初始值,所以我就直接在创建的时候进行处理.
步骤三
把写好的组件引入到html文件
<!-- 引入js组件 -->
<script src="my_component.js}"></script>
这一步比较关键的地方在于,需要先引入vue,然后再引入组件
步骤四
在HTML页面进行vue实例的创建,并且把自定义组件给加载到vue实例里面去
<script type="text/javascript">
var vm = new Vue({
el: '#webApp',
components:{
// 定义组件
'my-load':myload,
},
data: {
testTxt: 2,
testTxt1: 12500,
},
created: function () {
},
methods: {
childfun(val){
// 使用函数拿到回调的数据
console.log('val',val);
this.childvalShow();
},
childvalShow(){
console.log('v-model',this.testTxt1);
},
}
})
</script>
具体效果
左边框输入文字,右边边框自动加上元
总结
以上就是在HTML页面使用自定义组件,但是有一点不好的地方是,这样做组件的样式只能写在HTML文件而且样式会比较容易重叠
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML页面使用js的vue组件</title>
</head>
<body>
<div id="webApp">
<!-- my-load 就是我自定义的组件 -->
<my-load v-model="testTxt1" :decimal_point="testTxt" @childfun="childfun"></my-load>
</div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<!-- 引入js组件 -->
<script src="my_component.js}"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#webApp',
components:{
// 定义组件
'my-load':myload,
},
data: {
testTxt: 2,
testTxt1: 12500,
},
created: function () {
},
methods: {
childfun(val){
// 使用函数拿到回调的数据
console.log('val',val);
this.childvalShow();
},
childvalShow(){
console.log('v-model',this.testTxt1);
},
}
})
</script>
</body>
</html>
