.html文件如何使用vue&vue组件等
.html文件如何使用vue&vue组件
·
vue2官网文档： https://v2.cn.vuejs.org/v2/guide/installation.html
一、如何使用vue
<!-- 对于制作原型或学习，你可以这样使用最新版本: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：: -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<body>
<div id="app">
测试Vue的响应式数据：{{ name }}
<button v-on:click="changeName">修改name</button>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '小花'
},
methods: {
changeName(event) {
console.log('事件对象', event.target.tagName) // BUTTON
this.name = '新小花'
}
}
})
</script>
</html>二、 如何使用vue组件
1. 组件是可复用的 Vue 实例，且带有一个名字。
2. 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
3. 每个组件必须只有一个根元素。
4. 全局注册组件语法：Vue.component("组件名", 组件对象)
新建button-counter.js 文件：
template选项：用于页面显示。
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
props: ['title'],
data () {
return {
count: 0
}
},
methods: {
addCount() {
this.count++
}
}
template: '<button v-on:click="addCount">{{ title }} : You clicked me {{ count }} times.</button>'
})在.html中使用组件：
<script src=".button-counter.js"></script>
<body>
<div id="app">
<button-counter :title="测试vue组件1"/>
<button-counter :title="测试vue组件2"/>
</div>
</body>三、vue复用组件中，如何再使用其他子组件
<!-- 注意：validate-plan是add-or-view-plan、list的复用组件逻辑，必须先加载该块代码，即script的上下位置不能变动哦！ -->
<script src="/admin_xpx/vue/coms/validatePlanComponentObj.js"></script>
<script src="/admin_xpx/vue/coms/button-counter.js" defer></script>// 子组件
const validatePlanComponentObj = {
props: {},
data() {},
methods: {},
template: `<h1>xx</h1>`
}// 父组件中使用子组件
Vue.component('button-counter', {
props: ['title'],
components: {
validatePlan: validatePlanComponentObj
},
template: `
<validatePlan :show.sync="showValidation" @update="getList"/>
`
})参考链接：
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献16条内容
所有评论(0)