Vue学习--关于Vue以及其在VS code上面编写的一些问题总结

最新推荐文章于 2022-12-09 18:16:18 发布

oliverhoo

最新推荐文章于 2022-12-09 18:16:18 发布

阅读量225

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_38198952/article/details/80398985

版权

VUE 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue的学习

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

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

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

<div id="app">
  {{ message }}
</div>

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

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

在VS code上面编写Vue时需要注意一些问题，VS code无法在界面上面建一个工程，你需要打开一个文件夹，然后在文件管理器界面进行新建文件夹，然后将vue.js代码保存在其工作区（即vue代码保存的文件），方便以后工程的使用。

下面是一些实例代码：

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FirstvueProject</title>
    <script src ="../lib/vue(1).js"></script>
</head>
<body>
    <div id = "app"> 
        {{message}} 
    </div>
    <script src ="js/main.js"></script>
</body>
</html>

我在index.html的工程下面也新建了一个main.jsp,来存放vue的框架

var app =new Vue({
    el:'#app',
    data:{
        message: "hello vue project"
    }
})

最后其HTML文件运行结果是

hello vue project

这里面我遇到了一些“坑”（主要是自己菜），像

<script src ="../lib/vue(1).js"></script>

我在写的时候其vue的路径总是设置错误，导致程序在浏览器上面一直显示{{message}},还有就是其js的文件是script标签的属性，而不是script的内容，也就是说

src ="../lib/vue(1).js

要放在<script>内。

还有就是vue上面的对象名和要绑定的标签相对应，才能够完成输出。

oliverhoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--关于Vue以及其在VS code上面编写的一些问题总结

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

扫一扫