新手入门——创建第一个vue应用！

最新推荐文章于 2024-02-28 09:30:00 发布

Shmily_ox

最新推荐文章于 2024-02-28 09:30:00 发布

阅读量271

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Shmily_ox/article/details/104947120

版权

声明式渲染

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

下面展示一个例子，用<div>标签声明一个massage变量，这是一种常见的文本插值方式。
使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量，通过new vue 的方式可以获得一个vue应用。在使用new vue 的时候需要传递一个对象作为参数，该对象有两个非常重要的属性 el (element)元素 和 data（用于保存数据）。

< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type= "text/javascript" charset= "utf-8"></script>
</head>
<body>
<div id="app">   //通过`<div>`标签声明一个massage变量
{{ message }}
</div>

<script type="text/javascript">    
 //使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量
var app = new Vue({
el: ' #app',      //使用id选择器选中div标签
data: {        //用于保存数据，在标签中声明了哪些变量，就需要注册这些变量并初始化赋值
message: 'Hello Vue!'
});
</script>
</body>
</html>

最终页面会显示 Hello Vue! 内容
当然，你也可以做相应的尝试，添加新的变量，在data里面进行相应的赋值。
如下，添加name变量，初始化赋值为vue。

< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type= "text/javascript" charset= "utf-8"></script>
</head>
<body>
<div id="app">   //通过`<div>`标签声明一个massage变量
{{ message }},{{name}}
</div>

<script type="text/javascript">    
 //使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量
var app = new Vue({
el: ' #app',      //使用id选择器选中div标签
data: {        //用于保存数据，在标签中声明了哪些变量，就需要注册这些变量并初始化赋值
message: 'Hello Vue!'
name: "vue"
});
</script>
</body>
</html>

此时，页面将展示Hello Vue!vue 内容
我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后
做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢?
打开你的浏览器的JavaScript控制台(就在这个页面打开),并修改app . message的值，你将看到上例相应地更新。
除了文本插值，我们还可以像这样来綁定元素特性:

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

到底啦！本次分享结束，感谢您的阅读！

Shmily_ox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新手入门——创建第一个vue应用！

声明式渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系統。下面展示一个例子，用<div>标签声明一个massage变量，这是一种常见的文本插值方式。使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量，通过new vue 的方式可以获得一个vue应用。在使用new vue 的时候需要传递一个对象作为参数，该对象有两...
复制链接

扫一扫