HelloWorld程序
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
{{message}}
<h2>{{name}}</h2>
</div>
<script>
// let(变量)/const(常量)
// Vue(编程范式:声明式编程)
const app = new Vue({
el: "#app",
data: {
//定义数据
message: "Hello World!",
name: "张三"
}
})
</script>
</body>
</html>
1.个人理解声明式编程
即vue内部事先绑定好对象和数据的关系,通过修改对象的值就,vue内部就会自动更新到使用该值的标签中。
2.和原生js的对比
原生js(编程范式:命令式编程)的做法主要分为以下三步:
- 创建div元素,设置id属性
- 定义一个变量叫message
- 将message变量放在前面的div元素中显示
3.知识梳理
script标签中新建的Vue对象的el和body中的元素id一致挂载在一起,当前页面所需的变量则保存在该Vue对象的data属性中。其中data中可以有String,Number,Boolean,Array,Object等等。
计数器程序
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click='counter++'>+</button> -->
<!-- <button v-on:click='counter--'>-</button> -->
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add: function() {
console.log("add被执行")
this.counter++
},
sub: function() {
console.log("sub被执行")
this.counter--
}
}
})
</script>
</body>
</html>
1.和原生js对比
- 在js中获取button元素
- 给元素添加监听事件
2.知识梳理
v-on:click="action"绑定动作事件,
标签添加的动作事件写在和data同级的methods中,方法格式为
methodName: function() {} 或者 methodName() {}
第一次记录自己的学习笔记,如果您发现问题,欢迎指点。