Vue学习历程之Hello World

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

爱吃早餐的程序员

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

阅读量207

点赞数 1

分类专栏： JAVA-前端文章标签： vue java javascript vue.js node.js

本文链接：https://blog.csdn.net/weixin_39076203/article/details/104697304

版权

JAVA-前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

只要现在开始，什么时候都不晚。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>

展示效果

这里可以通过点击“逆转消息实现如下效果”
在这里插入图片描述

爱吃早餐的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习历程之Hello World

只要现在开始，什么时候都不晚。Vue可以很好的证明这一点，之前也断断续续的做了一些练习，但是都没有坚持下来。现在我要重新开启Vue学习之路，今后会把自己的练习发出来让大家欣赏。首先在我Eclipse本地创建一个项目用于练习，svn也是我本地的。这个是我写的第一个简单的案例<meta charset="UTF-8"><title>Vue练习</ti...
复制链接

扫一扫