与 Vue 的初次相遇，MVVM框架

最好的人啊

已于 2022-07-26 08:17:00 修改

阅读量384

点赞数

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

于 2022-07-25 20:28:53 首次发布

本文链接：https://blog.csdn.net/qq_52499703/article/details/125981679

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基础知识，包括Vue的定义、如何创建第一个Vue程序，以及MVVM框架的核心概念。Vue是一个渐进式的前端框架，专注于视图层，易于上手且适合与现有项目整合。通过Hello World示例展示了Vue的文本插值和指令特性，并探讨了MVVM模式的优缺点及工作原理。

摘要由CSDN通过智能技术生成

一，Vue 是什么？

二，我的第一个Vue程序

1，尝试 Vue.js 最简单的方法是使用 Hello World 例子

2，除了文本插值，我们还可以像这样来绑定元素

一，Vue 是什么？

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

Vue 被设计为可以自底向上逐层应用

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二，我的第一个Vue程序

1，尝试 Vue.js 最简单的方法是使用 Hello World 例子

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<!-- 引入Vue文件 -->
	<script src="js/vue.js"></script>
	<title></title>
</head>

<body>
	<!-- 首先创建一个div标签给它一个id一般是app，然后在div标签中用双大括号{{}}声明一个变量 -->
	<div id="app">
		<h1>{{message}}</h1><!--  双大括号里的值来自于data中message的初始化值 想要什么值在里面初始化就行 -->
	</div>
	<script>
		// 声明一个new Vue函数 el 获取html中的id 让html与js建立关系
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello world！'
			}
		})
	</script>
</body>

</html>

2，除了文本插值，我们还可以像这样来绑定元素

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-bind:title="message">
            鼠标悬停几秒查看此处动态的绑定提示信息！
        </p>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:`现在是北京时间${new Date().toLocaleString()}`
            }
        })
   
    </script>
</body>

</html>