title: script标签引入vue方式开发如何写组件
date: 2020-05-08
sidebarDepth: 2
tags:
- vue
- 组件
- script
- 标签
categories: - vue
很多人知道.vue结构的单文件组件形式，不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了，那如果我们又想用vue来写模板，又不想引入vue-cli管理，那该怎么来写组件呢？
- 1.首先在正常使用cdn引入jquery的项目中，也用script标签引入Vue.js文件。
- 2.为了方便测试我们在页面中写个按钮，这个按钮的作用就是要展示jquery和vue同时正确使用并不互相冲突。
- 3.下面进入正题，我们来定义我们的vue组件。
- 4.父页面调用这个组件，最外层必须是vue的实例id为app的div元素包裹才行。
- 5.另一则案例
很多人知道.vue结构的单文件组件形式，不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了，那如果我们又想用vue来写模板，又不想引入vue-cli管理，那该怎么来写组件呢？别着急往下看！
1.首先在正常使用cdn引入jquery的项目中，也用script标签引入Vue.js文件。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
2.为了方便测试我们在页面中写个按钮，这个按钮的作用就是要展示jquery和vue同时正确使用并不互相冲突。
<input id="btn" type="button" value="jquery操作">
3.下面进入正题，我们来定义我们的vue组件。
Vue.component("card",{
props:{//这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
cardTitle:{//卡片标题
type:String,
default:'这是一个卡片'
},
list:{//列表内容
type:Array,
default:[]
}
},
template:`
<div class="modal">
<div class="modal-header">
<h4>{{cardTitle}}</h4>
</div>
<div class="modal-content">
<div>
<slot name="modal-content">可以扩展的卡片内容</slot>
<ul>
<li v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
</div>
<div class="modal-footer">
<slot name="modal-footer">
<input class="btn blue" type="button" value="ok" @click="okHandle" />
<input class="btn" type="button" value="cancel" @click="cancelHandle" />
</slot>
</div>
</div>
`,
methods:{//这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事件告诉父组件触发一个自定义事件，$emit()方法第二个参数也可以用来传递数据
okHandle(){
this.$emit("ok");
},
cancelHandle(){
this.$emit('cancel')
}
}
});
ps：代码中有slot的地方是分发内容的定制模板，slot为modal-content 定制提醒信息模板，slot为modal-footer 定制底部模板。你可以在父页面进行卡片样式的更改和功能的增减。定义好的这个组件在父页面中也要以script标签的形式引入进来，当然你也可以直接定义在父页面中，这个按照你自己的需求和逻辑来写。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="./modal.js"></script>
4.父页面调用这个组件，最外层必须是vue的实例id为app的div元素包裹才行。
<div id="app">
<div>
<card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
</div>
</div>
ps：使用jquery点击按钮触发一个dom操作的事件与vue实例对象中的组件之间并没有任何冲突，不过这里要注意的是，jquery的代码尽量不要写在vue实例的方法methods中，防止出现Bug，另外在htm的书写过程中，所有关于jquey的dom操作都最好也应该写在id为app的vue实例区域的外面，这样才能避免其他bug。
<script>
$('#btn').on('click',function(){
console.log('jquery操作');
})
new Vue({
el:'#app',
data:{
list:[1,2,3,4]
},
methods:{
okMethods:function (){
console.log("ok")
},
cancelMethods:function (){
console.log("cancel")
}
}
});
</script>
5.另一则案例
header.js
var headerTemplate = '<div> header HTML 代码</div>'
Vue.component('my-header', {
template: headerTemplate,
data: xxx,
methods: {}
// ...
})
通过 script标签引入 header.js, 然后在 header.html 内就可以使用了, 比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
<script src="header.js"></script>
</head>
<body>
<div id="main">
<my-header></my-header>
</div>
<script>
new Vue({
el: '#main'
})
</script>
</body>
</html>