新手入门——创建第一个vue应用！
声明式渲染Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系統。下面展示一个例子，用<div>标签声明一个massage变量，这是一种常见的文本插值方式。使用script脚本包裹一段js，在引入vue.js的时候需声明一个vue全局变量，通过new vue 的方式可以获得一个vue应用。在使用new vue 的时候需要传递一个对象作为参数，该对象有两...
·
声明式渲染
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>
到底啦！本次分享结束，感谢您的阅读！
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)