Vue.js之基础命令

原创 于 2025-08-04 08:19:17 发布 · 931 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #前端框架

指令:带有 v- 前缀 的 特殊 标签属性

1.v-html

可以解析style里的代码

<div id="app">
    <div v-html="msg"></div>  //就可以解析a标签和h3
</div>
<script>
const app = new Vue({
    el:'#app',
    data:{
        msg:
<a href="http://www.itheima.com">黑马程序员</a>
        <h3>学前端~来黑马!</h3>
    }
})
</script>

2.v-show vs v-if（元素隐藏）
v-show：

  1. 作用:控制元素显示隐藏

  2. 语法: v-show="表达式" 表达式值 true 显示， false 隐藏

  3. 场景: 频繁切换显示隐藏的场景

  4. v-show底层原理:切换css的display:none 来控制显示隐藏

V-if：

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

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

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

  4. v-if 底层原理:根据 判断条件 控制元素的 创建 和 移除（条件渲染）

<div id="app">
  <div v-show="flag"class="box">我是v-show控制的盒子</div>
  <div v-if="flag"class="box">我是v-if控制的盒子</div> 
</div>
<script>
const app = new Vue({
    el:'#app',
    data:{
       flag: false  //隐藏时才看出区别
       }
     })
</script>

3.v-else v-else-if

1.作用: 辅助 v-if 进行判断渲染

2.语法:v-else v-else-if="表达式"

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

<div id="app">
    <p v-if="gender === 1">性别:男</p>  //注意这里的判断等于是===
    <p v-else>性别:女</p>  //v-else不能单独使用
    <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>
const app = new Vue({
    el:'#app',
    data:{
        gender:2  //决定了渲染性别的判断
        score:80  //决定了渲染成绩的判断
    }
})
</script>

4.v-on

1.作用: 注册事件=添加监听+提供处理逻辑

2.语法:

  • v-on:事件名="内联语句"（只适用于简单逻辑的代码）

  • v-on:事件名="methods中的函数名"

//v-on:事件名="内联语句"
<div id="app">
<button v-on:click="count--"> - </button>  //click是点击事件，可换别的
<span>{{ count }}</span>
<button v-on:click="count = count + 2"> + </button>
</div>
​
<script>
const app = new Vue({
    el:'#app',
    data:{
       count:100
    }
})
</script>
​
//简写：把v-on:换成@
@事件名
<button @click="count--"> - </button>  
//v-on:事件名="methods中的函数名"
const app = new Vue({
el:'#app',
data:{
// 提供数据
count:100
},
methods:{
//提供处理逻辑函数
fn(){
console.log('提供逻辑代码')
 }
 }
})
​
例题：<div id="app">
    <button @click="fn">切换显示隐藏</button>  //fn是methods的函数名
    <h1 v-show="isshow">黑马程序员</h1>
</div>
​
<script>
const app(实例名) = new Vue({
    el:'#app',
    data:{
    isShow: true
    },
    methods:{
        fn(){    //被执行的方法
            app.isShow = !isShow  //完成来回切换
   //这里面是不能直接获取data里的数据的，要通过this指向vue实例
       this.isShow = !this.isShow  //改实例名后照样能用
        }
    }
})
</script>

3.调用传参

<button @click="fn(参数1,参数2)">  //分别对应以下的a和b
    按钮
</button>
​
const app = new Vue({
el:'#app'
methods:{
fn(a，b){
console.log('这是一个fn函数')
        }
    }
})

例题：

<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>
const app = new Vue({
    el:'#app',
    data:{
  money: 100
    },
methods:{
    buy(price){  //实现不同金额的传参
        this.money -= price
    }
  }
})
 </script>

5.v-bind

  1. 作用:动态的设置html的标签属性 → src url title ···

  2. 语法: v-bind:属性名="表达式" 把这个表达式算出来的值赋值给属性名

  3. 简写形式: : 属性名="表达式"

<d1v id= "app">
<img v-bind:src="imgUrl" v-bind:title="msg" alt="">
</div>
​
<script>
const app = new Vue({
    el:'#app',
    data:{
    imgUrl:'./imgs/10-02.png',  //动态设置了图片
     msg:'hello 波仔'
    }
})
</script>
​
简写：
<img :src="imgUrl" :title="msg" alt="">

例题：图片切换

核心思路分析: ① 数组存储图片路径 →[图片1，图片2，图片3，….] ② 准备下标 index，数组[下标]→ v-bind 设置 src 展示图片→>修改下标切换图片

<div id="app">
<button v-show="index>0" @click="index--">上一页</button>   //设置点击事件 index>0的时候才显示，否则隐藏
<div>
    //把图片动态渲染 ,通过数组下标访问每一项
<img :src="list[index]" alt="">
</div>
<button v-show="index<list.Length-1" @click="index++">下一页</button>
   //下标到达最大值的时候隐藏 ，小于最大值则显示
</div>

<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>
v-bind 对于样式控制的增强-操作class

语法:class="对象/数组" ① 对象 →键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box":class="{ 类名1:布尔值，类名2:布尔值}"></div>

② 数组 →数组中所有的类，都会添加到盒子上，本质就是一个 class 列表:

<div class="box" :class="[ 类名1，类名2，类名3]"></div>
v-bind 对于样式控制的增强-操作style

语法 :style="样式对象"

<div class="box" :style="{ CSS属性名1:CSS属性值，CSS属性名2:CSS属性值}"></div>

​​

6.v-for

1.作用:基于数据循环，多次渲染整个元素---数组，对象，数字

2.遍历数组语法: v-for="(item,index) in 数组" item 每一项，index 下标

<div id="app">
<h3>小黑水果店</h3>
    <ul>
	<li v-for="(item, index)in list">  //index不需要的话可以省略
        {{ item }}-{{ index }} //item获取每一项的名字 index获取下标
    </1i>
</ul>
</div>

<script>
const app = new Vue({
    el:'#app',
data:{
list:['西瓜','苹果','鸭梨','榴莲']
</script>

例题：

<div id="app">
<h3>小黑的书架</h3>
    <ul>
<li v-for="(item, index)in booksList" :key="item.id">//加上key更完善
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
    <!-- 注册点击事件→ 通过 id 进行删除数组中的 对应项 -->
<button @click="del(item.id)">删除</button>
  </1i>
 </ul>
</div>

<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:{
          del(id){
   // console.log('删除'，id)
   // 通过 id 进行删除数组中的 对应项 →filter(不会改变原数组)            
  // filter:根据条件，保留满足条件的对应项，得到一个新数组。
//console.log(this.booksList.filter(item =>item.id!=id))
 this.booksList = this.booksList.filter(item => item.id !== id)  
          }
      }
  }) 
</script>
3.v-for中的key

语法:key属性="唯一标识" 作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

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

<li v-for="(item, index) in xxx" :key="唯一值">

7.v-model(双向数据绑定)

作用:给 表单元素 使用，双向数据绑定 → 可以快速 获取 或 设置 表单元素内容

  • 数据变化→视图自动更新

  • 视图变化→数据自动更新

    可以快速[获取]或[设置]表单元素的内容

账户:<input type="text" v-model="username"><br><br>
密码:<input type="password" v-model="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
<script>
const app = new Vue({
    el:'#app',
data:{
	username:'',
    password:''
},
    //定义登录和重置的方法
methods:{
	login(){
console.log(this.username,this.password)  //直接获取就行
    },
	reset(){
	this.username =''
	this.password =''
    }
  }
})
    </script>
v-model(应用于其他表单元素)

  • 输入框 input:text

  • 文本域 textarea

  • 复选框 input:checkbox

  • 单选框 input:radio

  • 下拉菜单 select

了解vue.js与使用vue.js制作网站的过程
2401_85871169的博客
12-15 1566
需要了解如何安装Vue，创建和配置Vue实例，定义和访问全局状态，创建和使用Getters计算派生状态，定义和提交Mutations修改状态，创建和派发Actions处理异步操作，以及使用Vuex模块化组织大型应用的状态管理。综上所述，使用Vue.js制作网站需要掌握一系列的技能和工具，包括HTML/CSS、JavaScript、Vue.js框架本身、Vue生态系统（如Vue CLI、Vue Router、Vuex）、组件化开发、API交互、构建工具和打包器、调试和测试等。
Vue.js教程.docx
01-08
### Vue.js教程之ES6语法详解 #### 一、ES6简介与开发环境搭建 ECMAScript 6（简称 ES6 或 ES2015）是 JavaScript 的一个重要版本，引入了许多新特性，使得 JavaScript 成为了更加强大和灵活的语言。对于前端...
Vue 常用指令详解（附代码实例）
最新发布
无限大的博客
01-12 1454
v-bind指令用于在 Vue.js 应用中动态绑定 HTML 属性。它可以通过 JavaScript 数据模型来改变元素的属性值。v-model指令用于在表单元素（如inputtextarea或select）和 Vue 实例之间建立双向数据绑定。通过v-ifv-else-if和v-else，可以根据条件渲染不同的 DOM 元素。v-for指令用于在数组或对象上渲染动态列表，能够生成多个相同类型的 DOM 元素。v-show指令通过修改元素的 CSSdisplay属性来控制元素的显示或隐藏。与v-if。
【vue】创建命令
10-25 272
vue vue是JavaScript框架的一种，将零散的样式、响应操作、单页面进行了“管理”，在增加项目的可读性和处理效率，以及代码的可重用。 vue使用的基本配置 ①vue使用的环境配置。通过node.js下载npm,通过淘宝镜像安装cnpm。 ②vue的运行环境，即vue的脚手架（vue-cli）,在vue-cli中集成了vue.js文件、项目环境、webpack文件。 脚手架的安装：使用"cnpm install -g vue-cli“，或者用“cnpm install -g @vue/cli”（最
Vue中常用指令——（详解，并附有代码）
Java技术加油站的博客
10-11 1947
内容渲染指令（v-html、v-text） 条件渲染指令（v-show、v-if、v-else、v-else-if） 事件绑定指令（v-on） 属性绑定指令 （v-bind） 双向绑定指令（v-model） 列表渲染指令（v-for）
Vue基本指令（超详细介绍），快来收藏
2401_84098033的博客
04-04 992
外链图片转存中…(img-5tIZlJdb-1712225883871)][外链图片转存中…(img-cntG7UUB-1712225883872)]
Vue -- 基础指令（入门必看）
Fearless____的博客
07-21 254
学会 Vue 的入门使用 ......
vue.js教程.pdf
11-19
vue.js教程.pdf 本资源摘要信息中，我们将详细介绍 Vue.js 的基本概念、安装方法、使用方式、MVVM 模式、数据绑定、组件系统、指令和过滤器等...通过本资源摘要信息，您可以快速了解 Vue.js 的基础知识和使用方式。
Vue.js开发实战：基于Vue.js的电商产品列表页的实验心得与案例解析
05-08
1. **安装 Node.js**：Node.js 是运行 npm 和 Vue CLI 的基础。 2. **安装 Vue CLI**：通过 npm 安装 Vue CLI，以便于快速创建项目模板。 3. **安装 IDE**：推荐使用 Visual Studio Code 或其他支持 Vue.js 的集成...
JavaScript之Vue.js【入门基础】
10-20
Vue.js是一款流行的前端JavaScript框架，由尤雨溪创建，专用于构建用户界面和单页应用程序。Vue.js的核心库只关注视图层，易于上手，同时也允许扩展到更复杂的项目。Vue.js的语法与AngularJS类似，因此有AngularJS...
vue常用指令
weixin_58017699的博客
06-06 3626
使用如下例子: 2 使用,如下例子: 3、v-show 和 v-if指令: v-if和v-show区别：使用和v-if如下例子: 4、v-if和v-else的逻辑使用: v-if和v-else的逻辑使用，如下例子: 5、v-for指令: 使用如下例子: 6、v-bind指令: 使用如下例子: 7、v-on指令: 使用如下例子: 8、v-model指令: 使用如下例子: 文章参考资料：vue常用指令_jayLog的博客-优快云博客_v
vue的指令
weixin_30377461的博客
06-29 813
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
vue的常用指令及用法总结
weixin_42504805的博客
06-08 9297
vue知识
vue基础指令
Mr_ZCheng的博客
10-20 1647
1.插值表达式 目的: 在dom标签中, 直接插入内容 又叫: 声明式渲染/文本插值 语法: {{ 表达式 }} <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div> </templa
Vue一些常用命令
smilling sky的博客
03-27 1万+
Vue一些常用命令： 1.安装vue-cli npm install --global vue-cli 2.创建一个基于 webpack 模板的新项目 vue init webpack 项目名称 3. 安装依赖： cd 项目名称 npm install 3运行： npm run dev 4.安装vue-resource插件（通过XMLHttpRequest或JSONP发起请求并处理响应 //ge...
vue 常用命令
HouYing
11-29 5082
nodejs :http://nodejs.cn/download/ npm install -g npm eslint 要代码检查生效 vue文件需要和vue关联 npm config set registry http://registry.npm.taobao.org/ npm install -g @vue/cli npm install -g yarn yarn c...
vue常用的指令
最好的一天
12-04 5799
1.v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。 2.v-html指令：绑定一些包含html代码的数据在视图上，例如&lt;strong&gt;Daisy&lt;/strong&gt;,这个字符包含了&lt;strong&gt;标签，要想&lt;strong&gt;不被当做普通的字符串渲染出来，发挥&lt;strong&gt;应有的效果，我们就得使用v-html...
vue 的指令
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue 指令基本使用大全
热门推荐
茅坤宝骏氹的博客
07-09 2万+
转载自   vue 指令基本使用大全指令解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM常用指令v-textv-htmlv-bindv-text解释：更新元素的 textContentv-html解释：更新元素的 innerHTMLv-bind作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM语...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值