百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

初学Vue(一) -- Vue简单入门(快速入门vue)

ztj100 2025-03-14 22:37 83 浏览 0 评论

初学Vue(二) -- 条件渲染、修饰符、循环

初学Vue(三) -- 生命周期、过滤器、监听属性、计算属性

初学Vue(四)-- axios前后端交互、组件

初学Vue(五) -- 路由


vue - 国人开发制作的

类似于 view 的发音

vue经过了几次大的版本波动

0.x 0.6版本

1.x 版本

2.x 版本 - 现在常用的

为什么要介绍版本改动呢,因为不同版本语法和用法有差别,用起来比较麻烦

react 因为版权原因,导致百度等企业转用vue,导致vue突然火起来,也有支持国人的成分,当然其中的也缺不了它的确好用。

完整版演示代码


正式部分

vue学习建议先学会js,json

有的人觉得vue或angular不够jquery方便,首先,vue和angular是数据驱动的,而jquery是事件驱动的,也就是说用jquery需要想着给赋予事件,而vue与angular只要想着数据怎么变化就行了。

vue1.0下载

vue2.0下载


vue使用

Bash
html部分:
//首先当然是引入vue.js文件
<script src="vue.js"></script>

//vue标准是要用两对花括号圈住数据名的
{{msg}}


js部分:
//使用vue要先new 一个vue对象出来传入json格式的数据
    <script>
        new Vue({
            //作用域:el - element缩写
            el:'body',
            //输出的数据
            data:{
                msg:'hello vue!',
            }
        })
    </script>

{{}} -> 必须在作用域里面放入输出的模板,模板里面放入data里面你自己定义的变量

注意:只有ie8 以上的浏览器才能兼容vue


如何选取class或id为作用域

Bash

    {{msg}}


    <script>
        new Vue({
    //这里选区类与id是与jquery的方式是一样的,id的话就是#myDiv
            el: '.myDiv',
            data: {
                msg:'hello vue!',
            }
        })
    </script>

常用指令

类似于angular 的常用指令有 ng-show /ng-repeat,vue当然也有。

  • v-show:类似于display,true就是显示false就是隐藏
    

    
<script> //这里定义作用域是必须的,使用vue语句如果不定义作用域是不会起作用的 new Vue({ el:'body', }) </script>


    
<script> new Vue({ el:'body', //也可以利用数据传输来使用,更加灵活 data:{ dis:false, } }) </script>
  • v-for:循环输出数组或json数据
    
{{i}}{{$index}}
{{i}}
{{key}}=>{{value}}
{{$key}}=>{{i}}
<script> new Vue({ el:'body', data:{ //这是个字符串数组 arr:['a','b','c'], json:{ bill:18, bill2:21, bill3:24 } } }) </script>
  • v-for: {{index}} -> 索引值,{{key}} -> key值因为json是键值对,可以理解为数组的索引与值的关系,所以可以用不同方式访问。{{index}}可以进行计算 => {{index+10}} 从10开始计数

v-model:双向绑定 -- 数据和输出绑定


    
        
    {{msg}}
    <script>
        new Vue({
            el:'body',
            data:{
                msg:'',
            }
        })    
    </script>

Vue事件书写区

    

    
<script> new Vue({ el:'body', data:{ dis:true, }, //vue 事件区域,所有事件控制写在这里 methods:{ change:function() { this.dis=!this.dis; } } }) </script>
  • v-on有简写形式@ ,可以直接把v-on替换为@,@click='change'。

事件对象:event

  • 查看事件对象这些演示里面的html部分关于body与html的样式设置是必须的,不然body与html会按内容的大小填充,而不是布满整个页面
html部分:

//这里是必须设置这个样式,不然body的大小是根据页面内容调整大小的



<script>
        new Vue({
            el:'body',
            methods:{
 //事件对象,如果传参只有一个,默认就是事件对象,如果有多个参数传入,那么事件对象就是$event
                show:function(e){
                    console.log(e);
                }
            }
        })
    </script>
  • `@click="show"是可以传递参数给事件的,当它传递参数时,事件处理的形参不再默认为是时间对象,当我们传递参数给事件又想看事件对象时可以用$event
html部分:



js部分:
    <script>
        new Vue({
            el:'body',
            methods:{
                show:function(e,$event){
                    console.log(e,event);
                }
            }
        })
    </script>

事件冒泡:事件冒泡的三种阻止方法

  • 先来看下事件冒泡没有阻止的情况这些演示里面的html部分关于body与html的样式设置是必须的,不然body与html会按内容的大小填充,而不是布满整个页面
html部分:



    
js部分: <script> new Vue({ el:'body', methods:{ myDiv:function() { alert('i am div'); }, myBody:function(event){ alert('i am body'); } } }) </script>
  • event.cancelBubble=true;
html部分:



    
js部分: <script> new Vue({ el:'body', methods:{ myDiv:function() { event.cancelBubble=true; alert('i am div'); }, myBody:function(event){ alert('i am body'); } } }) </script>
  • event.stopProgation();
html部分:



    
js部分: <script> new Vue({ el:'body', methods:{ myDiv:function() { event.stopProgation(); alert('i am div'); }, myBody:function(event){ alert('i am body'); } } }) </script>
  • 直接在click后接.stop其中,上面两个event都是原生方法,所以虽然能用,但是还是不够方便,所以这里使用vue方法来
html部分:



    
js部分: <script> new Vue({ el:'body', methods:{ myDiv:function() { alert('i am div'); }, myBody:function(event){ alert('i am body'); } } }) </script>

阻止默认事件 -- 两种默认事件阻止方式

  • event.preventDefault();这个是原生js方法,能用但是也不够vue方法方便
html部分:
    


            
js部分:
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    event.preventDefault();
                    alert('我右键了');
                }
            }
        })
    </script>
  • @click.prevent="";
html部分:
    


            
js部分:
    <script>
        new Vue({
            el:'body',
            methods:{
                myBody:function(){
                    alert('我右键了');
                }
            }
        })
    </script>

键盘事件 -- 键盘监控事件利用keydown/up来监控用户按下了什么按键

  • 键盘监控事件
html部分:
    


    
js部分:
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按键盘了');
                }
            }
        })    
    </script>
  • event.keyCode监控用户按键的ASCII码,可以通过查看keyCode来赋予不同按键不同事件,例如通过console.log(event.keyCode);可以看到按键A的键值是65,那么我们可以设置只有当按下A键时才显示的事件@keydown.65等效于if(e.keyCode==65)
html部分:
    


    
js部分:
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了A键');
                }
            }
        })    
    </script>
  • 可以组合键使用
html部分:
    


    
js部分:
        <script>
        new Vue({
            el:'body',
            methods:{
                mybody:function(){
                    alert('我按了abc键');
                }
            }
        })    
    </script>

相关推荐

Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)

IT之家讯微软已向Insider用户推送了Win10预览版10532更新,本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug,汇总如下,有意升级Wi...

Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等

IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512,该版本修复了一些Bug,增强了系统稳定性,但依然存在一些问题。今天,微软Insider项目负责人GabeAu...

微软开始推送Win10预览版10532快速版更新

8月28日消息,刚才,微软推送了Win10Build10532快速版,修复了之前的Bug,并带来了三项改进。主要来说,这次的更新改进了右键菜单的UI,使其更具Modern风格(见上图)。此外,更新...

Win10预览版10532更新内容大全(windows10更新预览版)

IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新,本次更新主要带来了三处改进,汇总如下:o改进右键菜单,外观更加Modern。这是基于网友要求界面一致的反馈做出...

无法升级Win10预览版10532?也许Hyper-V在搞鬼

根据IT之家网友的反映,安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本,安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序,结果仍然无法顺...

Win10预览版10532界面兴起“酷黑”风潮

Win10预览版10532的界面改动还是较为明显的,主要体现在右键菜单上面。总体来看,该版本的右键菜单间距更宽,视觉上更大气,操作上更便于触控。具体来说,任务栏右键菜单的变化最为明显。除了增加选项的宽...

Win10预览版10532上手图集(windows10预览版下载)

IT之家讯8月28日,微软今天推送了Win10预览版10532快速版更新,在该版本中,微软主要是加强细节上调整,并且主要是增强Edge浏览器性能等。在Windows10预览版10532中,微软改进了...

Win10预览版10532上手视频亮点演示

IT之家讯8月28日消息,今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中,微软改进了右键菜单,外观更加现代化。另外还...

第二篇 前端框架Vue.js(vue前端框架技术)

前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工...

基于SpringBoot + vue2实现的旅游推荐管理系统

项目描述...

基于Vue以及iView组件的后端管理UI模板——iview-admin

介绍iView-admin是一套后端管理界面模板,基于Vue2.0,iView(现在为ViewUI)组件是一套完整的基于Vue的高质量组件库,虽然Github上有一套非常火的基于ElementUI...

别再说你会SPA开发了,这5个核心你真的搞懂了吗?

前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型,叫作单页应用程序,顾名思义,就是整个项目只有一个页面,而页面中的内容是动态的...

React.js Top20面试题(react.js中文官网)

概述作为React开发者,对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点,我整理了一份包含20个重要问题的清单,每个React开发者都应该知道,无论他们是在面试工作还是只是想提高技能。...

美媒:特朗普签署行政令后,FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件

来源:环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源:美媒综合福克斯新闻网和Axios网站10日报道,在总统特朗普签署行政令,要求公布“肯尼迪遇刺案”相关政府机密文件之后,美国...

2021 年 Node.js 开发人员学习路线图

Node.js自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业,纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用,例如实时追踪...

取消回复欢迎 发表评论: