Vue 框架-08-基础实战 demo

Vue 框架-08-基础实战 demo

前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue 基础的简单应用。

来看截图:

源代码 html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn-cnblogs/xpwi</title>
        <!--引入自定义的样式-->
        <link rel="stylesheet" href="css/demo.css" />
        <!--引入 vue 核心 js-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>

        <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
        <div id="vue-app">

            <h2> Vue 基础 demo </h2>
            <hr />

            <button v-on:click="selectA=true;selectB=false;selectedB=false;selectedA=true" v-bind:class="{red:selectedA}">爱心打气筒</button>
            <button v-on:click="selectA=false;selectB=true;selectedB=true;selectedA=false" v-bind:class="{red:selectedB}">选择B</button>

            <div class="main1" v-if="selectA" v-bind:class="{change:boom}">

                <h3 id="title1">爱心打气筒</h3>

            <div id="process">
                <div id="inProcess" v-bind:style="{width:proLength +'%'}">></div>

            </div>

            <button @click="add()" v-show="!ended">打气</button>
            <button @click="restart()" >重置</button>
            </div>
            <div class="main2" v-else-if="selectB">这里什么都没有</div>

            <hr />
            <h3>功能:</h3>
            <ul>
                <li v-for="i in tips">{{i}}</li>
            </ul>

        </div>

        <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
        <script type="text/javascript" src="js/demo.js" ></script>
    </body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
    //注意代码格式

    //el:element 需要获取的元素,一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
        selectA : true,
        selectB : false,
        selectedA : true,
        selectedB : false,
        ended : false,
        boom : false,
        len : 0,
        proLength : 0,
        //下面数组的元素是 json 对象,用于前台 for遍历
        tips:["1.选项卡切换","2.数据遍历","3.条件语句","4.动态css"],

    },
    methods:{
        add:function() {
            this.proLength += 25;
            if (this.proLength == 100){
                this.boom = true;
                this.ended = !this.ended;
            }
        },
        restart:function(){
            this.proLength = 0;
            this.boom = false;
            this.ended = false;
        }

    }

});

源代码 css 文件:

.red{
    color: red;
}

.main1{
    height:300px;
    width: 400px;
    background: url(../img/1.jpg) no-repeat;
}

.change{
    height:300px;
    width: 400px;
    background: url(../img/2.jpg) no-repeat;
}

.main2{
    height:300px;
    width: 400px;
    background: url(../img/03.jpg) no-repeat;
}

#process{
    margin-top: 10px;
    background-color: #ffffff;
    width: 100px;
}

#inProcess{
    margin-top: 10px;
    background-color: #ff0000;
}
#title1{
    color: #ffffff;margin: 0;
}

原文地址:https://www.cnblogs.com/xpwi/p/9958001.html

时间: 2024-09-30 10:54:14

Vue 框架-08-基础实战 demo的相关文章

Vue框架之基础

介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.你可以用它快速原型,或混合和匹配与其他库定义前端堆栈. Vue.js的API是参考了AngularJS

VUE框架简单基础

一个构建用户界面的框架 通过指令,来给DOM元素赋值或者其他操作. 简单的指令及其作用: 在HTML标签中显示数据: --> {{}} --> v-text --> v-html 这三条指令都是给HTML具体标签填充内容,可以是文本,也可以是其他标签 ------------------- --> v-if --> v-else 这两条命令配合使用,如果变量为true,则插入if所在的标签,否则就插入else所在的标签. ------------------- -->

Vue框架基础

Vue框架基础 1.什么是vue框架 渐进式的JavaScript框架 渐进式:可以控制一个页面的标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前端项目 2.vue有什么优势 通俗来讲: 有指令(分支结构,循环结构...),复用页面结构等 有实例成员(过滤器,监听),可以对渲染的数据做二次格式化 有组件(模块的复用与组合),快速搭建页面 官方说法: 虚拟DOM,直接加载的到内存中,加载速度更快 数据的双向绑定 单页面应用 数据驱动 3.为什么要学vue 前端框架主要有三种:An

Vue + Spring Boot 项目实战(一):项目简介 &#619178;

原文: http://blog.gqylpy.com/gqy/489 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

Selenium系列(十四) - Web UI 自动化基础实战(1)

如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识,需要自己去补充哦,博主暂时没有总结(虽然我也会,所以我学selenium就不用复习前端了哈哈哈...) 注意,目前的实战都是流水账式写的,后面才会结合框架+PO模式 目的是为了掌握所学的Selenium基础 实战题目 访问:https://m.weibo.cn/ 点击:大家都在搜 点击:微博热搜榜

CSDN学霸课表——从应用解析到基础实战,大数据入门、晋级课程推荐

[大数据]Splunk企业级运维智能&大数据分析平台新手入门视频课程 讲师:张文星 本课程系Splunk入门系列课程,实战为主,实战中穿插相关概念和理论.课程包括Splunk基础知识.安装部署.数据采集和存储.数据可视化.创建Splunk应用等.数据分析和可视化部分基于两个案例,边动手边讲解. [Hadoop]Hadoop2.X 应用解析 讲师:李锋 通过学习Hadoop2.X的教程,使学员能够掌握Hadoop2的应用原理,对Hadoop2的体系结构有清晰的认识,并能够熟练部署Hadoop2的高

基于J2EE平台下SSH2+JBPM4.4+ExtJs4.1 框架整合&项目实战

基于J2EE平台下SSH2+JBPM4.4+ExtJs4.1 框架整合&项目实战 推荐给大家一套企业实战项目开发的教程. 课程包含了以下主要的技术面:前端采用Extjs4.x:后台使用目前中小型开发较为常用的SSH2作为框架,囊括了JBPM4.4工作流引擎. 课程经由基础学习向高阶跨进,一步一步介绍了前后台的关系,以及前后台的整合.JBPM的整合等等,都是属于目前较为重要的技术点. 咨询QQ:1609173918 课程大纲: 第1讲:课程概要_Extjs入门: 第2讲:Grid与Store的应用

理解vue实现原理,实现一个简单的Vue框架

参考: 剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程 本文所有代码可以在git上找到. 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了.最近JS实在是太火,从前端到后端,应用越来越广泛,各种框架层出不穷,忍不住也想赶一下潮流. Vue是近年出的一个前端构建数据驱动的web界面的库,主要的特色是响应式的数据绑定,区别于以往的命令式用法.也就是在var a=1;的过程中,拦截'='的过程,从而实现更新数据,w

基于J2EE平台下SSH2+JBPM4.4+ExtJs4.1 框架整合&amp;项目实战(HR项目开发、SSH2作为框架)

对这个课程有兴趣的朋友可以加我的QQ2059055336和我联系 课程讲师:ANDY 课程分类:Java 适合人群:中级 课时数量:46课时 用到技术:Extjs.SSH2.Mvc 涉及项目:HR项目用户管理.Extjs树形结构.流程接口 更新程度:完成 课程包含了以下主要的技术面:前端采用Extjs4.x:后台使用目前中小型开发较为常用的SSH2作为框架,囊括了JBPM4.4工作流引擎.课程经由基础学习向高阶跨进,一步一步介绍了前后台的关系,以及前后台的整合.JBPM的整合等等,都是属于目前较