1.vue的含义是什么？
Vue（发音为/vjuː/，类似于视图）是用于构建用户界面的渐进式框架。与其他单片框架不同，Vue是从头开始设计的，可逐步采用。核心库仅侧重于视图层，易于获取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue完全能够为复杂的单页应用程序提供动力。
2.引入的两种方法：
script引入 <script src="js/vue.js" > </script>
git的安装，在Git Bash Here里面输入（$ npm install vue）;
3.js的三种框架：
①vue ②angular ③react
get安装指令：
npm空格 install安装 vue
4.用vue输入hello vue
eg：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'> {{msg}} </div>
<script src='[js/vue.js](js/vue.js)'></script>
<script>
new Vue({ //element元素
el:'#itany',
data:{//写数据
msg:'hello vue'
}
})
</script>
</body>
</html>
会显示：hello vue
5141b74f543a4c01ab757fb9b7b5d976.jpeg
5.vue里面v-for的使用例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='itany'>
{{msg}}
{{num}}
{{arr}}
{{obj}}
<ul>
<li v-for="val in arr">{{val}}</li>
<li v-for="val in obj">{{val}}</li>
<li v-for="(val,index) in arr">{{index}}=={{val}}</li>
<li v-for="(val,index) in obj">{{index}}=={{val}}</li>
<li v-for="val in arrs">{{val.num}}--{{val.pname}}--{{val.price}}</li>
</ul>
</div>
<script src="[js/vue.js](js/vue.js)"></script>
<script>
new Vue({//element元素
el:'#itany',
data:{//写数据
msg:'Hello Vue',
num:12,
arr:[1,2,3,4,5,6,7,8,9],
obj:{name:'jack',age:18},
arrs:[
{num:1,pname:"香蕉",price:3},
{num:2,pname:"苹果",price:4},
{num:3,pname:"西瓜",price:0.3}
]
}
})
</script>
</body>
</html>
屏幕显示：
Hello Vue
12
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
{ "name": "jack", "age": 18 }
1
2
3
4
5
6
7
8
9
jack
18
0==1
1==2
2==3
3==4
4==5
5==6
6==7
7==8
8==9
name==jack
age==18
1--香蕉--3
2--苹果--4
3--西瓜--0.3
6.vue中table的使用：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width:300px;
text-align: center;
}
</head>
<body>
<div id='itany'>
<table border="1" cellspacing="0">
<thead>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</thead>
<tr v-for="val in arrs">
<td>{{val.num}}</td>
<td>{{val.pname}}</td>
<td>{{val.price}}</td>
</tr>
</table>
<hr>
<table border="1" cellspacing="0">
<thead>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</thead>
<tr v-for="(val,index) in ars">
<td>{{index+1}}</td>
<td>{{val.pname}}</td>
<td>{{val.price}}</td>
</tr>
</table>
</div>
<script src="[js/vue.js](js/vue.js)"></script>
<script>
new Vue({ //element元素
el:'#itany',
data:{ //写数据
arrs:[
{num:1,pname:"香蕉",price:3},
{num:2,pname:"苹果",price:4},
{num:3,pname:"西瓜",price:0.3}
],
ars:[
{pname:"香蕉",price:3},
{pname:"苹果",price:4},
{pname:"西瓜",price:0.3}
]
}
})
</script>
</body>
</html>
屏幕显示:
image.png
网友评论