0
点赞
收藏
分享

微信扫一扫

Vue基础知识

微笑沉默 2022-01-22 阅读 64
vue.jsjavascript前端

目录

Vue简介

第一个Vue程序

v-text、v-html、v-on指令

v-show、v-if、v-bind指令

v-for、v-on补充、v-model指令

Vue简介

1.JavaScript框架

2.简化Dom操作

3.响应式数据驱动

第一个Vue程序

<!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>第一个Vue程序</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
、
    //过程：导入开发版本的Vue.js
    //      创建Vue实例对象，设置el属性和data属性
    //      使用简洁的模板语法把数据渲染到页面上
</script>  
</body>
</html>

vue官网：Vue.js

 el：挂载点

Vue实例的作用范围是？

Vue会管理el选项命中的元素及其内部的后代元素。

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用id选择器。

是否可以设置其他的dom元素？

可以使用其他的双标签，不能使用HTML和BODY。

Data数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法

v-text、v-html、v-on指令

内容绑定、事件绑定

v-text指令的作用是：设置标签的内容。

默认写法会替换全部内容，使用差值表达式{{}}可以替换值对内容，内部支持写表达式。

v-html指令的作用是：设置元素的innerHTML。

内容中有html结构会被解析为标签。

v-text指令无论内容是什么，只会解析为文本。

解析文本使用v-text，需解析html结构使用v-html

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>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <!-- 1. 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //3.创建vue实例
        var app = new Vue({
            el:"#app",
            data:{
                food:"红烧排骨"
            },
            methods:{
                doIt:function() {
                    alert("go");
                },
                changeFood:function() {
                    this.food+="好好吃！"
                }
            }
        })

        //v-on指令的作用是：为元素绑定事件
        //事件名不需要写on
        //指令可以简写为@
        //绑定的方法定义在methods属性中
    </script>
</body>
</html>

点击<h2>标签内容显示👇

 计数器案例👇

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 480px;
            height: 80px;
            margin: 200px auto;
        }
        .input-num{
            height: 100%;
            display: flex;
            border-radius: 10px;
            box-shadow: 4px 4px 4px #adadad;
            border: 1px solid #c7c7c7;
        }
        .input-num button{
            width: 150px;
            height: 100%;
            font-size: 40px;
            color: #ad2a27;
            cursor: pointer;
        }
        .input-num span{
            text-align: center;
            line-height: 80px;
            flex: 1;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 计数器功能区域 -->
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:1,
            // min:0,
            // max:10
        },
        methods:{
            add:function() {
                if(this.num<10){
                    this.num++;
                }else{
                    alert("别点啦，最大啦");
                }
            },
            sub:function() {
                if(this.num>0){
                    this.num--;
                }else{
                    alert("别点啦，最小啦");
                }
            }
        }
    })

    //1.data中定义数据：比如num
    //2.methods中添加两个方法：比如add(递增)，sub(递减)
    //3.使用v-text将num设置给span标签
    //4.使用v-on将add，sub分别绑定给+，-按钮
    //5.累加的逻辑：小于10累加，否则提示
    //6.递减的逻辑：大于0递减，否则提示

    //创建Vue示例时：el(挂载点),data(数据),methods(方法)
    //v-on指令的作用是绑定事件简写为@
    //方法中通过this，关键字获取data中的数据
    //v-text指令的作用是：设置元素的文本值，简写为{{}}
    //v-html指令的作用是：设置元素的innerHTML
</script>
</body>
</html>

v-show、v-if、v-bind指令

显示切换、属性绑定

v-show指令的作用是：根据真假切换元素的显示状态。

原理是修改元素的display，实现显示隐藏

指令后面的内容，最后都会解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

v-if指令的作用是：根据表达式的真假切换元素的显示状态。

本质是通过操纵dom元素来切换显示状态

表达式的值为true，元素存在于dom树中；为false，从dom树中移除

频繁的切换v-show，反之使用v-if，前者的切换消耗小

v-bind指令的作用是：为元素绑定属性。

完整写法是v-bind：属性名

简写可直接省略v-bind，只保留: 属性名

图片切换案例👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图片切换</title>
  <style>
      * {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #c9c9c9;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent white;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 700px;
  height: 458px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
  </style>
</head>
<body>
  <div id="mask">
    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳创维校区环境
      </h2>
      <!-- 图片 -->
      <img :src="imgArr[index]" alt="" />
      <!-- 左箭头 -->
      <!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
        <img src="./images/prev.png" alt="" />
      </a> -->
      <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
         
        ],
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })

    //列表数据使用数组保存
    //v-bind指令可以设置元素属性，比如src
    //v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
  </script>
</body>
</html>

v-for、v-on补充、v-model指令

v-for指令的作用是：根据数据生成列表结构。

数组经常和v-for结合使用

语法是(item, index) in 数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}黑马程序员校区:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "广州", "深圳"],
                vegetables: [
                    { name: "西兰花炒蛋" },
                    { name: "蛋炒西蓝花" }
                ]
            },
            methods: {
                add: function () {
                    this.vegetables.push({ name: "花菜炒蛋" });
                },
                remove: function () {
                    this.vegetables.shift();
                }
            },
        })

    //v-for指令的作用是：根据数据生成列表结构
    //数组经常和v-for结合使用
    //语法是(item,index) in数据
    </script>
</body>

</html>

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符 可以对事件进行限制

.enter可以限制触发的按键为回车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on补充</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods: {
                doIt:function(p1,p2){
                    console.log("做it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没");
                }
            },
        })

    </script>
</body>

</html>

 

 v-model指令的作用：便携的设置和获取表单元素的值。

绑定的数据会和表单元素值相关联

绑定的数据⬅➡表单元素的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"黑马程序员"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM:function(){
                    this.message ="酷丁鱼";
                }
            },
        })

    
    </script>
</body>
</html>

 

举报

相关推荐

【vue】vue基础知识

vue.jsjavascript前端

vue基础知识

vuejavascript

vue 的基础知识

javascript

vue基础知识笔记

vue.js前端

VUE基础知识（二）

vue.js

vue基础知识2

javascript

vue组件之前基础知识

vue.js前端

vue3基础知识

vue.js前端javascript

Vue2基础知识

vue.jsjavascript前端

Vue基础知识和案例展示

htmlnode.jscssvueNode.js前端开发
0 条评论