Vue基础（Vue基本使用示例）

最新推荐文章于 2022-08-29 10:34:49 发布
最新推荐文章于 2022-08-29 10:34:49 发布
阅读量301 收藏 2
点赞数 3
分类专栏： 前端 文章标签： vue.js html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thshy/article/details/117393241
版权

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>

在这里插入图片描述

condaZL
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue基础入门及示例
08-22
此为学习Vue官网基础的示例代码
Vue脚手架简单例子
贝贝琼的博客
05-15 1359
大家好，最近开始学vue，从搭建环境开始记录，菜鸟级搭建环境碰到很很多问题持续懵逼，最后摸索着搭好了最简单的例子。。。 1.首先安装nodejs Node.js 安装包下载地址为：https://nodejs.org/en/download/。 根据自己的系统下载，我的是Windows Installer (.msi) 64-bit； 安装步骤除了选择安装地址，傻瓜式安装一键到底。实在要看的可以...
vue基础学习
qq_40759995的博客
07-20 151
vue的基础学习 持续增加新内容 首先是对于vue的认识 在刚开始阶段对于前端接触较少 对于vue这种前端框架不是很明白 随手记下学习的知识 从最基础的开始 创建vue的对象 let vue =new vue({ el:'#app' }); el是一个必不可少的选项，用来指明vue实例的挂载目标 通过创建的实例对象对于内容区域进行指定 <div id="app"> <p>{{hello}}</p> </div>...
Vueday01
PaceMak的博客
03-31 170
> ### 1.简介： > > ​ Vue是一套用于构建用户界面的**渐进式框架**。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与***现代化的工具链***以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用--index.html,页面跳转用的vue插件路由来实现跳转。 > > vue特点 > > ​ 1.前端三大主...
【vue的基础使用】
qq_51076413的博客
03-27 2389
vue的基础使用、vue创建项目、创建vue项目、
vue常用指令（二）
小橘的博客
08-29 252
vue常用指令:v-on、v-bind、v-model、v-once。
vue基础知识一
m0_56232007的博客
06-24 423
VUE基础 1、vue是什么？ 目前前端有三个非常流行的框架，非别是angularjs,reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。 其它框架的关联 借鉴angular的模板和数据绑定技术 借鉴react的组件化和虚拟DOM技术 基本概念 vue.js的官方文档中说vue是渐进式JavaScript框架。我们来一个一个解释其中的概念。 渐进式 vue全家桶其实是包含很多vue的扩展插件的，比如以下。 vue-cli: vue脚手架 vu
Vue 基础语法 实例演示 示例代码
最新发布
07-17
Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例演示 示例代码Vue 基础语法 实例...
Vue瀑布流插件的使用示例
12-29
我自己写的一个的Vue瀑布流插件，列数自适应，不用设置每个卡片的高度。 测试页面：Page.vue 模板页面：WaterFollow.vue 和 WFColumn.vue 在Page.vue中，修改itemW的值，设置每列的最小宽度。例如：itemW=”200″...
Vue中使用Sortable的示例代码
08-27
"Vue中使用Sortable的示例代码" 在Vue中使用Sortable的示例代码，主要介绍了如何在Vue项目中使用Sortable库来实现拖拽排序的功能。Sortable库是一个开源的JavaScript库，提供了拖拽排序的功能，可以与Vue结合使用来...
vue的简单使用1
星月昭铭的博客
04-30 191
vue的简单使用1 最近在看vue，所以就把自己写的笔记上传一下。 Vue中的属性 el 需要控制的区域，如果是id就要加#，class就加. data是属性 就是放数据的地方 还有个methods，是放函数的地方 let vue1 = new Vue({ el: '#vueH', data : { "...
Vue基础第一天
qq_26597143的博客
06-21 665
VUE基础 1、vue是什么？ 目前前端有三个非常流行的框架，非别是angularjs,reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。 其它框架的关联 借鉴angular的模板和数据绑定技术 借鉴react的组件化和虚拟DOM技术 基本概念 vue.js的官方文档中说vue是渐进式JavaScript框架。我们来一个一个解释其中的概念。 渐进式 vue全家桶其实是包含很多vue的扩展插件的，比如以下。 vue-cli: vue脚手架
vue基础指令2
sjs1766349405的博客
12-01 324
五、属性绑定 语法： v-bind:属性名=值 或者:属性名=值 <div id="app"> <a :href="url">跳转</a> <button @click="fn">更改跳转地址</button> </div> <script> var vue = new Vue({ el: "#app", data: {
vue之页面渲染
一米阳光
11-16 4133
在我们利用脚手架搭建项目的时候，main.js new Vue({ store, router, render: h => h(App) }).$mount('#app') 这是我一个项目中的，和实际可能有一点不一样，不过意思雷同。 new 一个Vue对象，然后挂载$mount方法，通过自定义Render方法、template、el等生成Render函数， 我这里使用的
VUE动态创建使用组件、覆盖根组件
博客简介
07-15 686
<div id="app"> app根组件 </div> var app = new Vue({ el: '#app', data() { return { myArray: [{id:1, name: 'aa'}], myArray2: [] } }, methods: { }, }); let MyMsg = Vue.extend({ template: '<div>这是我的组件，动.
Vue进阶—new Vue()时发生了什么
webchang的博客
02-27 4019
new Vue()时发生了什么，源代码解析
Vue入门学习（一）——var vm = new Vue(）修改vm.site错写成vm.data.site
lseap的博客
05-18 5811
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"&...
vue基础（1）——数据绑定，事件，事件修饰符
WannaRunning的博客
03-22 172
vue中使用new Vue() 的方式可以实现数据到页面元素的双向绑定。 使用Vue内的el参数绑定标签的id建立关联，data参数定义标签需要绑定的数据，methods参数定义函数集合 标签内使用{{field}} 绑定数据到标签内； 标签内使用 v-model="field" 可以实现标签到数据model的双向绑定； 按钮标签使用 v-on:click="函数或简单代码逻辑" 可以实现点击事件。 <!DOCTYPE html> <html lang="en"> .
Vue环境搭建与基本使用指南
本文档主要介绍了如何安装Vue.js开发环境，包括Vue的基本使用以及Node.js的配置步骤。Vue.js是一个轻量级的前端框架...通过学习，读者应能了解Vue的基本用法，并能独立配置Node.js环境，为后续的Vue项目开发打下基础。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值