初识Vue并介绍一些功能
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="main">{{message}}</div>
<script>
var app = new Vue({
el: "#main", //用于要挂载的元素
data: { //定义数据
message: 'hello world',
}
})
</script>
</body>
</html>
这里script中首先创建一个Vue实例,并且传入一些参数,el用于html中要挂载的元素,其类型可以是string和htmlElement也就是el:document.querySelector('div')是合法的.data属性通常会存储一些数据,这些数据可以是我们直接定义出来的,就像上面那样,也可以是来自于网络请求,从服务器上加载的.另外,这种编程范式是声明式编程,与以往的命令式编程是不一样的.在刚开始时很难转换过来.
显示效果
这里的数据都是响应式的,也就是在控制台中输入app.message = world时,浏览器会实时渲染html中的message.
Vue中加载列表
使用v-for遍历数组
<body>
<div id="main">{{message}}
<ul>
<li v-for='item in games'>{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#main",
data: {
message: 'hello',
games: ['GTAV', 'sekiro', 'MHW', 'DMC']
}
})
</script>
</body>
显示效果
使用v-for与原生的js相比不需要创建元素后添加到父元素节点上,十分方便,数组可以来自服务器,对json非常友好.
Vue中的事件
<body>
<div id="main">
<h2>计数:{{num}}</h2>
<button @click='num++'> + </button> //也可以用v-on:click
<button @click='num--'> - </button>
</div>
<script>
var app = new Vue({
el: "#main",
data: {
num: 0,
}
})
</script>
</body>
与原生的js相比,这里不需要querySelector选择dom节点,因为上下文已经挂载到el上,@click简化了addEventListener
如果事件很复杂,可以封装成函数,将<script>标签中改为如下:
<script>
var app = new Vue({
el: "#main",
data: {
num: 0,
},
methods: {
addOne() {
this.num++
}
}
})
</script>
需要注意的是,在addOne()中如果不加this的话,函数会找一个全局的num.这里this可以穿透methods对象中找到data对象中的数据,因为这里有做一层代理(proxy)
