vue的初步使用-EW帮帮网

一. vue的初步使用

1.引入相关依赖

 //<!-- 引入一个vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

2. 给出相应的数据

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box2">
    {{ msg }}
  </div>

  <div id="app">
    {{ msg }}
    <h1> {{ count }}</h1>

  </div>

  <div id="box3">
    {{ msg }}
  </div>
  <!-- 引入一个vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({

      // el用来绑定需要展示在那个盒子中
      // 通过el配置选择器，指定 vue 管理的是那个盒子
      el: '#app',
      // data 提供数据
      data:{
        // data中的数据是需要渲染的数据
        msg:'Hello World!',
        count:6666
      }
    })
  </script>
</body>


</html>

下图是效果图
在这里插入图片描述
从上图不难发现，只有通过el绑定的数据才能使用vue中的插值语法，同时vue是数据驱动类，数据发生变化视图也随着变化

二. Vue中常用的几个指令

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box" v-show="flag">我是v-show控制的盒子</div>
    <div class="box" v-if="flag">我是v-if控制的盒子</div>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

</body>
</html>

在这里插入图片描述
v-if，v-else,v-else-if它只会渲染最多一个满足条件的DOM元素，如下图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">
    <p v-if="gender===1">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
    <p v-else-if="score>=80">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="./vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender:1,
        score:90
      }
    })
  </script>

</body>
</html>

在这里插入图片描述

2. v-on

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="cnt--">-</button>
    <span>{{cnt}}</span>
    <!-- 方式一 -->
    <!-- v-on:事件名="内联语句" --> 
     <!-- 方式二 -->
     <!-- v-On:事件名=“methods中的函数名” -->
     <!-- @事件名="" -->
    <button @click="cnt++">+</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      // 用来提供数据
      data: {
        cnt:100
      },
      // 用来提供方法
      methods:{
        add(){
          this.cnt++
        }
      }
    })
  </script>
</body>
</html>

3. v-bind

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

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        class:"btn btn-default"
    }
});
<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>

绑定HTML Class

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

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

绑定内联样式

一、对象语法

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

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

二、数组语法

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

4.v-for

v-for常用于数据的渲染

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <li v-for="(item, index) in list">{{item}} {{index}}</li>
      <li v-for="item in list">{{item}}</li>
    </ul>
    
  </div>

  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨']
      }
    })
  </script>
</body>
</html>

5. v-model

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username:'',
        password:''
      },
      methods: {
        login(){
          console.log(this.password,this.username)
        },
        reset(){
          this.password='',
          this.username=''
        }
      },
    })
  </script>
</body>
</html>

vue的初步使用