Vue作为前端主流的框架之一,其基本的使用步骤如下
1、引入
初级阶段可以通过官网下载开发版本 [https://vuejs.org/js/vue.js],在相应的JS代码段引入
2、示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="hello">
//响应式原理的体现 输出 "hello shixue"
hello {{name}}
//输出一个无须列表 包含data中的moives所有数据
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
//实现了一个基本的计数功能
当前计数:{{counter}}
<button @click=increament>+</button>
<button @click=decreament>-</button>
</div>
**<script src="vue.js"></script>**
<script>
var app = new Vue({
el: "#hello",
data: {
name: 'shixue',
movies: ['明天会好的','你的姐姐','你的婚礼'],
counter: 0
},
methods: {
increament() {
this.counter++ //实例化对象的this指的是这个创建的这个实例化对象app 这里app已经被挂载到div上了,按钮可以生效。
},
decreament() {
this.counter--
}
}
})
</script>
</body>
</html>
3、Vue实例化对象的组成
1>el: 表示要挂载到哪一个HTML元素上,
2>data: 用于显示在浏览器页面的基本数据,相当于实例化对象的属性
3>methods: 相当于实例化对象的方法