Vue-创建实例/vue常见指令

已于 2023-06-29 14:55:13 修改
阅读量95 收藏
点赞数
文章标签： vue.js 前端 vue
于 2023-04-26 21:23:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76866366/article/details/130394829
版权

Vue-01

一.Vue快速上手

(1)Vue概念

Vue 是什么?

概念：Vue 是一个用于 构建用户界面 (基于数据渲染出用户看到的页面) 的 渐进式 (循序渐进的学习) 框架 (一套完整的项目解决方案，提升开发效率)

Vue 的两种使用方式：
① Vue 核心包开发 场景：局部 模块改造
② Vue 核心包 & Vue 插件 工程化开发 场景：整站 开发

(2)创建实例

核心步骤 4步：
1.准备容器

2.引包 (官网) - 开发版本 / 生产版本

3.创建 Vue 实例 new Vue()

4.指定配置项→ 渲染数据
① el 指定挂载点
② data 提供数据

 <body>
  <!-- 1.准备容器 (Vue所管理的范围) -->
  <div id="app">  {{msg}}  </div>
  <!-- 2. 引包 (开发版本包 / 生产版本包) 官网 -->
  <!-- 开发版本:包含完整的警告和调试模式,学习阶段统一使用开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    // 一旦引入了vue的包,全局就会有一个Vue构造函数
    // 3. 创建实例
    // 4. 添加配置项 => 完成渲染
    const app = new Vue({
      el: '#app',
      data: {
        msg: '你好哇世界!'
      }
    })
  </script>

(3)差值表达式 {{ }}

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

语法：{{ 表达式 }}

注意点：
（1）使用的数据必须存在 （data）
（2）支持的是表达式，而非语句，比如：if for …
（3）不能在标签属性中使用 {{ }} 插值

(4)响应式特征

响应式：数据变化，视图自动更新 (聚焦于数据 → 数据驱动视图)

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

(5)安装 Vue 开发者工具：装插件调试 Vue 应用

（1）通过谷歌应用商店安装 （国外网站）
（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件

二.Vue指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 v- 前缀 的 特殊 标签属性

(1)v-html:

作用：设置元素的 innerHTML
语法：v-html = "表达式 "

<body>
  <div id="app">
    <div>{{msg}}</div>
      
    <!-- v-html:设置元素的innerHTML -->
    <!-- v-html='表达式' -->
      
    <div v-html='msg'></div>
    <!-- 注意:如果使用了v-html则标签内不能再写内容了,会被v-html的结果覆盖掉 -->
    <div v-html='msg'>1234</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标:
     *   将带有标签的 msg 数据解析标签并渲染到 div 中
     */
    const app = new Vue({
      el: '#app',
      data: {
        msg: '<h1>设置元素的innerHTML</h1>'
      }
    })
  </script>

(2)v-show / v-if

v-show
1.作用： 控制元素显示隐藏

2.语法： v-show = “表达式” 表达式值 true 显示， false 隐藏
3.原理： 切换 display:none 控制显示隐藏

4.场景： 频繁切换显示隐藏的场景

v-if

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

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

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

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

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

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标: 控制盒子显示隐藏
     *    v-show 底层原理:通过设置display:none来改变盒子的显示状态
     *    v-if   底层原理:通过创建/删除DOM元素来实现盒子的显示隐藏
     * */
    const app = new Vue({
      el: '#app',
      data: {
        isShow:true
      }
    })
  </script>

</body>

(3)v-else v-else-if

  1. 作用： 辅助 v-if 进行判断渲染
  2. 语法： v-else v-else-if = “表达式”

3.注意： 需要紧挨着 v-if 一起使用

<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 >= 70">成绩评定B：奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    // 目标:
    // 1. 根据条件渲染姓名
    // 2. 根据成绩来渲染奖励
    const app = new Vue({
      el: '#app',
      data: {
        gender: 1,
        score: 95
      }
    })
  </script>

</body>

(4)v-on

  1. 作用： 注册事件= 添加监听 + 提供处理逻辑
    2. 语法：
    ① v-on:事件名 = “内联语句”
    ② v-on:事件名 = “methods中的函数名” / v-on:事件名=“处理函数(实参)”

  2. 简写：@事件名

v-on:事件名 = “内联语句”

<body>
  <div id="app">
    <button @click='count--'>-</button>
    <span>{{ count }}</span>
    <button @click='count++'>+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    // 目标: 点击 - 让数字减一, 点击 + 让数字加一
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>
</body>

v-on:事件名 = “methods中的函数名”

<body>
  <div id="app">
    <button @click='fn'>切换显示隐藏</button>
    <h1 v-if='isShow'>程序猿</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标:
     *    点击切换 h1 标签显示隐藏
     */
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      // methods中存放函数
      // 注意:主要是定义在methods中的函数,最终都会放到实例对象上,所以内部的this助兴实力对象
      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>

v-on:事件名=“处理函数(实参)”

<body>
  <div id="app">
    <div class="box">
      <h3>自动售货机</h3>
      <button @click='buy(5)'>可乐5元</button>
      <button @click='buy(10)'>咖啡10元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标:
     *  点击不同按钮, 银行卡余额减少对应的金额
     */
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods:{
        buy(price){
          this.money -= price
        }
      }
    })
  </script>
</body>

(5)v-bind

  1. 作用： 动态的设置html的标签属性 src url title …
  2. 语法： v-bind:属性名=“表达式”
  3. 注意： 简写形式 :属性名=“表达式”
<body>
  <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.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标:
     *  使用 v-bind 指令动态绑定标签属性
     */
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: './imgs/10-02.png',
        msg: 'hello '
      }
    })
  </script>
</body>

(6)v-for

  1. 作用： 基于数据(数组、对象、数字… )循环， 多次渲染整个元素

  2. 遍历数组语法：
    v-for = “(item, index) in 数组”

    item 每一项， index 下标

    3.省略 index: v-for = “item in 数组”

<body>

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

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标: 使用 v-for 循环渲染 li
     */
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲']
      }
    })
  </script>
</body>

(7)v-for 中的 key

语法：key属性 = “唯一标识”

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

v-for 的默认行为会尝试 原地修改元素 （就地复用）

注意：

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

<body>

  <div id="app">
    <h3>小小图书馆</h3>
    <ul>
      <!-- 复用:Vue不会轻易删除DOM并重新并重新创建DOM,因为这样很消耗性能,它会想尽一切办法少的去销毁DOM -->
      <!-- v-for 的默认复用策略:就地更新,当前删除第一个元素后,还剩3个li,那么Vue就会把最后一个li删除,里面的内容平移,以复用所有现存的li -->
      <!-- v-for 时建议加上key属性,一般用唯一标识:id -->
      <!-- key的设置要求:
      1.一定要在当前v-for中唯一
      2.必须是string或number -->
      <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>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标: 理解 v-for 中 :key 的作用
     */
    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: {
        del(id) {
          this.booksList = this.booksList.filter(item => item.id !== id)
        }
      }
    })
  </script>
</body>

(8)v-model

  1. 作用: 给 表单元素 使用, 双向数据绑定(可以快速 获取 或 设置 表单元素内容)
    ① 数据变化 → 视图自动更新
    ② 视图变化 → 数据自动更新

  2. 语法: v-model = ‘变量’

<body>

  <div id="app">
    <!-- 
      v-model 可以让数据和视图，形成双向数据绑定
        1. 数据变化，视图自动更新
        2. 视图变化，数据自动更新
      可以快速获取或设置表单元素的内容
     -->
    账户：<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="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    /**
     * 目标: 理解 v-model 的使用
     *  1. 使用 v-model 双向绑定用户名和密码
     *  2. 点击登录时直接获取用户名密码数据
     *  3. 点击重置时直接重置用户名和密码
     */
    const app = new Vue({
      el: '#app',
      data: {
        username:'',
        password:''
      },
      methods: {
        login(){
          console.log(this.username,this.password);
        },
        reset(){
          this.username = ''
          this.password = ''
        }
      }
    })
  </script>
</body>
妄想 郑 5️⃣8️⃣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-01 —创建一个Vue实例
weixin_48112109的博客
05-04 1534
目录 前提 1. 准备一个容器 2. 创建一个Vue实例 2.1 完整代码 3.注意事项 初始Vue： 1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2. 容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法 3. 容器里的代码被称为【Vue模板】 前提 从Vue官网下载vue.js 导入vue.js <script src="vue.js" ...
Vue生命周期--Vue实例创建过程详解
YY的博客
11-26 1333
Vue生命周期--Vue实例创建过程详解
初识Vue
李公子的博客
07-25 354
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 <!DOCTYPE html> &
简单创建vue实例
weixin_43862596的博客
06-22 598
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建vue实例基本结构</title> <script src="../js/vue.js"></script> </head> <body> <div id="app">{{message}} </div&g
Vue01-创建Vue实例以及各选项含义
qq_46801776的博客
08-28 2955
1、创建Vue实例 Vue实例：通过new关键字实例化Vue（{}）构造函数 <script> var vm = new Vue({ //选项 }); Vue实例配置对象： data：Vue实例数据对象。 methods：定义Vue示例中的方法。 components：定义子组件。 computed：计算属性。 filters：过滤器。 el：唯一根元素。 watch：监听数据变化。 2、el唯一根标签 在创建Vue实例时，el表示唯一根标签，通过指定class或者id选择器可以用来将
Vue--插槽(v-slot)--使用/教程/实例
热门推荐
IT利刃出鞘的博客
11-07 1万+
原文网址： 简介 说明 本文用示例说明Vue的插槽（v-slot）的用法。包括：普通插槽，作用域插槽等。 官网 插槽 — Vue.js 普通插槽 说明 vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope，这两个在vue2.6.x中已被废弃但未被移除。vue 3 中， slot 和 slot-scope会被直接移除。 写法 v-slot有不同的写法。 具名插槽 父组件：&...
Vue--v-for的key的作用--详解/实例
IT利刃出鞘的博客
01-18 1983
本文用示例介绍Vue中的v-for的key的作用。
Vue--v-if和v-for不能同时使用--原因/解决方案/实例
IT利刃出鞘的博客
01-17 3239
本文介绍v-if和v-for不要同时使用的原因及解决方案。
Vue-7.命令创建Vue项目
yueerba126的博客
08-15 2990
创建一个简单的 Vue 项目需要使用 Vue CLI（命令行界面）。Vue CLI 是一个用于快速构建 Vue.js 项目的工具，它可以帮助你设置项目的基本结构、配置以及开发环境。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 3988
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
VUE-Demo实例项目
12-13
项目中的代码会展示如何创建Vue实例，定义数据属性，以及如何在模板中使用这些属性。 2. **组件系统**：Vue.js的强大之处在于它的组件化开发方式。组件是可复用的 Vue 实例，可以拥有自己的视图和数据逻辑。在`vue-...
jessibuca-vue-demo-3实例
03-21
实例中的模板将展示这些指令的实际应用。 3. **数据绑定**：Vue.js 的核心就是双向数据绑定，它使得视图层和数据模型之间保持同步。`data`选项定义了组件的数据，当数据改变时，Vue会自动更新相关的视图，反之亦然...
vue-highlight-text-用于突出显示单词的多个实例的Vue组件-Vue.js开发
05-27
vue-highlight-text Vue组件，用于突出显示一个单词的多个实例的安装＃带有纱线的添加vue-highlight-text＃，具有突出显示的纱线的实例，npm insta vue-highlight-text Vue组件，用于突出显示一个单词的多个实例的...
Vue-Plugin:Vue插件
03-08
2. 注册插件：在Vue实例化之前调用`Vue.use()`方法，传入插件对象。 3. 插件实现：可以包含组件、指令、过滤器、全局方法等。 4. 配合API：利用Vue提供的生命周期钩子、事件系统等进行功能扩展。 例如，一个简单的...
vue-barrage.zip
07-30
例如，`<input>`元素的值可能与Vue实例的一个属性绑定，当用户输入时，模型自动更新。 3. **指令**：Vue.js提供了一些预定义的指令，如`v-if`（条件渲染）、`v-for`（循环遍历）和`v-on`（事件监听）。在弹幕应用中...
输入框输入值之后，检索表格中是否存在输入框中的值，存在就让当前文字为红色
weixin_46631078的博客
07-05 435
span v-html="createKeywordHtml_content(scope.row.date)">日期this.searchValue为输入框的值。
Vue的学习之class与style绑定
人生苦短
07-07 255
本节对class与style的绑定内容就学习完毕了！
Vue的学习之数据与方法
人生苦短
07-06 516
前段期间，由于入职原因没有学习，现在已经正式入职啦，接下来继续加油学习。
vue-使用Worker实现多标签页共享一个WebSocket
最新发布
qq_43548590的博客
07-08 1076
最近有一个需求，需要实现用户系统消息时时提醒功能。第一时间就是想用WebSocket进行长连接。但是前端项目点击跳转需要打开新的标签页。这个时间就会出现新的标签页打开会把老的WebSocket连接挤掉。然后就想到了去共享一个WebSocket连接。就能实现多个标签页消息共享了。
vue-treeselect怎么在html页面使用
03-15
在模板中，我们使用`<vue-treeselect>`标签来渲染Vue-Treeselect组件，并通过`v-model`指令将选中的节点绑定到`selectedNode`数据属性上。最后，我们可以通过`{{ selectedNode }}`来显示选中的节点。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值