vue入门实例

青旅半醒 2021-12-17 13:49 270阅读 0赞

Vue的一个简单实例

Vue的简介

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

1、 首先我们需要去vue官网下载vue.js文件[https://cn.vuejs.org/][https_cn.vuejs.org]

![1284415-20190606092118265-1711889937.png][]

进入到教程中—选择安装—选择开发版本

![1284415-20190606092111190-2000069266.png][]

进入之后是一堆JS代码，我们全选复制

![1284415-20190606092102591-96590243.png][]

2、 创建一个vue练习项目，项目下创建一个vue.js文件，将官网复制的代码粘贴进去，在index页面之中引入vue.js库包，创建一个vue实例，绑定结点，设置数据。\{ \{msg\}\}是获取data中的数据值。

![1284415-20190606092053318-1715396071.png][]

<!DOCTYPE html>

<html>

<head>

<title>一个简单的vue实例</title>

</head>

<body>

//创建一个vue实例--与ID为root的结点进行绑定--data 是vue实例中的一些数据存放地点

new Vue(\{

el:"\#root",

data:\{

msg:"hello world"

\})

</script>

//原生js实现

var dom =document.getElementById("root2");

dom.innerHTML="hello world!";

</script>

</body>

</html>

3、 效果的实现，如果能够成功的获取到data中msg的数据，就表示vue已经成功引用

![1284415-20190606092138188-1944624806.png][]

转载于:https://www.cnblogs.com/muchen220/p/10983163.html

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[https_cn.vuejs.org]: https://cn.vuejs.org/
[1284415-20190606092118265-1711889937.png]: /images/20211217/cfbe35c1a8a24c16bb01ce25f1438ead.png
[1284415-20190606092111190-2000069266.png]: /images/20211217/1ed8218f19a94a7d82e4f0ae828faed2.png
[1284415-20190606092102591-96590243.png]: /images/20211217/232e03d3502f47aabee2d0a950c223a3.png
[1284415-20190606092053318-1715396071.png]: /images/20211217/0baefc82b96841babf205f4bc2f47728.png
[1284415-20190606092138188-1944624806.png]: /images/20211217/2d0a57a77b0340e2afa010f3a502bb41.png