VUE2.x - HelloWorld

最新推荐文章于 2024-07-14 11:01:07 发布

ejokovic

最新推荐文章于 2024-07-14 11:01:07 发布

阅读量223

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u011664286/article/details/126963447

版权

VUE 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

初识VUE
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
作者：尤雨溪（华裔前Google工程师，目前再阿里巴巴上班）

在我们正式踏入VUE大门之前先搞个简单Demo看下Vue的基础操作

HelloWorld

新建html 然后将Vue的js库引入

说明

按普通页面开发思维要想使用vue的js库肯定先引入

vue的语法两个大括号进行赋值这也是vue中最基本的文本赋值方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message"/>
    <p>{{message}}</p>
</div>
// Vue的js库
<script type="text/javascript" src="js/vue2.6.js"></script>

<script type="text/javascript">
new Vue({ // vue语法
    el:'#app', // 给id=app的块元素进行渲染操作
    data:{// 定义数据值 可有多个 ，多个之间使用逗号隔开
        message:'HelloWorld-vue' // key=message  value=HelloWorld
    }
});
</script>
</body>
</html>

在这里插入图片描述