VUE2写法
（为何写VUE2？后面会写VUE3【水一水】，赛博上坟。2023年停止维护，不禁感慨知识迭代【贬值】速度之快，缅怀，哀悼。）
在VS code中创建heoolworld.html，然后编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是我第一个VUE.js案例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue.js'
}
})
</script>
</body>
</html>
代码解析
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
引入vue.js核心文件，引入后就会得到一个Vue2构造器，用来创建Vue2实例。
<div id="app">
为元素设置id，用来作为Vue2实例控制的元素。
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'Hello Vue.js'
}
})
</script>
第2行创建了一个Vue2实例，保存为vm（含义为ViewModel）；
第3行的el表示当前vm实例要控制的页面区域，即id为app的元素；
第4行的data属性用来存放el中要用到的数据；在第5行设置了data对象的属性msg为“Hellow Vue2.js”。
<p>{{msg}}</p>
通过{{}}插值表达式，把data数据渲染到页面。修改页面中id为app的根容器的代码。
核心原理
- el:"#app"
找到页面中id=app的盒子，Vue2只管控制这个盒子内部
- data
存放所有变量（文字、数字、列表）
- {{变量名}}
插值语法，把data里的数据显示到页面
入门案例
1.多变量显示
<div id="app">
<p>名字：{{ name }}</p>
<p>年龄：{{ age }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{ name:"小王", age:20
}
})
</script>
2.点击事件@click
<div id="app">
<p>计数：{{ num }}</p>
<button @click="add">点我+1</button>
</div>
<script>
new Vue({
el:'#app',
data:{
num:0
},
methods:{
add(){
this.num++
}
}
})
</script>
3.双向绑定v-model(表单神器)
<div id="app">
<input type="text" v-model="text">
<p>你输入的：{{ text }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{ text:""
}
})
</script>
4.循环列表v-for
<div id="app">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
list:["Java","Vue","前端","后端"]
}
})
</script>
总结
插值语法{{}}
常用指令：
- v-texty/v-html
- v-for循环
- v-if/v-show显示隐藏
- @click点击事件
- v-model双向绑定
