《VUE-声明式渲染》

最新推荐文章于 2022-09-06 17:55:52 发布

南挽(SouthWan)

最新推荐文章于 2022-09-06 17:55:52 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/qq_44894205/article/details/102980979

版权

JavaScript 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

前言

接下来我将会先带领大家安装vue.js并开始编写第一个vue程序；
有兴趣了解更多的同学可以添加我的一个联系方式（下方）；

QQ：2508598490；邮箱：2508598490

Vue是什么？

VueVue (读音 /vjuː/，类似于 view)是一款开源的JavaScript框架，由尤雨溪先生以及他的团队开发，它不仅容易上手，而且还能完成复杂的业务需求，是一款高性能的JavaScript开发框架；

安装Vue

先打开浏览器搜索Vue点击红色方框选中部分；

点击红色方框选中的红色部分（起步）
在这里插入图片描述点击左侧的安装，向下翻会有一个开发版本和运行版本，下载安装版本即可

接下来我们正式开始安装Vue，请先将vue.js文件导入到项目内；

<script src="../vue.js" type="text/javascript" charset="utf-8"></script>

以上方法是最常使用的也是最可靠的！每个需要使用vue的html都必须引用vue.js;

第一个Vue实例

那么我们先new一个Vue实例

var vm = new Vue({
  // new一个vue实例，它的名字叫vm；
});

实例既然已经new出来了是不是该挂载呢？？？

 var app = new Vue({
 //通过el挂载实例
  el: '#vm',
  //通过data渲染出结果；
  data: {
  //挂载数据名称
   msg: 'Hello Word!!!',
  }
 });

我们通过el对#vm这个id进行渲染出结果；
接下来我们会为同学们提供完整代码演示；

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 <body>
 <div id="vm" v-text="msg">
 </div>
 <script type="text/javascript">
 var vm = new Vue({
  el: '#vm',
  data: {
   msg: 'Hello Word!!!',
  }
 });
 </script>
  
 </body>
</html>

接下来我们会更新更多关于Vue的教程！
你们免费的点赞就是支持我写下去的动力！

南挽(SouthWan)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
《VUE-声明式渲染》

前言接下来我将会先带领大家安装vue.js并开始编写第一个vue程序；有兴趣了解更多的同学可以添加我的一个联系方式（下方）；QQ：2508598490；邮箱：2508598490Vue是什么？VueVue (读音 /vjuː/，类似于 view)是一款开源的JavaScript框架，由尤雨溪先生以及他的团队开发，它不仅容易上手，而且还能完成复杂的业务需求，是一款高性能的Java...
复制链接

扫一扫