vue 5个demo

最新推荐文章于 2024-04-18 14:41:10 发布
最新推荐文章于 2024-04-18 14:41:10 发布
阅读量181 收藏
点赞数
分类专栏： demo 文章标签： vue_5个demo基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hr226/article/details/101996935
版权 
<!-- 案例一 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="inputVal">
        <button @click="handleBtnClick">提交</button>
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                list: [],
                inputVal: '',
            },
            methods: {
                handleBtnClick() {
                    // this.$data.list.push(this.$data.inputVal);
                    this.list.push(this.inputVal);
                    this.inputVal = ''
                }
            }
        })
    </script>
</body>

</html> -->

<!-- 案例二 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body> -->
<!-- 介绍MVVM(View[V]:dom《=ViewModel[VM]:vue[dom listeners 、 data bindings]=》Model[M]:plain javascript objects) -->
<!-- <div id="root">
        <input type="text" v-model="inputVal">
        <button>提交</button>
        <ul>
            <li v-for="(item, index) in list" :key="index"></li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#root",
            data: {
                list: [],
                inputVal: ''
            }
        })
    </script>
</body>

</html> -->

<!-- 案例三 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList JQuery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body> -->
<!-- 介绍MVP(view视图层《=V发生变化会发送信号给P，P随机执行script里边的代码=》presenter控制层《=P发送ajax请求给M，M返回数据给P=》model模型层)-->
<!-- <div> -->
<!-- view视图层V -->
<!-- <input id="input_elem" type="text">
        <button onclick="handleBtnClick()">提交</button>
        <ul id="ul_elem"></ul>
    </div>
    <script type="text/javascript">
        // 业务逻辑
        // presenter控制器P
        var inputElem = $('#input_elem');
        var inputVal = inputElem.val();
        var ulElem = $("#ul_elem");
        ulElem.append('<li>' + inputVal + '</li>');
        inputElem.val('');
    </script>
</body>

</html> -->

<!-- 案例四 -->
<!-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body> -->
<!-- 组件化开发、父子组件传值问题 -->
<!-- <div id="root">
        <input type="text" v-model="inputVal">
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item :index='index' :content="item" v-for="(item, index) in list" :key="index" @delete="handleItemDelete"></todo-item>
        </ul>
    </div>

    <script type="text/javascript">
        // 定义全局组件
        // todoItem驼峰命名组件，在页面引用时，(两个词之间)要用短横线分隔
        /* Vue.component('todoItem', {
            props: ['content'],
            template: '<li>{{content}}</li>'
        }) */

        // 局部注册组件
        var todoItem = {
            // props 从父组件向子组件传值
            props: ['content', 'index'],
            template: '<li @click="handleChildClick">{{content}}</li>',
            methods: {
                handleChildClick() {
                    // this.$emit(event, ${[…args]})  event自定义事件名称， args参数 可选
                    // 子组件向父组件传值
                    // this.$emit('delete')
                    this.$emit('delete', this.index)
                }
            }
        }

        var vm = new Vue({
            el: "#root",
            components: {
                todoItem,
            },
            data: {
                list: [],
                inputVal: '',
            },
            methods: {
                handleBtnClick() {
                    this.list.push(this.inputVal);
                    this.inputVal = '';
                },
                handleItemDelete(index) {
                    this.list.splice(index, 1);
                }
            }
        })
    </script>
</body>

</html> -->

<!-- 案例五 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <!-- vue 计算属性的setter和getter -->
    <div id="root">
        {{fullName}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#root",
            data: {
                firstName: 'Hello',
                lastName: 'World'
            },
            computed: {
                fullName: {
                    get() {
                        console.log('计算属性执行一次');
                        return this.firstName + " " + this.lastName;
                    },
                    set(value) {
                        var arr = value.split(" ");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            },
        })
    </script>
</body>

</html>
hr226
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目流程demo示例
tang31415926的博客
03-07 1319
自己写从头做一个vue项目，没什么技术，主要是温故流程。 没写完，只写到创建完项目。
vue项目demo
11-22
VUE项目的demo例子，便于自己随时可以下载下来学习和研究
【vue系列-01】vue初级入门以及demo实现详解
zhenghuishengq的博客
12-16 8297
vue的初级入门以及代码实现
通过一系列vue-demo入门vue2
xiuxialala的博客
04-18 491
【代码】通过一系列vue-demo入门vue2。
Vue.Demo搭建（迈出第一步）
记录 分享 成就
04-19 2791
环境准备 node环境 npm环境 vue-cli环境 创建工程 vue init webpack 项目名称 项目名称都是小写字符 vue init webpack demo1 备注： Project name：项目名称，只能全小写，为什么必须全小写，据说是方便不同系统之间的移植（可移植性？） Project description：项目说明，随意啦，默认也行 Author：作者名 Vue build：默认选中了Runtime + Compiler（运行时编译），既然他推荐这个，
vue前端开发demo示例
qq_43313505的博客
07-13 5595
vue前端开发demo示例 目录vue前端开发demo示例系统结构js部分界面部分界面![在这里插入图片描述](https://img-blog.csdnimg.cn/20210713162511803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzEzNTA1,size_16,color_FFFFFF,t_70) 系统结构
vue3 demo.zip
12-05
在"vue3 demo.zip"中，我们有以下几个主要的子文件： 1. "vue-bilibili-master"：这是一个模仿哔哩哔哩（B站）界面的Vue3应用实例。它展示了如何在Vue3中构建一个复杂的用户界面，包括组件化、状态管理、路由处理等...
Vue3-demo 示例代码
10-08
在这个“Vue3-demo”示例代码中，我们可以深入学习和理解 Vue3 的核心概念和最佳实践。 1. **Composition API**： Vue3 引入了 Composition API，这是对 Options API 的补充和扩展。它允许开发者按需组合功能，...
vue3-demo:vue3-演示
04-01
vue3-演示 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue 2.0写的一个小demo
12-19
在"vue 2.0写的一个小demo"中，我们可以看到开发者运用了Vue的多个核心概念和技术。以下是对这些知识点的详细解释： 1. **双向数据绑定**：Vue 的核心特性之一是双向数据绑定（Two-Way Data Binding）。通过 `v-...
Vue创建Demo项目
weixin_41924879的博客
02-01 1378
Vue创建Demo项目
vue的项目搭建demo
Hacker-Prince
09-11 2574
一、安装node环境 　　1、下载地址为：https://nodejs.org/en/ 　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 　　 　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。 　　 　　检查是否安装成功：
从零开始搭建一个vue项目（保姆级教程）
weixin_50989469的博客
07-23 4215
我这边在本地起了一个后台服务（建议后台服务做好跨域配置），模拟接口访问调用，一共测试了三种方式：①get无参请求 ②get有参请求 ③post请求json传参。新建api文件夹，放在api文件夹下，需要引入http文件，js文件地址：src/api/pageB.js。项目建好之后，就可以配置ui组件了，可以选择npm去装，也可以选择yarn安装，我把两个命令都列出来了。第二步，选择【Vue.js】，输入自己项目的名称，点击【Create】生成项目。在main.js中import之后，ui组件才正式生效。
vue一些demo整理
weixin_41086056的博客
04-18 1688
vue基础案例汇总001 tab切换002 todolist简陋版 001 tab切换 <template> <div> <ul> <li :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in lis...
Vue项目demo汇总
热门推荐
前端视听
09-09 1万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能力都能够有所进步。 1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.
从零开始创建Vue项目(附带模板Demo)
Aiden的笔记本
03-20 1714
本文为新手向教程，详细介绍如何从零开始创建一个Vue项目，并附带空项目模板，模板包括路由配置和设计，请求后端方法的封装等，方便直接上手使用。
VUE项目demo
giiiig的博客
05-13 869
一、npm环境安装 安装npm，是否安装成功检查： 在命令行输入 npm -v 显示版本号，则安装成功，npm因为我之前安装好了，这里不再写安装步骤了 https://www.cnblogs.com/hellman/p/10985377.html 二、搭建vue npm install --global vue-cli 进入你要创建的vue项目目录，创建vue项目,vue-demo为项目名称 vue init webpack vue-demo 创建过程中提示的Y/n我都选的Y 三、启.
vue create vuedemo1
最新发布
06-03
Vue CLI 是 Vue.js 官方提供的一个标准工具，它提供了一套完整的基于命令行的用户界面，让我们快速地搭建一个 Vue.js 项目。其中 vue create 命令是用来创建新的 Vue 项目的命令。 如果您使用 vue create vuedemo1 命令创建了一个名为 vuedemo1 的 Vue 项目，那么它将会创建一个包含了 Vue.js 环境、Webpack 打包工具和一些基础配置的项目模板。在创建完毕后，您可以使用命令行工具进入该项目并开始编写您的 Vue.js 应用程序。 除此之外，Vue CLI 还提供了许多便捷的功能，例如自动生成组件、路由、状态管理等模板代码，还有通过插件的方式快速集成第三方库等。总之，Vue CLI 让我们更加便捷地进行 Vue.js 的开发和构建。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值