vue简单实例

Vue.js是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

在.html文件中引入Vue

可以去菜鸟教程使用线上编译器进行,也可以新建一个.html文件,然后通过如下方式引入Vue:

放一个就行了,我列了四个emmmm

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
引入地方如下:

image.png

声明式渲染

Vue.js的核心是一个允许采用简介的模板语法来声明式地将数据渲染进DOM的系统


image.png

运行结果

image.png

贴上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   <div id = "app">
       {{message}}
   </div>

   <script>
       var app = new Vue({
           el:'#app',
           data:{
               message:'Hello Vue!'
           }
       })
   </script>


</body>
</html>

放上大佬博客链接https://cn.vuejs.org/v2/guide/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。