Vant - 轻量、可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css"/> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script> <div id="app"></div> <script> // 在 #app 标签下渲染一个按钮组件 new Vue({ el: '#app', template: `<van-button>按钮</van-button>`, }); // 调用函数组件，弹出一个 Toast vant.Toast('提示'); // 通过 CDN 引入时不会自动注册 Lazyload 组件 // 可以通过下面的方式手动注册 Vue.use(vant.Lazyload); </script>Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。
以下提供的webpack的方法。使用传统方法可以自行转换，原理应该一样。
<!-- 将该组件绑定到 this.$refs.checkbox 上 --> <van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox> export default { data() { return { checked: false, }; }, // 注意：组件挂载后才能访问到 ref 对象 mounted() { this.$refs.checkbox.toggle(); }, };基本使用：<van-button>默认按钮</van-button>
false
