博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue入门实例
阅读量:6161 次
发布时间:2019-06-21

本文共 873 字,大约阅读时间需要 2 分钟。

Vue的一个简单实例

 

Vue的简介

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

 

1、 首先我们需要去vue官网下载vue.js文件

 

 

 

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

 

 

 

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

 

 

 

 

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

{msg}}是获取data中的数据值。

 

 

<!DOCTYPE html>

<html>

       <head>

              <meta charset="utf-8" />

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

              <!--引入vue的库-->

              <script src="vue.js"></script>

       </head>

       <body>

              <div id="root">{

{msg}}</div>

              <div id="root2"></div>

              <script>

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

                     new Vue({

                            el:"#root",

                            data:{

                                   msg:"hello world"

                            }

                     })

              </script>

              <script>

                     //原生js实现

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

                     dom.innerHTML="hello world!";

              </script>

       </body>

</html>

 

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

 

 

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

你可能感兴趣的文章
the assignment of reading paper
查看>>
android apk 逆向中常用工具一览
查看>>
MyEclipse 报错 Errors running builder 'JavaScript Validator' on project......
查看>>
Skip List——跳表,一个高效的索引技术
查看>>
Yii2单元测试初探
查看>>
五、字典
查看>>
前端js之JavaScript
查看>>
Log4J日志配置详解
查看>>
实验7 BindService模拟通信
查看>>
scanf
查看>>
Socket编程注意接收缓冲区大小
查看>>
SpringMVC初写(五)拦截器
查看>>
检测oracle数据库坏块的方法
查看>>
SQL server 安装教程
查看>>
Linux下ftp和ssh详解
查看>>
跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击
查看>>
js时间和时间戳之间如何转换(汇总)
查看>>
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
查看>>
java中string和int的相互转换
查看>>
P1666 前缀单词
查看>>