*感谢B站up主狂神说Java,这里的代码均是根据视频中的代码复现的,有兴趣的可以看视频
https://www.bilibili.com/video/BV18E411a7mC?p=11
backGround:
VUE的新特性:组件化(AngularJS)和虚拟DOM(react).
VUE是基于SOC原则设计,所以只是单独的涉及view层。通讯需要借助其他的工具。
初识VUE:
下面展示一些 代码
。
// An highlighted block
//demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--第一个vue程序,重点理解mvvm的概念-->
<div id="app">
{
{
message }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello world"
}
});
</script>
</html>
//Demo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--第2个vue程序,重点学习if for的概念-->
<div id="app">
<h1 v-if="jk=='a'">A</h1>
<h1 v-else-if="jk=='b'">B</h1>
<h1 v-else="jk=='c'">C</h1>
<li v-for="(item,index) in items">{
{
item.message+index}}</li>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
jk:"a",
items:[{
message:"try first"},{
message:"try second"}],
}
});