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
npm空格 install安装 vue安装指令
4.用vue输入hello vue
eg:
{{msg}}
js/vue.js'>
new Vue({ //element元素 Element对象表示HTML里的元素
el:'#itany',
data:{ //写数据
msg:'hello vue'
}
})
显示屏会显示:hello vue
5.vue里面v-for的使用例子:
{{msg}}
{{num}}
{{arr}}
{{obj}} //{}代表对象 {{}}会和下面的相联系
{{val}}
{{val}}
{{index}}=={{val}}
{{index}}=={{val}}
{{val.num}}--{{val.pname}}--{{val.price}}
js/vue.js">
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}
]
}
})
显示屏显示的样子:
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的使用:
Title
table{
width:300px;
text-align: center;
}
编号
名称
价格
{{val.num}}
{{val.pname}}
{{val.price}}
编号
名称
价格
{{index+1}}
{{val.pname}}
{{val.price}}
js/vue.js">
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}
]
}
})
显示: