vue 5个demo

最新推荐文章于 2025-01-21 14:32:33 发布
最新推荐文章于 2025-01-21 14:32:33 发布
阅读量213 收藏
点赞数
分类专栏： demo 文章标签： vue_5个demo基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>
vue项目demo
11-22
VUE项目的demo例子，便于自己随时可以下载下来学习和研究
VUE项目demo
giiiig的博客
05-13 945
一、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开发系列——开始第一个vue项目开发demo
最新发布
我的E家
01-21 344
答： 编写Vue时推荐使用的编辑器包括Visual Studio Code（VSCode）、WebStorm和Sublime Text1、 VSCodeVS 拥有大量的插件，可以极大地增强其功能。对于Vue开发，有Vue.js Extension Pack等插件可以显著提升开发体验。下载VSCode：2、webstorm商业化的JavaScript开发工具，适用于各种前端框架，包括Vue.js轻量级的代码编辑器，支持多种编程语言，通过插件可以支持Vue开发。
vue的项目搭建demo
Hacker-Prince
09-11 2679
一、安装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-demo示例
热门推荐
zpcqdkf的博客
05-31 2万+
Vue-cnodejs - 基于vue重写Cnodejs.org的webappNeteaseCloudWebApp - 高仿网易云音乐的webappvue-zhihu-daily - 知乎日报 with Vuejsvue-wechat - vue.js开发微信app界面vue2-demo - 从零构建vue2 + vue-router + vuex 开发环境eleme - 高仿饿了么app商家详情...
vue3-demo2.rar
02-05
在这个名为“vue3-demo2”的项目中，我们可以探索 Vue3 的核心特性以及如何在实际应用中使用它们。下面我们将深入讨论Vue3中的关键知识点。 1. **Composition API**： Vue3 引入了 Composition API，这是一种全新...
vue2的项目demo
11-22
在这个Vue2项目demo中，我们可以探索其核心概念和组件化开发方式。 项目demo通常是为了演示特定框架或技术的使用方法而设计的简单应用程序。一个Vue2项目demo通常会包含以下几个核心部分： 1. 入口文件(index.html...
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大屏可视化demo
01-25
vue大屏可视化demo 使用方法： # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
vue 实战项目demo
11-16
vue移动端实战app分享，使用最新版本vue2.6+vuerouter
vueweb项目demo
05-02
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以
Vue demo实例下载
05-10
vue demo vue.js-饿了吗全套
vue demo实例
02-16
本项目是asp.net mvc5+vue2.5的项目。适合新手参考和学习，本项目实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.实现了分页的功能。 4.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，请给打5分，非常感谢。
vue 2.0写的一个小demo
12-19
项demo中基本用到所有Vue的基本功能,比如,双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法见 readme
Vue的demo
2301_78263022的博客
01-28 161
打包为生产环境dist。
史上最详细VUE2.0全套demo讲解 基础1（模板语法）
weixin_34292402的博客
03-25 443
作者 : 混元霹雳手 ziksang 一开始在vue1.0的时候我就开始关注掘金的vue专栏，但是一直给我一种感受，真正能静下心来给读者写好每一个细讲，每一个讲解点，我觉得是最重要的，虽然我没有什么能力给大家带来像iview,mint ui等一系列大牛的基础vue带来的ui框架，但是我相信通过我自己一点一点的积累，自己如何去入门一个mvvm框架的时候，慢慢用上所有最常用的api这都是一个积累的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值