vue_day01

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

<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

(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>id</tr>
36             <tr>name</tr>
37             <tr>age</tr>
38             <tr>sex</tr>
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这个属性

<body>
<div id="app">
    <div v-show="show">show show show ...</div>
    <div v-show="hidden">hidden hidden hidden...</div>
    <div v-show="score > 80">if if if</div>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":false,
            "score":66
            }
    });
</script>

　　

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">rap</option>
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>
posted @ 2019-12-28 20:48  dyier  阅读(136)  评论(0)  编辑  收藏  举报