1. Toy模板网首页
  2. > Toy博客

Vue学习Day1——小案例快速入门Vue指令

7月前 作者：wangkay88 分类：Toy博客 阅读(26) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue学习Day1——小案例快速入门Vue指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue简介

概念：是一套 构建用户界面 的 渐进式 框架
Vue2官网：https://v2.cn.vuejs.org/

1、什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

  1. Vue核心包开发

    场景：局部模块改造

  2. Vue核心包&Vue插件&工程化

    场景：整站开发

二、创建Vue实例

Vue学习Day1——小案例快速入门Vue指令,前端,vue.js,学习,javascript
核心步骤（4步）：

  1. 准备容器
  2. 引包（官网） — 开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 指定配置项，渲染数据
    1. el:指定挂载点
    2. data提供数据

三、插值表达式{{}}

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

1.作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.总结

1.插值表达式的作用是什么
利用表达式进行插值，将数据渲染页面中

2.语法是什么
{{ 表达式 }}

3.插值表达式的注意事项

  • 使用的数据要存在（data）
  • 支持的是表达式，而非语句if、for等
  • 不能在标签属性里面使用

四、响应式特性

1、什么是响应式？

简单理解就是数据变，视图对应变。

数 据 改 变 ，视 图 自 动 更 新

使用 Vue开发 → 专注于业务核心逻辑即可

2、如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： “实例.属性名”

② 修改数据： “实例.属性名”= “值”

Vue学习Day1——小案例快速入门Vue指令,前端,vue.js,学习,javascript

五、Vue开发者工具安装

  1. 通过谷歌应用商店安装（国外网站）
  2. 极简插件下载（推荐） https://chrome.zzzmh.cn/index

安装步骤：

Vue学习Day1——小案例快速入门Vue指令,前端,vue.js,学习,javascript

六、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 双向绑定指令（v-model）
  • 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

七、内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

  • v-text（类似innerText）

    • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
    • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

  • v-html（类似 innerHTML）

    • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
    • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
    • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

 
  <div id="app">
    <h2>个人信息</h2>
	// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'wangkay',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

八、条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  1. v-show
    1. 作用： 控制元素显示隐藏
    2. 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
    3. 原理： 切换 display:none 控制显示隐藏
    4. 场景：频繁切换显示隐藏的场景

2.v-if

  1. 作用： 控制元素显示隐藏（条件渲染）

  2. 语法： v-if= “表达式” 表达式值 true显示， false 隐藏

  3. 原理： 基于条件判断，是否创建 或 移除元素节点

  4. 场景： 要么显示，要么隐藏，不频繁切换的场景

  5. 示例代码：

      <div id="app">
    <div class="box">我是v-show控制的盒子</div>
    <div class="box">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })
  </script>

  6. v-else 和 v-else-if

    1. 作用：辅助v-if进行判断渲染
    2. 语法：v-else v-else-if=“表达式”
    3. 需要紧接着v-if使用

示例代码：

  <div id="app">
    <p>性别：♂ 男</p>
    <p>性别：♀ 女</p>
    <hr>
    <p>成绩评定A：奖励电脑一台</p>
    <p>成绩评定B：奖励周末郊游</p>
    <p>成绩评定C：奖励零食礼包</p>
    <p>成绩评定D：惩罚一周不能玩手机</p>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

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

九、事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

  • <button v-on:事件名="内联语句">按钮</button>
  • <button v-on:事件名="处理函数">按钮</button>
  • <button v-on:事件名="处理函数(实参)">按钮</button>
  • v-on: 简写为 @

  1. 内联语句

    <div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

  2. 事件处理函数

    注意：

    • 事件处理函数应该写到一个跟data同级的配置项（methods）中
    • methods中的函数内部的this都指向Vue实例
<div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="isShow">挂机的阿凯</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        fn(){
          this.isShow = !this.isShow
        }
      }
    })
  </script>

3.给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

 <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>

 <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">雪碧10元</button>
      <button @click="buy(8)">柠檬茶8元</button>
    </div>
    <p>微信余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy(price){
          this.money -= price
        }
      }
    })
  </script>

十、属性绑定指令

  1. 作用：动态设置html的标签属性 比如：src、url、title
  2. 语法：v-bind：属性名=“表达式”
  3. v-bind：可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

  • <img v-bind:src="url" />
  • <img :src="url" /> （v-bind可以省略）
  <div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello wangkay'
      }
    })
  </script>

案例

需求：默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 [‘url1’,‘url2’,‘url3’，…]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

 <div id="app">
    <button v-show="index > 0" @click="index--">上一页</button>
    <div>
      <img src alt="">
    </div>
    <button v-show="index < list.length - 1" @click="index++">下一页</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        index: 0,
        list: [
          './imgs/11-00.gif',
          './imgs/11-01.gif',
          './imgs/11-02.gif',
          './imgs/11-03.gif',
          './imgs/11-04.png',
          './imgs/11-05.png',
        ]
      }
    })
  </script>

十一、列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略
  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

1、案例

根据以下渲染出列表

 booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]


<div id="app">
    <h3>小凯的书架</h3>
    <ul>
      <li v-for="(item,index) in booksList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.name }}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods:{
        //filter:根据条件，保留满足条件的对应项，得到一个新数组
        this.booksList = this.booksList.filter(item = > item.id !== id)
      }
    })
  </script>

2、v-for中的key

语法： key=“唯一值”

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

**为什么加key：**Vue 的默认行为会尝试原地修改元素（就地复用）

实例代码：

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

  1. key 的值只能是字符串 或 数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

十二、双向绑定

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新
  2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model=“变量”

需求：使用双向绑定实现以下需求

  1. 点击登录按钮获取表单中的内容
  2. 点击重置按钮清空表单中的内容
<div id="app">
    账户：<input type="text"> <br><br>
    密码：<input type="password"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        console.log(this.username,this.password)
      },
      rest(){
        this.username = ""
        this.password = ""                
      }                  
    })
  </script>

综合案例

Vue学习Day1——小案例快速入门Vue指令,前端,vue.js,学习,javascript

功能需求：

  1. 列表渲染

  2. 删除功能

  3. 添加功能

  4. 底部统计 和 清空

<!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" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <!-- 输入框 -->
    <header class="header">
        <h1>小凯的记事本</h1>
        <input v-model:id="toName" placeholder="请输入任务" class="new-todo" />
        <button @click="add" class="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
                <div class="view">
                    <span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
                    <button class="destroy" @click="del(item.id)"></button>
                </div>
            </li>
        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="list.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {{ list.length }}</strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="clear">
            清空任务
        </button>
    </footer>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
            toName: '',
            list: [
                {id: 1,name: '微服务学习'},
                {id: 2,name: 'SpringBoot从入门到精通'},
                {id: 3,name: 'SpringCloud'}
            ]
        },
        methods: {
            del(id){
                this.list = this.list.filter(item => item.id !== id)
            },
            add(){
                if (this.toName.trim()=== ''){
                    alert('请输入内容')
                    return
                }
                this.list.unshift({
                    id: +new Date(),
                    name: this.toName
                })
                this.toName=''
            },
            clear(){
                   this.list=[]
            }
        }
    })

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

功能总结文章来源地址https://www.toymoban.com/news/detail-610176.html

  • 列表渲染
    v-for、key的设置 、 {{}}插值表达式
  • 删除功能
    v-on调用传参 filter过滤，覆盖修改原数组
  • 添加功能
    v-model绑定 unshift修改原数组添加
  • 底部数据和清空
    数组.length累计长度
    覆盖数组清空列表
    v-show控制隐藏

到了这里，关于Vue学习Day1——小案例快速入门Vue指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

    【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

    🐌个人主页： 🐌 叶落闲庭 💨我的专栏：💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也，而不可夺坚；丹可磨也，而不可夺赤。 1.新建HTML页面，引入Vue.js文件 2.在JS代码区域，创建Vue核心对象，进行数据绑定 3.编写视图 指令：HTML标签上带有Vs前缀的特殊属性，不同指令

    2024年02月07日
    浏览(39)
  • Vue快速入门，常用指令，生命周期

    Vue快速入门，常用指令，生命周期

    Vue常用指令  案例：   Vue生命周期    

    2024年02月03日
    浏览(34)
  • 前端Vue入门-day02

    前端Vue入门-day02

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例：京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月13日
    浏览(37)
  • 前端学习——ajax (Day1)

    前端学习——ajax (Day1)

    axios 使用 练习 练习 案例 axios 错误处理 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8 url好像失效了

    2024年02月16日
    浏览(29)
  • Nodejs前端学习Day1

    Nodejs前端学习Day1

    妈的，这几天真tm冷，前天上午还下了一整天的雪，大雪 妈的，昨天没学，上午练车去了，下午就当了一下午废物，操，真是个废物。 现在官网的描述： 学习视频中的描述（旧版本）： 如果我们写了一段js放到浏览器中运行则证明在做前端开发 如果我们写了一段js放到node

    2024年01月25日
    浏览(32)
  • 前端Vue入门-day07-Vuex入门

    前端Vue入门-day07-Vuex入门

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 自定义创建项目 vuex概述 构建 vuex [多组件数据共享] 环境  创建一个空仓库 state 状态 1. 提供数据： 2. 使用数据： mutations  辅助函数 - mapMutations actions 辅助函数 - mapAc

    2024年02月14日
    浏览(30)
  • 前端Vue入门-day04-用vue实现组件通信

    前端Vue入门-day04-用vue实现组件通信

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 组件的三大组成部分 注意点说明 组件的样式冲突 scoped data 是一个函数 组件通信 什么是组件通信 不同的组件关系 和 组件通信方案分类   父子通信流程图：  父 → 子

    2024年02月15日
    浏览(40)
  • 前端学习——JS进阶 (Day1)

    前端学习——JS进阶 (Day1)

    局部作用域 全局作用域 作用域链 JS垃圾回收机制 闭包 变量提升 函数提升 函数参数 动态参数 剩余参数 展开运算符 箭头函数（重要） 基本写法 箭头函数参数 箭头函数 this 数组解构 练习 数组解构 对象解构 多级对象解构 for each 案例 筛选

    2024年02月16日
    浏览(28)
  • 前端学习--vue2--2--vue指令基础

    前端学习--vue2--2--vue指令基础

    写在前面： 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值，渲染到页面。 表达式可以是被求值的代码，js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(33)
  • 前端Vue入门-day06-路由进阶

    前端Vue入门-day06-路由进阶

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 路由的封装抽离 声明式导航 导航链接  两个类名  自定义高亮类名  跳转传参 1. 查询参数传参 2. 动态路由传参 两种传参方式的区别  Vue路由  重定向 404 编程式导航

    2024年02月14日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包