Vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

WendyXu8230

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量143

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/WendyXu8230/article/details/84374655

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue的官网：（https://cn.vuejs.org/v2/guide/）

第一次使用Vue，新建一个html文件，在html里面直接把js引入就能使用，感觉很方便。一下是例子：

<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<br/>
		<div id="app-2">
		  <span  v-bind:title="message">
			鼠标悬停几秒钟查看此处动态绑定的提示信息！
		  </span>
		</div>
		<br/>
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>
		</div>
		<br/>
		<div id="app-4">
		  <ol>
			<li v-for="item in todos">
			  {{ item.text }}
			</li>
		  </ol>
		</div>
		<br/>
		<div id="app-5">
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">逆转消息</button>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: 'Hello Vue!' + '  just for a test'
				}
			});
			
			var app2 = new Vue({
				el: '#app-2',
				data: {
				message: '页面加载于 ' + new Date().toLocaleString()
				}
			});		
			var app3 = new Vue({
				el: '#app-3',
				data: {
				seen: true
			  }
			});
			var app4 = new Vue({
				el: '#app-4',
				data: {
				todos: [
				  { text: '学习 JavaScript' },
				  { text: '学习 Vue' },
				  { text: '整个牛项目' }
				]
			  }
			});
			var app5 = new Vue({
				el: '#app-5',
				data: {
				message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function () {
					this.message = this.message.split(' ').reverse().join(' ')
					}
				}
			});
		</script>
	</body>	
</html>