Vue基础(Vue基本使用示例)

vue使用

vue官网
可以选择直接引用或下载,本文微为了方便直接引用js,仅仅是为了学习的话下面的生产环境已经满足我们的需求,所以用生产环境就好了

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在这里插入图片描述

基本结构

<div id="app"></div>
<script>
  let vue = new Vue({
    // 挂载点,所有的Vue的方法和属性都必须在对应的挂载根标签内部使用
    el: "#app",
    // 数据管理中心,所有的Vue的数据都在data对象中
    data: {},
    // 方法,对应的Vue事件方法清单
    methods: {},
    // 生命周期函数,Vue实例在被创建之前经过的一系列初始化过程
    created: {},
  });
</script>

常用指令

vue插值语法

<div id="app">{{a >= 100 ? 20 : 10}}</div>
<script>
  let vue = new Vue({
    el: "#app",
    data: {
      a: 100,
    },
    methods: {},
  });
</script>

在这里插入图片描述

v-if

<div id="app">
  <h2>{{boo}}</h2>
  <p v-if="boo >= 0 && boo <= 5">小于5</p>
  <p v-else-if="boo >= 6 && boo <= 10">小于10</p>
  <p v-else-if="boo >= 11 && boo <= 15">小于15</p>
  <p v-else-if="boo >= 16 && boo <= 20">小于20</p>
  <p v-else="boo >= 21">大于20</p>
  <p v-if="boo">我是第一行dom元素</p>
  <!-- 因为数值一直大于0,所以第二行不会出现 -->
  <p v-if="!boo">我是第二行dom元素</p>
  <p v-if="boo == 5">我是第三行dom元素</p>
  <!-- 按五下按钮后第三行会出现 -->
  <button @click="add">按我加1</button>
</div>
<script>
  let vue = new Vue({
    el: '#app',
    data: {
      // 也可用数值,0为false,非0为true
      //   boo: false,
      boo: 1,
    },
    methods: {
      add() {
        this.boo++
      },
    },
  })
</script>

在这里插入图片描述

v-show

    <div id="app">
      <h2>{{boo}}</h2>
      <!-- v-show 控制节点的display属性来显示和隐藏标签 并不下树 -->
      <p v-show="boo >= 5">大于5</p>
      <button @click="add">按我加1</button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          // 也可用数值,0为false,非0为true
          //   boo: false,
          boo: 1,
        },
        methods: {
          add() {
            this.boo++;
          },
        },
      });
    </script>

点击按钮,数值大于5时显示p标签
在这里插入图片描述

v-for

    <div id="app">
      <ul>
        <!-- item 表示对象的内容 -->
        <!-- key 表示的是对象key键值名称 -->
        <!-- index表示的是当前的obj的下标索引值 -->
        <li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
      </ul>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          arr: ["苹果", "橘子", "香蕉", "栗子"],
        },
      });
    </script>

在这里插入图片描述

v-for遍历对象
    <div id="app">
      <ul>
        <!-- item 表示对象的内容 -->
        <!-- key 表示的是对象key键值名称 -->
        <!-- index表示的是当前的obj的下标索引值 -->
        <li v-for="(item,key,index) in obj" :key="index">
          {{index}}-{{key}}:{{item}}
        </li>
      </ul>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          obj: {
            name: "小明",
            age: "17岁",
            height: "175cm",
            sex: "男",
            hobby: "打篮球",
          },
        },
      });
    </script>

在这里插入图片描述

v-for遍历json
    <div id="app">
      <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>身高</th>
        </tr>
        <tr v-for="(item, index) in arr" :key="index">
          <!-- JSON中的姓名 -->
          <td>{{item.name}}</td>
          <!-- JSON中的年龄 -->
          <td>{{item.age}}</td>
          <!-- JSON中的性别 -->
          <td>{{item.sex}}</td>
          <!-- JSON中的身高 -->
          <td>{{item.height}}</td>
        </tr>
      </table>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          arr: [
            { name: "小明", age: "17", sex: "男", height: "168" },
            { name: "小红", age: "18", sex: "女", height: "160" },
            { name: "小周", age: "19", sex: "男", height: "178" },
            { name: "小刚", age: "20", sex: "男", height: "158" },
          ],
        },
      });
    </script>

在这里插入图片描述

v-for遍历嵌套
    <div id="app">
      <table>
        <tr v-for="(i, index) in number" :key="i">
          <td v-for="(j, index) in i" :key="j">{{i}}*{{j}}={{i*j}}</td>
        </tr>
      </table>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          number: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      });
    </script>

在这里插入图片描述

v-text和v-html

    <div id="app">
      <!-- {{}}和v_text渲染内容,不识别标签 -->
      <p>{{a}}</p>
      <p v-text="a"></p>
      <p v-html="a"></p>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: "<h1>我是要插值的内容</h1>",
        },
      });
    </script>

在这里插入图片描述

v-cloak

    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  <body>
    <!-- v-cloak属性不会渲染编译前的文本 -->
    <!-- 不加v-cloak加载时会渲染一遍,字体会闪现一下 -->
    <div id="app" v-cloak>
      <p>{{a}}</p>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: "我是渲染的指令v_cloak",
        },
      });
    </script>

在这里插入图片描述

v-once

    <div id="app" v-cloak>
      <!-- v-once不会改变视图,但是数据还是在变化 -->
      <p v-once>{{a}}</p>
      <p>{{a}}</p>
      <button @click="add"></button>
      <button @click="minus"></button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          add() {
            this.a++;
            console.log(this.a);
          },
          minus() {
            this.a--;
            console.log(this.a);
          },
        },
      });
    </script>

在这里插入图片描述

v-pre

    <div id="app" v-cloak>
      <!-- v-pre直接打印文本内容,不会再进行编译 -->
      <p v-pre>{{a}}</p>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
      });
    </script>

在这里插入图片描述

v-on

    <div id="app" v-cloak>
      <p>{{a}}</p>
      <!-- v-on两种写法  可以用@符号或v-on: -->
      <button @click="add(5)"></button>
      <button v-on:click="minus"></button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          // 可以传参
          add(num) {
            this.a += num;
          },
          minus() {
            this.a--;
          },
        },
      });
    </script>

在这里插入图片描述

v-bind

    <div id="app" v-cloak>
      <div>
        <!-- v-bind:将普通的w3c属性变为动态属性,让属性具有动态能力 -->
        <!-- <img v-bind:src="'images/'+url+'.jpg'" alt="" /> -->
        <img :src="'images/'+url+'.jpg'" alt="" />
      </div>
      <!-- v-on两种写法  可以用@符号或v-on: -->
      <button @click="add"></button>
      <button v-on:click="minus"></button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          url: 1,
        },
        methods: {
          // 可以传参
          add(num) {
            if (this.url >= 7) {
              this.url = 0;
            }
            this.url++;
          },
          minus() {
            if (this.url <= 1) {
              this.url = 8;
            }
            this.url--;
          },
        },
      });
    </script>

在这里插入图片描述

v-bind扩展
    <style>
      p {
        width: 200px;
        height: 200px;
        background: blue;
      }
      .red {
        background: red;
      }
      .pink {
        background: pink;
      }
    </style>
    <div id="app" v-cloak>
      <div>
        <p :class="{red:a >= 5,pink: a >= 10}" :style="{width:b+'px'}">{{a}}</p>
      </div>
      <!-- v-on两种写法  可以用@符号或v-on: -->
      <button @click="add"></button>
      <button v-on:click="minus"></button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 1,
          b: 100,
        },
        methods: {
          // 可以传参
          add(num) {
            this.a++;
            this.b++;
          },
          minus() {
            this.a--;
            this.b--;
          },
        },
      });
    </script>

在这里插入图片描述

v-model

    <div id="app" v-cloak>
      <!-- v-mode:双向数据绑定 -->
      <h2>问卷调查</h2>
      <p>姓名:<input type="text" v-model="name" /></p>
      <p>
        性别:
        <input type="radio" name="sex" value="" v-model="sex" /><input type="radio" name="sex" value="" v-model="sex" /></p>
      <p>
        爱好:
        <input
          type="checkbox"
          name="hobby"
          value="打篮球"
          v-model="hobby"
        />打篮球
        <input type="checkbox" name="hobby" value="跳舞" v-model="hobby" />跳舞
        <input type="checkbox" name="hobby" value="读书" v-model="hobby" />读书
      </p>
      <p>
        籍贯:
        <select name="native" id="" v-model="native">
          <option value="河北">河北</option>
          <option value="河南">河南</option>
          <option value="重庆">重庆</option>
          <option value="北京">北京</option>
          <option value="四川">四川</option>
          <option value="山东">山东</option>
          <option value="湖南">湖南</option>
          <option value="香港">香港</option>
          <option value="山西">山西</option>
        </select>
      </p>
      <p>
        您填写的表单内容为:姓名:{{name}},性别:{{sex}},爱好:{{hobby}},籍贯:{{native}}
      </p>
      <button @click="submit">提交</button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          name: "",
          sex: "男",
          hobby: [],
          native: "河北",
        },
        methods: {
          submit() {
            // 汇总信息到后端
            let obj = {
              name: this.name,
              sex: this.sex,
              hobby: this.hobby,
              native: this.native,
            };
            console.log(obj);
          },
        },
      });
    </script>

在这里插入图片描述

修饰符

事件修饰符

self
    <style>
      .outer {
        width: 180px;
        height: 180px;
        background: gold;
        margin: 100px auto;
        padding: 30px;
        border-radius: 50%;
      }
      .outer .center {
        width: 120px;
        height: 120px;
        padding: 30px;
        background: pink;
        border-radius: 50%;
      }
      .outer .center .inner {
        width: 120px;
        height: 120px;
        background: green;
        border-radius: 50%;
      }
    </style>
    <div id="app">
      <!-- .self修饰符的作用只是点击元素本身的时候才能触发事件,不接受冒泡上来的事件,也不能阻止事件冒泡 -->
      <div class="outer" @click.self="outer">
        <div class="center" @click.self="center">
          <!-- 给事件加上.stop修饰符能阻止默认事件的发生,阻止冒泡 -->
          <!-- <div class="inner" @click.stop="inner"></div> -->
          <div class="inner" @click.self="inner"></div>
        </div>
      </div>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        methods: {
          outer() {
            console.log("外层");
          },
          center() {
            console.log("中间层");
          },
          inner() {
            console.log("内层");
          },
        },
      });
    </script>

在这里插入图片描述

prevent
    <div id="app">
      <!-- .prevent阻止默认事件,不跳转页面 -->
      <a href="http://www.baidu.com" @click.prevent="alertDialog"
        >点击跳转到百度</a
      >
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        methods: {
          alertDialog() {
            alert("我是超连接");
          },
        },
      });
    </script>

在这里插入图片描述

capture
    <style>
      .outer {
        width: 180px;
        height: 180px;
        background: gold;
        margin: 100px auto;
        padding: 30px;
        border-radius: 50%;
      }
      .outer .center {
        width: 120px;
        height: 120px;
        padding: 30px;
        background: pink;
        border-radius: 50%;
      }
      .outer .center .inner {
        width: 120px;
        height: 120px;
        background: green;
        border-radius: 50%;
      }
    </style>
    <div id="app">
      <!-- capture 对事件捕获的监听 -->
      <div class="outer" @click.capture="outer">
        <div class="center" @click.capture="center">
          <div class="inner" @click="inner"></div>
        </div>
      </div>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        methods: {
          outer() {
            console.log("外层");
          },
          center() {
            console.log("中间层");
          },
          inner() {
            console.log("内层");
          },
        },
      });
    </script>

在这里插入图片描述

once
    <div id="app">
      <p>{{a}}</p>
      <!-- once:事件只触发一次 -->
      <button @click.once="add"></button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          add(event) {
            this.a++;
            console.log(this.a);
          },
        },
      });
    </script>

在这里插入图片描述

按键修饰符

    <div id="app">
      <!-- .keydown,keyup 32指代空格==space -->
      <!-- 按空格时,值会加 -->
      <p>{{a}}</p>
      <input type="text" @keydown.32="add"></input>
      <!-- <input type="text" @keydown.space="add"></input> -->
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
            add(){
                this.a++
                console.log(event)
            },
        },
      });
    </script>

在这里插入图片描述

系统修饰符

    <div id="app">
      <!-- @click.ctrl="add" 按住ctrl加鼠标点击才触发事件 ,可以有其他的按键组合 -->
      <!-- @click.ctrl.exact="add" 按住ctrl加鼠标点击才触发事件 ,不能有其他的按键组合 -->
      <!-- 常用的系统修饰符 alt,ctrl,shift,meta(windows系统是windows键) -->
      <p>{{a}}</p>
      <input type="button" value="" @click.ctrl="add" />
      <p>{{a}}</p>
      <!-- 精确匹配 -->
      <input type="button" value="" @click.ctrl.exact="add" />
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          add() {
            this.a++;
            console.log(event);
          },
        },
      });
    </script>

在这里插入图片描述

鼠标按键修饰符

    <div id="app">
      <p>{{a}}</p>
      <!-- .right 鼠标右键  .prevent 阻止默认事件 单击鼠标右键会触发浏览器默认事件,需要清除掉 -->
      <!-- .middle 单机滚轮事件 -->
      <input type="button" value="" @click.right.prevent="add" />
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          add() {
            this.a++;
            console.log(event);
          },
        },
      });
    </script>

鼠标右键点击增加数值
在这里插入图片描述

表单修饰符

    <div id="app">
      <!-- lazy 输入框失去焦点后才进行数据绑定 -->
      <!-- number 将内容转化为数字类型,默认输入字符串类型。非数字不会输入进表单 -->
      <!-- trim 过滤首尾空格 -->
      <p>lazy 输入框失去焦点后才进行数据绑定</p>
      <input type="text" v-model.lazy="a" />
      <p>
        number 将内容转化为数字类型,默认输入字符串类型。非数字不会输入进表单
      </p>
      <input type="text" v-model.number="a" />
      <p>trim 过滤首尾空格</p>
      <input type="text" v-model.trim="a" />
      <p>{{a}}</p>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          a: 100,
        },
        methods: {
          add() {
            this.a++;
            console.log(event);
          },
        },
      });
    </script>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值