初入WEB前端（16） VUE起步

最新推荐文章于 2022-07-31 18:11:31 发布

宋辰轩

最新推荐文章于 2022-07-31 18:11:31 发布

阅读量214

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107100426

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.介绍

VUE是一个渐进式的js框架，只注重图层，结合了HTML+CSS+JS，有良好的生态系统且体积小，适用于系统的前端开发
至于后端，我们可以直接用SSM搞定后端，所谓后端也就是些增删改查
VUE是SVVM的实现者，SVVM自己搜
MVC model+view+control
SVVM model+view+viewmodel（链接视图和数据的中间部件）

2.起步

通过官网可以获得起步所需的步骤
在界面中引入vue的js文件或者引入外部网络提供的js文件就可以使用vue了

cdn内容分发网络：是一种加速策略，会从离自己最近的服务器获得需要的资源
创建我们的第一个Vue项目

在这里插入图片描述

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

     <div id="app">
         <span>{{ title }}</span>
     </div>
     <script>
         new Vue({
             el:'#app',
             data:{
                 title:'hello vue'
             }
         })
     </script>
</body>

</html>

在这里插入图片描述
请无视图片里的横线，还有要注意 new Vue一定要在span的下面才会显示，接下来就开始你的Vue之旅吧

下面在div标签里更新如下代码

<div id="app">
         <span>{{ title }}</span>
         <input type="text" v-model="title">
     </div>

我们会发现：在这里插入图片描述
如果在文本框里输入一些东西：

界面内容会立即变化，这是因为ViewModel能观察到数据的变化，监听到视图的变化，并且进行更新

到这就完事了，自己找教程吧，我也会更一些我遇到的问题或者需要记录的东西，一个好网站，有很多cdn

更新，在new Vue（{}）后面加；并不会影响其使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>欢迎你！{{ name }}</p>  //插值表达式
</div>
<script>
    new Vue({
        el:'#app', //该vue对象绑定在哪个标签上，id=vue的el
        data:{
            name:'小明', //以后，数据要通过ajax请求来获得
        }
    }) ;//json格式的对象，使用大括号包裹，里面是键值对
</script>
</body>



</html>

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（16） VUE起步

1.介绍VUE是一个渐进式的js框架，只注重图层，结合了HTML+CSS+JS，有良好的生态系统且体积小，适用于系统的前端开发至于后端，我们可以直接用SSM搞定后端，所谓后端也就是些增删改查VUE是SVVM的实现者，SVVM自己搜MVC model+view+controlSVVM model+view+viewmodel（链接视图和数据的中间部件）2.起步通过官网可以获得起步所需的步骤在界面中引入vue的js文件或者引入外部网络提供的js文件就可以使用vue了cdn内容分发网
复制链接

扫一扫