不积跬步，无以至千里；不积小流，无以成江海。
Vuejs语言基础
- 第一个Vuejs程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//let(变量),const(常量)
//编程范式：声明式编程
const app = new Vue({
el:'#app',//用于挂载要管理的元素
data:{ //定义数据
message:'Hello vuejs！',
name:'Jiang'
}
})
</script>
</body>
</html>
1. 首先创建了一个Vue对象。
2. 创建Vue对象时，传入了一些options：{}
a. {}中包含了el属性：该属性决定了这个Vue对象挂载到哪个元素上。这里，我们挂载到了id为app的元素上
类型：string | HTMLElement
作用：决定之后Vue实例会管理哪个DOM。
b. {}中包含了data属性：该属性中通常存储一些数据
类型：Object | Function（组件中data必须是一个函数）
作用：Vue实例对应的数据对象。
√ 这些数据可以是我们直接定义出来的。
√ 也可能是来自网络，从服务器加载的。
- Vue列表显示：
展示一个更加复杂的数据：数据列表。
注意使用v-for指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movie">{{item}}</li>
</ul>
<!-- {{movie}}-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好呀！',
movie:['星际穿越', '大话西游', '盗梦空间']
}
})
</script>
</body>
</html>
- 小案例：计数器
点击“+”，计数器加1；
点击“-”，计数器减1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数： {{counter}}</h2>
<button @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>
新属性：methods，该属性用于在Vue中定义方法。
类型：{[key: string]: Function }
作用：定义Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
新指令：@click，该指令用于监听某个元素的监听事件，并且需要指定当发生点击时，执行方法（通常是methods中定义的方法）
