Vue.js——自学第一天

本文链接：https://blog.csdn.net/qq_36149705/article/details/107145140

自学Vue.js-Day1

首日学习三个知识点：

Vue文本渲染
Vue框架制作列表

本以为文本渲染是一个很简单的事情，但是跟着视频上手后打印出来的内容与预期不符，本以为有前端基础，但依旧有些不得其解。

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script>
		let study = new Vue({
			el: '#study',
			data: {
				message: "这是一个计数器: "
			},
		})
	</script>
</head>
<body>
	<div id="study">
		<p>{{message}}</p>
		<button>+</button>
		<button>÷</button>
	</div>
</body>

打印结果
在这里插入图片描述
后来在官方文档中复制相关代码进来也无法正常打印。

查看日志后发现
在这里插入图片描述
ok fine。
我才发现我将脚本放到了div之前。

<body>
	<div id="study">
		<p>{{message}}{{count}}</p>
		<button v-on:click="add">+</button>
		<button v-on:click="sub">-</button>
		<ul>
			<li v-for="item in foods">{{item}}</li>
		</ul>
	</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
	let study = new Vue({
		el: '#study',
		data: {
			message: "这是一个计数器：",
			count: 0,
			foods: ["炸鸡", "奶茶", "西瓜", "火锅"]
		},
		methods:{
			add: function(){
				this.count++
			},
			sub:function(){
				this.count--
			}
		}
	})
</script>