angular移除事件绑定事件绑定_小程序Kbone开发教程基础篇03-为按钮绑定事件

最新推荐文章于 2024-04-19 05:51:19 发布

赵学浩

最新推荐文章于 2024-04-19 05:51:19 发布

阅读量181

点赞数

文章标签： angular移除事件绑定事件绑定

本文链接：https://blog.csdn.net/weixin_35720618/article/details/112350607

版权

前言

本节我们为按钮绑定一个点击事件，点击一次修改Text显示数据。

一、基础知识

1.页面渲染

要实现本节需要的功能，需要首先了解Vue的渲染方式，Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

声明式渲染用法也很简单，html种调用{{ 要渲染的内容 }}即可，这点和小程序原生开发方式一致，都是调用this中数据显示，因此需要在Vue的data()中放置需要渲染的数据内容。

二、示例

1.修改App.vue中核心代码

{{text}} 中英文切换

按钮中@click='btn_clicked'绑定按钮点击事件函数为btn_clicked,函数中修改需要渲染的数据，默认显示"hello world",点击按钮后变为"你好世界"，在此点击后恢复，如此实现中英文切换数据显示的功能。

2.加载KButton和KView组件

在上述程序中，我们引入了KButton和KView组件，需要在main.mp.js中引入，代码如下：

import Vue from 'vue'import App from './App.vue'import KButton from 'kbone-ui'import KView from 'kbone-ui'export default function createApp() {  const container = document.createElement('div')  container.id = 'app'  document.body.appendChild(container)  Vue.use(KView)  Vue.use(KButton)  return new Vue({    el: '#app',    render: h => h(App)  })}

调用Vue.use(KButton)、Vue.use(KView)加载

三、运行

修改build/miniprogram.config.js中的appid为自己小程序的appid,projectname自定义。