vue基础

最新推荐文章于 2025-06-01 14:24:37 发布

龍赢

最新推荐文章于 2025-06-01 14:24:37 发布

阅读量697

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_52580155/article/details/121799472

版权

本文深入介绍了Vue.js的基础知识，包括其组件化、声明式渲染、MVVM模式以及事件处理。讲解了v-text、v-html、v-model等指令的用法，事件修饰符如.stop、.prevent的应用，并展示了如何创建简单的计算器。此外，还探讨了条件渲染（v-if/v-show）、循环（v-for）、表单操作、计算属性、侦听器和过滤器。最后，讨论了Vue的生命周期，以及如何实现学生信息管理的示例。

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

vue基础

简介

是一套用于构建用户界面的渐进式JavaScript框架。

特点

采用组件化模式，提高代码复用率、且让代码更好维护。

声明式变量，让编码人元无需直接操作DOM，提高开发效率。

使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

http://cn.vuejs.org

API是Vue的字典
风格指南==》针对于不同的风格

简单实例

el是挂载的DOM元素
data是提供的数据模型
{{}}是vue提供的末班语法，里面可以嵌套变量或进行简单运算

vue指令

v-text:是文本内容如果设置标签会以文字的形式输出出来

v-himl:是可以读取标签的会添加标签

v-model：是双向数据绑定

可以渲染页面也能将内容转到数据中

MVVM设计思想

M–model 提供数据

V–view 主要是视图

VM–viewmodel 负责中间的数据交互和转换

事件

事件处理

事件修饰

<--! a的修饰-->
<a href="http://www.baibu.com" @click.stop="fn"></a>
@click.prevent添加使a不进行跳转

通过@keyup.enter点击enter按键会将内容打印到控制台。

通过@keyup.delete点击delete会将内容清空。

简单计算器案例

通过switch将符号进行解析再进行案例实现

属性绑定

格式：v-bind:属性名=值或：属性名=值

<div id="app">
    <a :herf="url">跳转</a>
    <button @click="fn">
        更改跳转
    </button>
    <script>
    var vue=new Vue({
        el:"#app",
        data:{
            url:''
        },
        methods:fn:function(){
        this.url='http://www.baidu.com';
    }
    })
    </script>
</div>
<!--从原来的没有地址点击后就能换到百度的地址-->

实现样式的出现跟消失

样式：v-bind:calss={red:getS}

在vue中：date可以设置
data{
    getS:false(消失)/true(出现)
}
在methods中
  fn:function(){
      this.getS=!this.getS;
      //实现样式的随机转换
  }

将类名改变

在css给相同的标签设置两个不同的样式
在HTML中设置属性  :class='[res,req]'
设置一个点击事件
在vue中  
data:{
    res:"xx"==>第一个样式的名字
    req:"xx"==>第二个样式的名字
}
methods:{
    xx:function(){
        this.res='';==>可以将第一个样式清除
    }
}

可以给style类绑定事件

在div中
<div style="{width:a,height:b}"></div>
在vue中
date:{
a:200px,
b:100px
}

分支结构、循环结构

分支：v-if v-else-if v-else

<p v-if="sal<=2000">
    1
</p>
<p v-else-if="sal>2000&&sal<=8000">
   2
</p>
<p v-else="sal>10000">
    3
</p>
data:{
sal:xxx
}

v-if和v-show

两个都是在显现跟消失之间相互切换的

v-show 是切换display:none/block之间相互切换的
v-if 是在不读取这个属性跟读取之间相互切换的占比要重
在做频繁切换的时候我们要使用v-show

循环

v-for="item in students"
v-for="(item,index) in students"

事件修饰符

prevent:阻止默认事件（常用）
stop:阻止事件冒泡（常用）
once:事件只触发一次（常用）
capture:使用时间的捕获模式
self:只有event.target是当前操作的元素是才触发事件：
passive:事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

只有两种  keyup keydown
常用的按键别名：
回车 =》enter
删除 =》delete (捕获“删除”和“退格”键)
退出 =》 esc 
空格 =》space
上  ==> up
下  ==> down
左  ==> left
右  ==> right

表单操作

v-model会根据控件类型自动选取正确的方法来更新元素。

会忽略苏搜友表单元素的value、checked、selected attribute的初始值而总是将vue实例的数据作为数据来源。

通过javascript在组件的data选项钟生明初始值。

v-model在内部为不同的输入元素使用不同的属性抛出不同的事件：

text和textarea元素使用value属性和input事件；
checkbox和radio使用checked属性和change事件；
select字段将value作为prop并将change作为事件

基础表格搭建

  <div id="app">
        <form action="">
            姓名: <input type="text" v-model="name"><br />
            性别:
            <input type="radio" name="" id="" v-model="sex" value="男">
            <input type="radio" name="" id="" v-model="sex" value="女"><br />
            爱好:
            <input type="checkbox" name="" id="" v-model="hobby" value="唱歌"> 唱歌
            <input type="checkbox" name="" id="" v-model="hobby" value="跳舞"> 跳舞
            <input type="checkbox" name="" id="" v-model="hobby" value="敲代码"> 敲代码<br />
            你的户籍地址:
            <select name="" id="" v-model="city">
                <option value="保定">保定</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select><br />
            你的想法是？<br />
            <textarea v-model="ideas" cols="30" rows="10"></textarea><br />
            <input type="button"  @click="handle" value="点击"><br />
        </form>
    </div>
    <script>
        let vue=new Vue({
            el:"#app",
            data:{
                name:"",
                sex:"",
                hobby:[],
                city:[],
                ideas:""
            },
            methods:{
                handle:function(){
                    console.log(this.name);
                    console.log(this.sex);
                    console.log(this.hobby);
                    console.log(this.city);
                    console.log(this.ideas);
                }
            }
        })

表单修饰符

.trim 是去掉前后空格;.lazy 是失去焦点以后才会触发;.number 是输入的是字符串，会自动转换为数字;

<div id="app">
        <input type="text" v-model.trim="text" name="" id="">
        <input type="text" v-model.lazy="text" name="" id="">
        <div>{{text}}</div>
         <button @click="handle">测试</button>
    </div>
    <script>
        let vue=new Vue({
            el:"#app",
            data:{
                text:''
            },
            methods:{
                handle:function(){
                    console.log(this.text.length);
                }
            }
        })
    </script>

计算属性

计算属性和方法的区别

计算属性调用没有小括号方法有小括号
计算属性调用多次会缓存，方法调用几次执行几次

<div id="app">
        <!-- <div>{{text.split(" ").join(",")}}</div> -->
        <div>{{getRes}}</div>
    </div>
    <script>
        let vue=new Vue({
            el:"#app",
            data:{
                text:"hello world every"
            },
            methods:{},
            computed:{
                // handle:function(){
                //     console.log(this.text.length)
                // }
                getRes:function(){
                    return this.text.split(" ").join(",");
                }
            }
        })
    </script>

侦听器

侦听器一般用于执行异步操作或比较消耗性能的时候，主要用于监听data中的数据变化。

过滤器

vue中的过滤器一般用于日期格式或者吧字符串比如大写变小写等格式


        // 过滤器小总
        // 全局   
        // Vue.filter("过滤器名字",function(val){
        //     处理逻辑
        // });
        //  局部
        // filters:{
        //         过滤器名称:function(val){
        //            处理逻辑
        //         }
        //     }