VUE指令详解01

最新推荐文章于 2025-04-14 15:20:09 发布

Java技术堆

最新推荐文章于 2025-04-14 15:20:09 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术

本文链接：https://blog.csdn.net/fly_miqiqi/article/details/103706553

前端技术专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了Vue与Bootstrap两大前端框架的区别，详细介绍了Vue的基本概念、语法及指令，包括插值表达式、单向和双向数据绑定、事件绑定等关键特性，并对比了两者在视图层处理上的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap与Vue的区别

Vue+Anjular+React合称前端三大主流框架
Bootstrap是一个css库，Vue是一个js库
Bootstrap+MUI：CSS库，用于优化美化布局的(使用class赋值声明)
Vue+MintUI： JS库

VUE基本概念

VUE只关注视图层，让用户不再操作DOM
核心：采用模板语法，声明式的，将数据渲染进DOM树中
将data对象的所有属性添加到Vue响应式系统中
VUE实例：数据监听，编译模板，实例挂载到DOM，数据变化时更新DOM
VUE模板语法：使用基于HTML模板语法，声明式的，将(vue实例的数据)绑定到(DOM)

基本语法

插值表达式{{ }} 属性v-text=" "的区别

v-text没有闪烁问题
{{ }}可以放入任意字符串，相当于字符串模板
v-html可以解析html标签

Vue指令

当表达式改变时，响应式的作用于DOM
VUE实例属性和方法特点：前缀$,与用户属性区别

 vm.$data 
 vm.$el  
 vm.$watch()

单向绑定变量(model—>view)

<input type="button" value="按钮" v-bind:title="name"></input>
将input标签的title属性 绑定到vue实例的name属性上

双向绑定变量(model<—>view)

文本<input v-model="message" placeholder="edit me">
单选框<input type="radio" id="one" value="One" v-model="picked">
复选框 <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
多行文本<textarea v-model="message" placeholder="add multiple lines"></textarea>
选择框<select v-model="selected">
                    <option>A</option>
                    <option>B</option>
     </select>

绑定事件

<input type="button" value="按钮" v-on:click="method('hello')"></input> <!--错误-->
<input type="button" value="按钮" v-on:click="show"></input> <!--正确-->将input的click属性 绑定到vue实例的show方法上          @click    :click
var vm = new Vue({
     el: '#app'
     data:{
      name:'李琦'
     }，
     methods:{
       show:function(){
          alert("hello");
      }
    }
})

事件修饰符
默认冒泡机制(包含标签事件冒泡) @cick.stop=“btnHandler”

## .stop阻止冒泡
## .prevent阻止默认事件
## .capture添加事件侦听器时使用事件捕获模式
## .shelf只允许元素本身触发时  才进行回调
## .once事件只触发一次

条件渲染(通常用在Vue模板中)

判断

<p v-if="flag">这是用v-if控制的元素</p>
## 不会进行dom的删除和创建，只是切换元素的display属性——适用于频繁切换的场景
<p v-if="flag">这是用v-show控制的元素</p>

循环

遍历数组: v-for="(item,i)  in  items"           i为索引
<p v-for="(item,i)  in  items">item</p>

遍历对象数组: v-for="(user,i) in  users"
<p v-for="(user,i)  in  users">索引:{{i}}--性别:{{user.sex}}--名字:{{user.name}}</p>

遍历对象：v-for="(value,key,i) in  users"
<p v-for="(value,key,i) in  users">键是:{{key}}--值是:{{value}}</p> 

遍历数字: v-for="i in number"
<p v-for="i in 10">这是第{{i}}此循环</p>  从1开始