【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`

通过CDN的方式使用VUE 2.0Element UI

VUE

网址

https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js

源码

https://download.csdn.net/download/HIGK_365/88815507

测试

代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
  <h1>{{info}}h1>
div>
<script src="vue.js">script>
<script>
  let v = new Vue(
          {
            el:"div",
            data:{
              info:"Hello Vue!"
            }
          }
  )
script>
body>
html>

结果

【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`_第1张图片

Element UI

网址


<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js">script>

源码

https://download.csdn.net/download/HIGK_365/88815554

测试

代码

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>
<body>
<div id="app">
    <el-button @click="visible = true">Buttonel-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Elementp>
    el-dialog>
div>
body>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js">script>

<script src="https://unpkg.com/element-ui/lib/index.js">script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {visible: false}
        }
    })
script>
html>

结果

【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`_第2张图片
【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`_第3张图片

你可能感兴趣的:(前端,vue.js,ui)