自学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>
知识点:
- let定义变量,const定义常量
- 文本输出很简单,两个大括号括起来就可以直接文本输出
- f12打开,进入控制台,就可以改变let修饰的文本内容
- 循环输出用v-for标签
- methods中可以定义多个方法体
- el声明加载器