Vue_day01
1. 认识vue
1.1 什么是vue
(1)Vue是构建界面的渐进式的js框架
(2)只关注视图层， 采用自底向上增量开发的设计。
(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定
一句话:vue就是做界面的js框架 (jquery/easyui)
1.2vue怎么使用
(1)在项目里面 运行 npm install vue
(2)在页面引入vue.js
(3)测试代码
1 <body> 2 <div id="app"> 3 {{name}} 4 div> 5 <script> 6 new Vue({ 7 el:"#app", 8 data:{ 9 name:"xxxx" 10 } 11 }); 12 script>
1.3 el挂载
el:挂载,把vue这个对象 挂载到对应的标签上面去
el方式:
(1)id的方式进行挂载
1 <body> 2 <div id="app"> 3 {{name}} 4 div> 5 <script> 6 new Vue({ 7 el:"#app", 8 data:{ 9 name:"xxxx" 10 } 11 }); 12 script>
(2) class方法进行挂载
1 <body> 2 <div class="app"> 3 {{name}} 4 div> 5 <script> 6 new Vue({ 7 el:".app", 8 data:{ 9 name:"xxxx" 10 } 11 }); 12 script>
1.4 data数据
data:放字符串 对象 和数组 都OK
data: {
"show": true,
"hidden": false,
"score": 66
}
1.5 methods方法
方法methods:
methods:{
changeData(){
console.log(this.msg);
}
}
1.6 vue的生命周期
1.7 数据的双向绑定
1 <body> 2 <div id="app"> 3 <input type="text" v-model="msg" v-on:change="changeData"/> 4 <div> 5 {{msg}} 6 div> 7 div> 8 body> 9 <script> 10 var app = new Vue({ 11 el: "#app", 12 data: { 13 name: "信息", 14 msg: "test" 15 }, 16 methods:{ 17 changeData(){ 18 console.log(this.msg); 19 } 20 } 21 }); 22 script>
2.vue指令
2.1 v-for
循环
1 <body> 2 <div id="app"> 3 循环数组 4 <ul> 5 <li v-for="hobby in hobbys"> 6 {{hobby}} 7 li> 8 ul> 9 <hr> 10 循环对象 11 <ul> 12 <li v-for="u in user"> 13 {{u}} 14 li> 15 ul> 16 <hr/> 17 带索引循环数组 18 <ul> 19 <li v-for="(hobby,index) in hobbys"> 20 {{hobby}}==={{index}} 21 li> 22 ul> 23 <hr/> 24 循环对象 25 <ul> 26 <li v-for="(value, key, index) in user"> 27 {{key}} == {{value}} ---> {{index}} 28 li> 29 ul> 30 31 <hr/> 32 循环json数据 33 <table> 34 <thead> 35 <tr>idtr> 36 <tr>nametr> 37 <tr>agetr> 38 <tr>sextr> 39 thead> 40 <tbody> 41 <tr v-for="student in students"> 42 <td>{{student.id}}td> 43 <td>{{student.name}}td> 44 <td>{{student.age}}td> 45 <td>{{student.sex}}td> 46 tr> 47 tbody> 48 table> 49 div> 50 body> 51 <script> 52 var app = new Vue({ 53 el:"#app", 54 data: { 55 user: { 56 name: "德莱文", 57 age: 18, 58 sex: "男" 59 }, 60 hobbys: ["打篮球", "踢足球", "打羽毛球"], 61 students: [ 62 {id: 1, name: "刘备", age: 29, sex: "男"}, 63 {id: 2, name: "貂蝉", age: 30, sex: "女"}, 64 {id: 3, name: "吕布", age: 31, sex: "男"} 65 ] 66 } 67 }); 68 script>
2.2 v-bind
绑定的标签里面属性的值
1 <body> 2 <div id="app"> 3 <img width="100" src="img/11.jpg"/> 4 <img width="100" v-bind:src="imgSrc"> 5 <img width="100" :src="imgSrc"/> 6 <input type="text" name="username"/> 7 <input v-bind="props"/> 8 div> 9 body> 10 <script> 11 var app = new Vue({ 12 el: "#app", 13 data: { 14 imgSrc:"img/11.jpg", 15 props:{ 16 type:"text", 17 name: "username" 18 } 19 } 20 }); 21 script>
2.3 v-show
控制display这个属性
show show show ...hidden hidden hidden...if if if
2.4 v-if/else
如果不成立 ,在页面无法看到
1 <body> 2 <div id="app"> 3 <div v-if="age , 18">你还年轻，还可以玩一下div> 4 <div v-else-if="age > 20 && age < 60">小伙子，我这里有一本java的秘籍要不要看一看？div> 5 <div v-else> 6 可以退休啦~~ 7 div> 8 div> 9 body> 10 <script> 11 var app = new Vue({ 12 el: "#app", 13 data: { 14 "show": true, 15 "hidden": false, 16 "score": 66 17 } 18 }); 19 script>
2.5 v-model
控制标签里面value 完成双向绑定
1 <body> 2 <div id="app"> 3 绑定普通的字符串值 4 <input v-model="inputValue" /> 5 {{inputValue}} 6 7 <h1>绑定到type=checkbox的input表单元素h1> 8 打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/> 9 踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/> 10 data中的值:{{checkboxValue}} 11 12 <h1>绑定到type=radio的input表单元素h1> 13 打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/> 14 踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/> 15 data中的值:{{radioValue}} 16 17 <h1>绑定到文本域的值h1> 18 <textarea v-model="textAreaValue">textarea> 19 data中的值:{{textAreaValue}} 20 21 下拉的值 22 <select v-model="skills"> 23 <option value="rap">rapoption> 24 <option value="唱">唱option> 25 <option value="跳">跳option> 26 select> 27 {{skills}}> 28 div> 29 body> 30 <script> 31 var app = new Vue({ 32 el: "#app", 33 data: { 34 inputValue:"输入的text值", 35 checkboxValue:["踢足球"], 36 radioValue:"打篮球", 37 textAreaValue: "溜了溜了...", 38 sills:"唱" 39 40 } 41 }); 42 script>