Vue.js介绍

最新推荐文章于 2024-05-28 10:15:00 发布

小奔跳跳

最新推荐文章于 2024-05-28 10:15:00 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/qq_35367566/article/details/104510423

版权

介绍：
Vue.js是什么

Vue.js（读音/vju:/,类似于view）是一套构建用户界面的渐进式框架。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

起步

官方指南假设你已有HTML、CSS和JavaScript中级前端知识。如果你是全新的前端开发者，它可能不是最好的想法，将一个框架作为你的第一步-最好掌握基本知识再来！其他框架以前的经验是有帮助的，但不是必需的。

声明式渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}} 	<!--Vue的插值表达式，把data中定义的数据显示到此处-->
			<!--三元运算符-->
			{{true ? "OK" : "No"}}
		</div>
	</body>
		<script>
			//view model
			//创建Vue对象
			new Vue({
				el:"#app",		/*由vue接管id为app区域*/
				data:{
					message:"Hello Vue!" 	/*注意此处不要加分号*/
				}
			})
		</script>

</html>

运行
在这里插入图片描述
我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的。

除了绑定插入的文本内容，我们还可以采用这样的方式绑定DOM元素属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="./js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app-2">
        <span v-bind:title="message">
            Nice to meet you!
        </span>
    </div>
</body>
<script>
    new Vue({
        el:'app-2',
        data:{
            message:'You loaded this page on'+new Date()
        }
    })
</script>
</html>