Vue学习历程之Hello World

最新推荐文章于 2022-07-07 11:21:21 发布

原创最新推荐文章于 2022-07-07 11:21:21 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #java #javascript #vue.js #node.js

JAVA-前端专栏收录该内容

11 篇文章

订阅专栏

本文分享了作者重新开始学习Vue的旅程，从创建本地项目到实现第一个简单案例，展示了如何使用Vue进行数据绑定和方法调用。

只要现在开始，什么时候都不晚。Vue可以很好的证明这一点，之前也断断续续的做了一些练习，但是都没有坚持下来。现在我要重新开启Vue学习之路，今后会把自己的练习发出来让大家欣赏。

首先在我Eclipse本地创建一个项目用于练习，svn也是我本地的。

在这里插入图片描述

这个是我写的第一个简单的案例

<meta charset="UTF-8">
<title>Vue练习</title>
<h3>基础知识练习</h3>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
{{msg}}<p>
{{messageReverse}}<p>	
<button @click="reverseMessage">逆转消息</button>
</div>

</body>
<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data: {
		msg:"我是Vue,刷新时间：" + new Date().toLocaleString(),
		messageReverse:"我要喝水啊啊，上海自来水来自海上"
	},
	methods: {
      reverseMessage: function () {   // 反转字符串的方法
               this.messageReverse = this.messageReverse.split('').reverse().join('')   //messageReverse  这里的变量 一定在data 里面定义  在html 中显示
    }}
})
</script>