【学Vue就跟玩一样】学习vue就像打游戏一样简单

这篇具有很好参考价值的文章主要介绍了【学Vue就跟玩一样】学习vue就像打游戏一样简单。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

一,初入Vue大陆

1.Vue的初体验

1.Vue的特点

2.引入vue

3.可能出现的问题

4.创建Vue实例

5.模板语法

6.数据绑定

7.连接容器的方法

8.data的写法

二,MVVM模型

三,数据代理

1.对数据进行读取和修改

 2.事件修饰符

3.键盘事件

最后


 文章来源地址https://www.toymoban.com/news/detail-481612.html

前言

🐳对于看到这篇文章的小伙伴呢!肯定是即将到达四周目Vue篇了吧,从此刻开始正式踏入Vue篇,内容绝对真实有效,本栏会细致的将Vue划分为两大模块,基础篇,进阶篇。想要顺利通关vue篇首先要拥有三剑客,当然其他的node ajax法宝也会辅佐你通关的,在学习的途中如果遇到了问题,可以试着回顾一下之前的情节,以便于更好的推进主线剧情,准备出发!

一,初入Vue大陆

1.Vue的初体验

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

1.Vue的特点1

1.采用的是组件化模式,提高代码复用率且让代码更好维护。

2.声明式编码,让程序猿 / 媛无需直接操作DOM,提高开发效率。

3.使用虚拟DOM和优秀的Diff算法,尽量复用DOM节点。

2.引入vue

找到官网:Vue官网

点击教程

然后选择安装,(这里有俩版本,一个是开发的,一个是生产的,一般我们使用vue.js进行学习)

这俩的区别就是有无提示的问题

【学Vue就跟玩一样】学习vue就像打游戏一样简单

 下载完成之后将vue.js文件放到我们的包里面并且引入

【学Vue就跟玩一样】学习vue就像打游戏一样简单

下载Vue扩展Vue扩展 提取码:1127

下载成功并且开启后就会显示这个vue的图标,这个可以更好的辅助我们进行vue的相关操作 

【学Vue就跟玩一样】学习vue就像打游戏一样简单【学Vue就跟玩一样】学习vue就像打游戏一样简单

3.可能出现的问题

问题1:控制台出现提示

 

如何关闭呢?(打开vue.js文件然后CTRL+f查找 productionTip ,最后再将该语句的true改为false)也可以直接 写上这串代码 Vue. config. productionTip = false;

【学Vue就跟玩一样】学习vue就像打游戏一样简单

 问题2:出现404的错误

直接去比特冲将一张图片转换为ico图标的样式并且将名称改为favicon.ico即可

 问题3:啥错误提示也没看到

打开vscode点击插件,查找一个“ Live Serve”的插件即可

【学Vue就跟玩一样】学习vue就像打游戏一样简单

4.创建Vue实例

这里遵循一对一原则,一个vue实例只能操作一个容器

<body>
    <!-- 创建一个容器 -->
    <div id="root">
        <h1>hello,{{name}}</h1> <!-- 使用插值语法用双重花括号包裹{{}} 也就是【vue模板】-->
    </div>
    <h1>{{name}}</h1><!-- 这里的Vue实例只是接管了id名为root的容器,所以只能再该容器中使用 -->
    <script>
        // 创建Vue实例,直传一个参数
        new Vue({
            el: '#root',// el用于指定当前Vue实例为那个容器服务,值一般为css选择器字符串
            data: {
                name: 'Vue小嘎鱼'
            }
        })
    </script>
</body>

注:使用Vue的第一步就是创建实例 ,容器里的代码在符合html规范的语法基础上新增了Vue的一些特殊语法,容器里的代码被称为[Vue模板],Vue实例和容器是一 一对应的,在实际开发中有且只有一个Vue实例并且会配合着组件起使用,{{js表达式}}且js表达式可以自动读取到data中的所有属性,如果data中的数据发生改变,那么页面中所有用到该数据的地方也会自动更新

5.模板语法

1.插值语法:

功能:用于解析标签体内容。

写法: {{js表达式}},且可以直接读取到data中的所有属性。

2.指令语法:

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件等)

例: v- bind:href="xx"或简写为 :href="xxx", xxx同样要写js表达式且可以直按读取到data中的所有属性。

注: Vue中有很多的指令,且形式都是: v-xxx(还有v-model,v-if等)

【学Vue就跟玩一样】学习vue就像打游戏一样简单

6.数据绑定

Vue中有2种数据绑定的方式

1.单向绑定(v-bind):数据只能从data传入页面。

2.双向绑定(v-model):数据不仅能从data传入页面,还可以从页面传入data

3.双向绑定一 般都应用在表单类元素上(如: input、 select等)

4.v-model:value可以简写为v- model,因为v- model默认收集的就是value值。

<body>
    <div class="inp">
        <!-- 单向数据绑定只能从data流向页面,而双向数据绑定可以互相流动 -->
        单向数据绑定:<input type="text" :value="name"><br>
        <!-- 注:v-model只能应用到表单类元素上 -->
        双向数据绑定:<input type="text" v-model:value="name">
    </div>
    <script>
        new Vue({
            el: ".inp",
            data: {
                name: '山鱼'
            }
        })
    </script>
</body>

7.连接容器的方法

<body>
    <div class="one">
        <h1>你好,{{name}}</h1>
    </div>
    <script>
    const a= new Vue({
        // el:'.one', 第一种写法
        data:{
            name:'shanyu'
        }
    })
    
    a.$mount('.one')// 第二种写法
    </script>
</body>

直接使用el更简单

【学Vue就跟玩一样】学习vue就像打游戏一样简单 使用 实例使用对象原型里面的$mount也可以实现绑定 ,名.$mount('容器名')的方法更灵活

8.data的写法

分别为对象式和函数式

<script>
        new Vue({
            el: '.one',
            // 第一种对象式
            data: {
                name: '山鱼'
            },
            // 第二种函数式
            // 这里不可以使用箭头函数,箭头函数自身木有this
            data() {
                return {
                    name: '山鱼'
                }
            }
        })
    </script>

二,MVVM模型

为什么要了解MVVM模型?其实Vue的尤大大也是收到了MVVM的启发,但并不完全使用MVVM,我们也可以在官网上看到这段话

【学Vue就跟玩一样】学习vue就像打游戏一样简单vm

那MVVM到底代表着什么呢?

其中:M(model模型):其实就是data中的数据,V(View试图):模板,也就是DOM的页面,VM(试图模型ViewModel):Vue实例

【学Vue就跟玩一样】学习vue就像打游戏一样简单

其中的vm就是这个b蓝色框内的也就是ViewModel,他身上的所有属性方法vm都可以使用,包括原型对象内的属性方法也可以使用

三,数据代理

这里的数据代理为何物呢?通过一个对 象代理对另一个对 象中属性的操作(读/写)

1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作

2.Vue中数据代理的好处:更加方便的操作data中的数据

3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每一个 添加到vm上的属性,都指定个getter/setter,在getter/setter内部去操作(读/写) data中对应的属性。简单来说就是把data的属性全部都复制给了_data了一份,可以让vm进行使用

Object.defineProperty方法(给对象添加属性方法的一个方法)这个方法会传入三个参数分别是对象名,属性名,配置项。

    <script>
    let person = {
        name:'山鱼',
        sex:'男',
    }    
    Object.defineProperty(person,'address',{
        value:18
    })
    console.log(person);
    </script>

在这里我们可以看到,这个颜色稍微的有点变化(这里就是使用Object.defineProperty方法进行添加的,这里的address是不可以进行枚举的,即不参与遍历)

【学Vue就跟玩一样】学习vue就像打游戏一样简单

这里可以使用Object.keys()进行验证一下,结果的确没有拿到这个address(使用for....in也可以)

【学Vue就跟玩一样】学习vue就像打游戏一样简单

 <script>
    let person = {
        name:'山鱼',
        sex:'男',
    }    
    Object.defineProperty(person,'address',{
        value:18
    })
    for(k in person){
        console.log(k);
    }
    console.log(Object.keys(person));
    console.log(person);
    </script>

如何让address参与遍历?【这里就使用了之前学过的 enumerable 只要将它的值改为true即可 】

enumerable : true (是否可以被枚举)

writable:true(是否可以修改属性)

configurable: true(是否可以删除改属性)

这四个基本配置项 的内容(包括value)他们的默认值为false

1.对数据进行读取和修改

这里用到了两个方法,get和set

    <script>
        let number = 19;
        let person = {
            name: '山鱼',
            sex: '男',
        }
        Object.defineProperty(person, 'address', {
            //当有人读取person的address属性时,get函 数(getter)就会被调用,且返回值就是age值
            get() {
                console.log('address属性已被读取');
                return number;
            },
            //当有人修改person的address属性时,set函数(setter)就会被调用,且 会收到修改的具值
            set(value) {
                console.log('address属性已被修改');
                number = value
            }
        })
    </script>

 2.事件修饰符

1.prevent:阻止默认事件(常用)

2.stop: 阻止事件冒泡(常用)

3.once:事件只触发一次(常用)

4.capture: 使用事件的捕获模式

5.self: 只有event.target是当前操作的元素是才触发事件

6.passive: 事件的默认行为立即执行,无需等待事件回调执行完毕

<div id="user">
        <h1>欢迎来到{{name}}的博客之家</h1>
        <!-- 1,阻止默认事件 -->
        <a href="http://baidu.com" @click.prevent = "showInfo">点我不跳转</a>
        <!-- 2,阻止事件冒泡 -->
        <div class="one" @click = 'showInfo'>
            <button @click.stop = 'showInfo'>点我</button>
        </div>
        <!-- 3,事件只触发一次 -->
        <button @click.once = 'showInfo'>只能点一次哦</button>
    </div>
    <script>
    const vm = new Vue({
        el:'#user',
        data:{
            name:'山鱼',
        },
        methods:{
            showInfo(e){
                alert('泥嚎!同学')
            }
        }
    })
    </script>

3.键盘事件

常用的按键别名:

回车=> enter ,删除=>delete(捕获“删除”和“退格”键) ,退出=> esc ,空格=> space ,上=>up ,下=> down ,左=> left ,右=> right

特殊的按键别名:

1.换行=> tab (特殊,必须配合keydown使用)

2.系统修饰键 ctrl,alt,shift,meta(meta就是win键也就是windows徽标)

注:配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。配合keydown使用:正常触发事件。

<div class="user">
        <h1>欢迎加入{{uname}}</h1>
        <!--.enter 就是按下回车触发事件,也成为按键别名-->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter = 'showInfo'>
        <!--删除 del -->
        <input type="text" placeholder="按下del提示输入" @keyup.delete = 'showInfo'>
        <!-- 退出esc -->
        <input type="text" placeholder="按下ESC提示输入" @keyup.esc = 'showInfo'>
        <!-- 特殊按键别名 -->
        <input type="text" placeholder="一同按下ctrl+‘其他按键’并释放提示输入" @keyup.ctrl = 'showInfo'>
        <!-- 自定义别名 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche = 'showInfo'>
    </div>
    <script>
        // 也可以自定义按键别名
        Vue.config.keyCodes.huiche = 13;
        const vm = new Vue({
        el:'.user',
        data:{
            uname:'山鱼社区'
        },
        methods:{
            showInfo(e){
                console.log(e.target.value);
            }
        }
    })
    </script>

写在最后

点赞👍:您的赞赏是我前进的动力!收藏⭐:您的支持我是创作的源泉!

评论✍:您的建议是我改进的良药!山鱼🦈社区:欢迎大家加 山鱼社区  !

我依旧是小山🐟并且依然在逐渐成长,励志成为大撒鱼,感谢大家的一路支持

 

 

 

到了这里,关于【学Vue就跟玩一样】学习vue就像打游戏一样简单的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue watch监听对象 新旧值一样

    废话不多说,直接上代码 通过打印最后发现一个问题,watch中的新旧值一样 解决方案 通过computed剥离与原数据的引用关系

    2024年02月12日
    浏览(37)
  • vue 数组转换成dataframe,在终端像python一样行列显示

    1 npm安装 2 导入 3 src目录下创建文件 pandas-js.d.ts 4 使用

    2024年02月13日
    浏览(37)
  • 微信小程序的双向数据绑定和vue的哪里不一样?下拉刷新的方式代码示例

    小程序的双向数据绑定和Vue的双向数据绑定有一些不同之处。 实现方式:小程序的双向数据绑定采用的是数据劫持的方式,通过重写对象的get和set方法来监听数据的变化和更新视图。而Vue使用的是响应式数据的方式,通过使用Object.defineProperty()方法来劫持对象的属性。 语法差

    2024年02月22日
    浏览(46)
  • Vue - 实现类似小程序 onShow() 一样的生命周期钩子方法(监听页面的显示,只要页面显示就执行代码)

    我们都知道,在微信小程序和 uni-app 项目中,页面有一个 onShow() 生命周期,当页面显示时就会触发。 但在 Vue.js / Nuxt.js 项目中是没有这个钩子函数的, 本文将提供 最简单、高效 的解决方案, 另外兼容性亲测完美。 如下效果图所示,首页每次显示的时候都会触发(您看控制

    2024年02月11日
    浏览(42)
  • vue做游戏vue游戏引擎vue小游戏开发

    Vue.js 是一个构建用户界面的渐进式JavaScript框架,它同样可以用于游戏开发。使用 Vue 开发游戏通常涉及以下几个关键步骤和概念: 1. 了解 Vue 的核心概念 1 在开始使用 Vue 进行游戏开发之前,你需要理解 Vue 的一些核心概念,如组件化、响应式数据绑定、指令、生命周期钩子

    2024年04月09日
    浏览(55)
  • 像游戏一样办公,赋能OA系统转型

    办公币 OAC ,是一种以区块链为基础的,基于P2P形式的加密货币。在新型OA系统中员工通过完成不同的待办任务,OACoin下发中心会给予相应的代币奖励,获得的货币还可以在区块链中进行交易。打破传统枯燥OA办公模式,激发员工办公积极性,像游戏一样办公,赋能OA系统转型

    2024年02月12日
    浏览(35)
  • Vue中如何进行游戏开发与游戏引擎集成?

    Vue.js是一款流行的JavaScript框架,它的MVVM模式和组件化开发思想非常适合构建Web应用程序。但是,如果我们想要开发Web游戏,Vue.js并不是最合适的选择。在本文中,我们将介绍如何在Vue.js中进行游戏开发,并集成一些流行的游戏引擎。 在阅读本文之前,你需要掌握以下技能:

    2024年02月11日
    浏览(45)
  • Vue2模拟贪吃蛇小游戏

    目录 一、效果展示 二、代码展示 三、原理讲解 3.1、页面创建 3.2、创建蛇与食物 3.3、移动与边界判断 3.4、吃、得分总结 view的本地文件:可直接运行。  上面代码引入的工具值:utils里的js文件 这里是刷新页面会获取的不同渐变色 20x20方格阵:由双层for循环得到一个20x20的数

    2024年02月07日
    浏览(28)
  • ssm+vue游戏攻略网站源码和论文

    ssm+vue游戏攻略网站源码和论文052  开发工具:idea   数据库mysql5.7+  数据库链接工具:navcat,小海豚等   技术:ssm 一、主要内容和基本要求 游戏攻略网站分为管理员与用户两种角色。 管理员的功能包括登录,用户管理,游戏分类管理,游戏攻略管理,游戏资讯管理等。 登录

    2024年02月11日
    浏览(44)
  • Vue2模拟俄罗斯方块小游戏

    目录 一、效果展示 二、代码分享 三、原理分析 3.1、界面搭建 3.2、方块创建 3.3、方块旋转 3.4、方块移动 3.5、移动判断 3.6、下落判断与清除 3.7、得分计算  工具函数:   主界面的20X10,类似贪吃蛇,副界面的随机方块,则是4x4,都是双重for循环。初始化的时候调用gameFram

    2024年02月08日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包