vue+vantUI模板

1、在HTML页面中引入vue和VantUI

 <!-- 引入vue和vantUI CDN --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css"><!-- 引入组件 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- 引入vue和vantUI CDN --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css"><!-- 引入组件 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script><title>vue+vantUI模板</title>
</head>
<style type="text/css"></style><body><div id="app"><van-progress pivot-text="橙色" color="#f2826a" percentage="25"></van-progress><van-progress pivot-text="红色" color="#ee0a24" percentage="50"></van-progress><van-progress percentage="75" pivot-text="紫色" pivot-color="#7232dd"color="linear-gradient(to right, #be99ff, #7232dd)"></van-progress></div></body>
<script>//注册使用vue和vantvar Vue = window.Vue;var vant = window.vant;//使用全局的vant组件Vue.use(vant);var app = new Vue({el: '#app',data() {return {}},methods: {onClickLeft() {alert("left");},onClickRight() {alert("right")}}})</script></html>

vantUI官方网址：https://youzan.github.io/vant-weapp/#/intro

注意点：官网中有些组件代码都是单标签的，但是在实际应用之中会出问题，所以尽量将单标签更改为双标签。

vue+vantUI模板相关推荐

Vue.js 模板语法
模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 H ...
vue中模板编译compiler源码详解
vue编译模板过程; <div><h1>这是compiler</h1> <p v-if="message">{{ message } ...
[vue]vue渲染模板时怎么保留模板中的HTML注释呢？
[vue]vue渲染模板时怎么保留模板中的HTML注释呢? <template comments>... </template> 个人简介我是歌谣,欢迎和大家一起交流前后端知 ...
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解模板引擎: 负责组装数据,以另外一种形式或外观展现数据. 优点: 可维护性(后期改起来方便): 可扩展性(想要 ...
VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
【Vue】—Vue的模板语法
[Vue]-Vue的模板语法在template中写HTML时,如果需要渲染变量或者表达式,可以使用{{ }}形式来渲染,这个{{ }}就是模板语法,可以把变量或者表达式的结果渲染出来. 模板语法渲染 ...
Vue 3 模板语法
模板语法实验介绍 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层应用实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
四、Vue.js 模板语法
本章概要应用程序实例插值指令 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将呈现的 DOM 绑定至底层组件实例的数据.所有的 Vue.js 模板都是有效的 HTML ,可以 ...
Vue的模板语法及案例
文章目录前言一.双大括号表达式二.插值 2.1文本 2.2 原始 HTML 2.3 特性 2.4 javascript 表达式三.指令 3.1 参数 3.2 动态参数 3.3 修饰符四.指令 ...

vue+vantUI模板

vue+vantUI模板相关推荐

最新文章

热门文章