Vue.js基础

最新推荐文章于 2024-06-12 08:41:10 发布
最新推荐文章于 2024-06-12 08:41:10 发布
阅读量674 收藏
点赞数
分类专栏： -----Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GeekLeee/article/details/73412243
版权

引入Vue.js的链接

<meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js"></script>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

脚本书写规范

模板变量

for循环

v-model

这里写图片描述

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/vue1.js"></script>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

        <style type="text/css">
            .ui.segment.container {
                width:700px;
            }
            h1 {
                font-family:'Oswald', sans-serif;font-size:40px!important;
            }

            p {
                font-family: 'Raleway', sans-serif;
                font-size:18px;
            }

            body {
                background:url(images/star_banner.jpg);
                background-size:cover;
                background-repeat:no-repeat;
                background-attachment:fixed }

        </style>
    </head>
    <body id="app">

        <div class="ui  segment padded container" >
            <h1 class="ui header">
                {{ article.title }}

            </h1>
            <p>
                {{ article.content }}
            </p>
        </div>

        <!-- Comments&Form's here -->
        <div class="ui segment container" style="width:700px;">
            <h3 class="ui header" style="font-family:'Oswald', sans-serif;">Comments</h3>
            <div v-for="comment in comments" class="ui comments">
                <div class="comment">
                    <div class="avatar">
                        <img src="images/matt.jpg" alt="" />
                    </div>
                    <div class="content">
                        <a href="#" class="author">{{ comment.name }}</a>

                        <p class="text" style="font-family: 'Raleway', sans-serif;">
                            {{ comment.said }}
                        </p>
                    </div>
                </div>

            </div>
            <div class="ui divider"></div>
            <h3 class="ui header">你还可输入{{ 200-message.length }}字</h3>
            <form class="ui form" action="index.html" method="post">
                <input v-model="message" type="text">
            </form>
        </div>

        <script>
            var vm = new Vue({
                el:"#app",
                // context
                data:{
                    //context['article'] = article
                    article:{
                        title:"This is a title",
                        content:"Hi there!"
                    },
                    comments:[
                        {name:"John Doe",said:"Great!"},
                        {name:"John Doe",said:"Great!"},
                        {name:"John Doe",said:"Great!"},
                        {name:"John Doe",said:"Great!"},
                    ]
                }
            })
        </script>

    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shopping</title>
        <script type="text/javascript" src="js/vue1.js" ></script>
        <link rel="stylesheet" href="css/semantic.css"  media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
        <style type="text/css">
            body {
            font-family: 'Raleway', sans-serif;
            }

            .ui.container.nav {
            width: 500px;
            }
            .ui.simple.dropdown:hover > .menu{
            top: 70%!important;
            }
            .ui.basic.segment.container.content {
            width: 850px;
            }

            .ui.basic.black.center.button {
            position: relative;
            transform: translate(-50%,0);
            left:50%;
            }
        </style>
    </head>
    <body id="app">
        <div class="ui container nav">
            <div class="ui borderless text three item menu ">
                <div class="ui simple dropdown  item" style="top: 70%;">
                    {{ demo1.name }}
                    <i class="dropdown icon"></i>
                    <div  class="menu">
                        <a class="item" v-for="me1 in demo1.body" href="#">{{ me1.name }}</a>
                    </div>
                </div>
                <div class="ui simple dropdown  item" style="top: 70%;">
                    {{ demo2.name }}
                    <i class="dropdown icon"></i>
                    <div class="menu" >
                        <a class="item" v-for="me2 in demo2.body" href="#">{{ me2.name }}</a>
                    </div>
                </div>
                <div class="ui simple dropdown  item" style="top: 70%;">
                    {{ demo3.name }}
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" v-for="me3 in demo3.body" href="#">{{ me3.name }}</a>
                    </div>
                </div>


            </div>
        </div>
        <div class="ui basic segment container content">
            <div class="ui four column grid">
                <div class="column">
                    <div class="ui image">
                        <img src="images/1.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/2.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/3.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/4.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/5.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/6.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/7.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/8.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/9.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/10.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/11.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>
                <div class="column">
                    <div class="ui image">
                        <img src="images/12.jpg" alt="">
                    </div>
                    <p style="text-align:center;font-size:14px;margin-top:10px;">SIGNATURE SILK SHIRT</p>
                    <h4 style="text-align:center;font-size:14px;margin-top:10px;">$298.00</h4>
                    <button class="ui basic black center button">ADD TO CART</button>
                </div>

            </div>
        </div>

        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    demo1:{
                        name:"明星同款",
                        body:[
                            {name:"Rihanna"},
                            {name:"Victoria Beckham"},
                            {name:"Emma Roberts"},
                        ]
                    },
                    demo2:{
                        name:"精选活动",
                        body:[
                            {name:"黑五大促"},
                            {name:"双十一返场"},
                            {name:"双十二预热"},
                        ]
                    },
                    demo3:{
                        name:"推荐品牌",
                        body:[
                            {name:"Equipment"},
                            {name:"Everlane"},
                            {name:"Alexander Wang"},
                            {name:"Michael Kors"},
                        ]
                    },
                },
            })
        </script>


    </body>
</html>
GeekLeee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js基础教学视频源码 5天内容
09-21
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。这个"vue.js基础教学视频源码 5天内容"提供了一套完整的 Vue 学习路径，适合初学者快速上手。通过这五天的学习，你可以从零开始掌握Vue的基础概念和...
Vue.js前端开发基础与项目实战
08-13
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。在“Vue.js前端开发基础与项目实战”这个主题中，我们将深入探讨Vue.js的核心概念、基本语法以及实际项目的构建过程。 1...
iview给布局MenuItem标签绑定点击事件
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
11-20 8753
 @click.native="info" &lt;template&gt; &lt;div class="index"&gt; &lt;Menu mode="horizontal" :theme="theme1" active-name="1"&gt; &lt;div class="menu
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
Vue.js基础教程
Ronychen的博客
04-15 4561
一、简单介绍 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 二、优点 三、安装与部署 直接script标签引入 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 通过
Vue.js基础知识解析：探索Vue实例
Why_does_it_work的博客
07-12 1161
Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于理解和集成的，使开发者能够快速构建交互性强、高效、可复用的Web应用程序。Vue.js采用了组件化的开发模式，通过封装可重用的组件，使得构建复杂的UI界面变得简单而直观。
Vue.js知识归纳与总结
jh15005767557的博客
12-23 1767
Vue.js 是一款流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序 (SPA)。Vue.js 提供了数据绑定、组件化、路由管理、状态管理等一系列功能，使得开发人员可以使用简单的 API 快速构建高效、可维护、易扩展的 Web 应用程序。通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。我学习了许多实用的开发技巧和最佳实践。
Vue | Vue.js 基础 模版语法
CoderHing的博客~
10-22 3069
Vue基础知识点 模版语法的使用
vue.js基础入门(IDEA)
weixin_60096751的博客
08-17 1495
vue.js学习
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
热门推荐
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
【优质书籍推荐】Vue.js+Node.js全栈开发实战
weixin_43178406的博客
04-20 1万+
本文深入讲解了全栈开发巨作：《Vue.js+Node.js全栈开发实战（第2版）》，希望能对学习Java的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书特色 2.3 作者简介 2.4 本书目录 2.5 适合读者 3. 购买链接
Web应用开发实战 - Vue.js基础
m0_62800996的博客
08-31 355
Web应用开发实战 - Vue.js基础。Vue.js的基本使用
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.js基础综合案例.zip
11-09
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。它以其易学易用、组件化开发、高效的虚拟DOM以及丰富的生态系统而受到开发者喜爱。本资料"vue.js基础综合案例.zip"提供了学习Vue.js...
VB+ACCESS宾馆客房管理系统(系统+论文+封面).zip
最新发布
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
自密实混凝土的研究进展.doc
08-16
自密实混凝土的研究进展.doc
基于Andriod条码识别的商品价格查询软件APP设计与实现.docx
08-16
基于Andriod条码识别的商品价格查询软件APP设计与实现.docx
基于python的人脸控制俄罗斯方块小游戏
08-16
基于python的人脸控制俄罗斯方块小游戏
Vue.js基础面试填空题解析
在Vue.js框架中，这些填空题主要涉及到了Vue的基础概念和核心特性，包括指令系统、动态渲染、组件化、响应式数据处理以及插槽机制等。下面是对每个问题的详细解释： 1. **指令**：Vue.js中的指令是以`v-`为前缀的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值