vue的初步使用

一. vue的初步使用

1.引入相干依赖

1. //<!-- 引入一个vue文件 -->
2.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

复制代码

2. 给出相应的数据

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
10.   <div id="box2">
11.     {{ msg }}
12.   </div>
14.   <div id="app">
15.     {{ msg }}
16.     <h1> {{ count }}</h1>
18.   </div>
20.   <div id="box3">
21.     {{ msg }}
22.   </div>
23.   <!-- 引入一个vue文件 -->
24.   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
25.   <script>
26.     const app = new Vue({
28.       // el用来绑定需要展示在那个盒子中
29.       // 通过el配置选择器，指定 vue 管理的是那个盒子
30.       el: '#app',
31.       // data 提供数据
32.       data:{
33.         // data中的数据是需要渲染的数据
34.         msg:'Hello World!',
35.         count:6666
36.       }
37.     })
38.   </script>
39. </body>
41. </html>

复制代码

下图是效果图

从上图不难发现，只有通过el绑定的数据才气使用vue中的插值语法，同时vue是数据驱动类，数据发生变革视图也随着变革
二. Vue中常用的几个指令

1. v-show, v-if, v-else, v-else-if

起首我们先明白一点v-show和v-if的底层实现是不同的，v-show通常用于频繁切换的DOM元素，而v-if则适用条件渲染

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8.   <style>
9.     .box {
10.       width: 200px;
11.       height: 100px;
12.       line-height: 100px;
13.       margin: 10px;
14.       border: 3px solid #000;
15.       text-align: center;
16.       border-radius: 5px;
17.       box-shadow: 2px 2px 2px #ccc;
18.     }
19.   </style>
20. </head>
21. <body>
23.   <div id="app">
24.     <div class="box" v-show="flag">我是v-show控制的盒子</div>
25.     <div class="box" v-if="flag">我是v-if控制的盒子</div>
26.   </div>
27.   
28.   <script src="./vue.js"></script>
29.   <script>
30.     const app = new Vue({
31.       el: '#app',
32.       data: {
33.         flag: false
34.       }
35.     })
36.   </script>
38. </body>
39. </html>

复制代码

v-if，v-else,v-else-if它只会渲染最多一个满足条件的DOM元素，如下图

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
10.   
11.   <div id="app">
12.     <p v-if="gender===1">性别：♂ 男</p>
13.     <p v-else>性别：♀ 女</p>
14.     <hr>
15.     <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
16.     <p v-else-if="score>=80">成绩评定B：奖励周末郊游</p>
17.     <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
18.     <p v-else>成绩评定D：惩罚一周不能玩手机</p>
19.   </div>
20.   
21.   <script src="./vue.js"></script>
22.   <script>
24.     const app = new Vue({
25.       el: '#app',
26.       data: {
27.         gender:1,
28.         score:90
29.       }
30.     })
31.   </script>
33. </body>
34. </html>

复制代码

2. v-on

v-on用来绑定事件具体写法为 v-on:事件名=“” 可简写为 @事件名=“”

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
10.   <div id="app">
11.     <button v-on:click="cnt--">-</button>
12.     <span>{{cnt}}</span>
13.     <!-- 方式一 -->
14.     <!-- v-on:事件名="内联语句" -->
15.      <!-- 方式二 -->
16.      <!-- v-On:事件名=“methods中的函数名” -->
17.      <!-- @事件名="" -->
18.     <button @click="cnt++">+</button>
19.   </div>
20.   <script src="./vue.js"></script>
21.   <script>
22.     const app = new Vue({
23.       el: '#app',
24.       // 用来提供数据
25.       data: {
26.         cnt:100
27.       },
28.       // 用来提供方法
29.       methods:{
30.         add(){
31.           this.cnt++
32.         }
33.       }
34.     })
35.   </script>
36. </body>
37. </html>

复制代码

3. v-bind

v-bind用于绑定命据和元素属性
可简写为 ：
v-bind后面是：属性名=，我的理解是表示绑定这个属性，绑定之后，对应的值要去vue的数据里面找,当然也可以便是一个常数，这样就不用去data里找了。
当我们在控制台改变url时，对应也会变革。
相同的，我们还可以绑定图片src属性、超链接的class

1. var app = new Vue({
2.     el:'.app',
3.     data:{
4.         url:"https://www.baidu.com",
5.         imgsrc:"https://cn.vuejs.org/images/logo.png",
6.         class:"btn btn-default"
7.     }
8. });
9. <div class="app">
10.     <a v-bind:href="url" v-bind:class="klass">click me</a>
11.     <img v-bind:src="imgsrc">
12. </div>  

复制代码

绑定HTML Class

另外一种够可以传入一个对象，如下
对象的名active，表示要添加的类名，isActive是vue中的数据，表示在什么情况下添加该类名，对应为真才添加。

1. <div class="app">
2.     <a :class="{active:isActive}">click me</a>
3. </div>  

复制代码

绑定内联样式

一、对象语法
v-bind:style 的对象语法非常直观–非常像CSS，其实它是一个Javascript对象，CSS属性名的规范写法是用驼峰命名法

1. <div id="box1" :style="{color:activeColor, fontSize:size,textShadow:shadow}">就是帅</div>

复制代码

二、数组语法

1. <div id="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>

复制代码

4.v-for

v-for常用于数据的渲染

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
11.   <div id="app">
12.     <h3>小黑水果店</h3>
13.     <ul>
14.       <li v-for="(item, index) in list">{{item}} {{index}}</li>
15.       <li v-for="item in list">{{item}}</li>
16.     </ul>
17.    
18.   </div>
20.   <script src="./vue.js"></script>
21.   <script>
22.     const app = new Vue({
23.       el: '#app',
24.       data: {
25.         list: ['西瓜', '苹果', '鸭梨']
26.       }
27.     })
28.   </script>
29. </body>
30. </html>

复制代码

5. v-model

v-model 通常用于表单元素，数据的双向绑定

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
11.   <div id="app">
12.     账户：<input type="text" v-model="username"> <br><br>
13.     密码：<input type="password" v-model="password"> <br><br>
14.     <button @click="login">登录</button>
15.     <button @click="reset">重置</button>
16.   </div>
17.   <script src="./vue.js"></script>
18.   <script>
19.     const app = new Vue({
20.       el: '#app',
21.       data: {
22.         username:'',
23.         password:''
24.       },
25.       methods: {
26.         login(){
27.           console.log(this.password,this.username)
28.         },
29.         reset(){
30.           this.password='',
31.           this.username=''
32.         }
33.       },
34.     })
35.   </script>
36. </body>
37. </html>

复制代码