Vue第一次课课堂代码

最新推荐文章于 2024-04-29 10:23:29 发布
最新推荐文章于 2024-04-29 10:23:29 发布
阅读量111 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mtm001/article/details/128938799
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.Vue入门.html</title>
<!-- 1.引入js文件 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 2.Vue的代码必须要指定地方显示 -->
<div id="app">
<!-- 3.数据显示的地方 插值表达式-->
<h1>{{msg}}</h1>
<span>{{name}}---{{age}}</span>
<h3>{{u.name}}---{{u.age}}</h3>
</div>
<script type="text/javascript">
//数据先装起来
let user = {
name:'李四',
age:18
}
//4.创建Vue对象,七个属性（七个葫芦娃）
let vm = new Vue({
el:'#app',//一个id叫app的地方显示
data:{
msg:'Hello',
name:'张三',
age:18,
u:user
}
})
</script>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2.双向绑定.html</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    
    </head>
    <body>
        
        <div id="app">
            {{msg}}
            <input type="text" v-model="msg">
        </div>
        
        <script type="text/javascript">
            let vm = new Vue({
                el:'#app',
                data:{
                    msg:'初始值'
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3.常用Vue指令.html</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <h3 v-if="a">下雨了</h3>
            <h3 v-else>天晴了</h3>
            
            <h3 v-if="age>=18">成年了</h3>
            <h3 v-if="name.indexOf('土耳其')>0">{{name}}</h3>
            <hr>
            <h3 v-show="a">下雨了</h3>
            <h3 v-show="!b">天晴了</h3>
            <h3 v-show="age>=18">成年了</h3>
            <h3 v-show="name.indexOf('土耳其')>0">{{name}}</h3>
        </div>
        <script type="text/javascript">
            let vm = new Vue({
                el:'#app',
                data:{
                    a:true,
                    b:false,
                    age:18,
                    name:'土耳其昨天发生两个次7.8级地震'
                }
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4.v-for.html</title>
        <style type="text/css">
            table,tr,td,th{
                border: 1px solid red;
                border-collapse: collapse;
                text-align: center;
            }
            table{
                width: 300px;
            }
            .myDiv1{
                border: 1px solid red;
                width: 200px;
                height: 200px;
            }
            .myDiv2{
                border: 1px solid red;
                border-radius: 100px;
                width: 200px;
                height: 200px;
            }
        </style>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <h3>v-bind</h3>
            <a v-bind:href="url">百度一下，你就知道了</a>
            <hr>
            <ul>数组循环
                <li v-for="(i,index) in pages">{{index}}---{{i}}</li>
            </ul>
            <hr>
            <table>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
                <tr v-for="(u,index,key) in users" :key="key">
                    <td>{{index}}---{{u.name}}</td>
                    <td>{{u.age}}</td>
                    <td>{{u.sex}}</td>
                </tr>
            </table>
            <input type="checkbox" v-model="isChange">改样式
            
            <div v-if="!isChange" class="myDiv1">
            </div>
            <div v-else v-bind:class="{'myDiv2':isChange}">
            </div>
        </div>
        <script type="text/javascript">
            let vm = new Vue({
                el:'#app',
                data:{
                    isChange:false,
                    url:'http://www.baidu.com',
                    pages:['星期一','星期二','星期三',4,5,6,7,8,9],
                    users:[
                        {
                            name:'黄涛1',
                            age:21,
                            sex:'男'
                        },
                        {
                            name:'黄涛2',
                            age:22,
                            sex:'男'
                        },
                        {
                            name:'黄涛3',
                            age:23,
                            sex:'男'
                        },
                    ]
                }
            })
        </script>
    </body>
</html>
汤永红
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue预习课2：Hello World 第一个程序
05-08
Vue预习课 Vue预习课 核心知识01——Hello World 引入Vue Hello World 理解Vue的设计思想 核心知识01——Hello World ...创建我们的第一个Vue程序 理解Vue的设计思想 数据驱动应用 MVVM模式的践行者
Springboot+Vue实现仿课堂派
云中朝颜的博客
12-19 3185
Springboot+Vue实现仿课堂派vue 前端登录注册教师管理课程功能教师管理作业功能学生课程功能学生作业功能 vue 前端 登录注册 教师管理课程功能 教师管理作业功能 学生课程功能 学生作业功能
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue.js：一课一得的前端之旅
2301_76173156的博客
12-29 1009
首先，我们来了解一下Vue.js的基本概念。Vue.js是一个渐进式JavaScript框架，用于构建用户界面。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。
Vue课堂笔记
m0_45314682的博客
02-28 492
Vue笔记 1、概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架，发布于2014年2月。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，方便与第三方库（如：vue-router:跳转，vue-resource:通信，vuex:管理)或既有项目整合。 官网：https://cn.vuejs.org/v2/guide/ 2、前端知识体系 ​ 想要成为真正的“互联网Java全栈工程师”还
解决vue请求接口第一次成功,第二次失败问题
10-14
主要介绍了解决vue请求接口第一次成功,第二次失败问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-第一节课课件.rar
06-01
Vue课件 第一节课
第一课 vue进阶课程介绍1
08-03
1.vue-cli 脚手架介绍与安装 3.vuex 状态管理知识介绍 4.vue 组件化轻量级练习介绍
SSM + Vue（案例第一课）
06-30
零基础、前后端一体、SSM、Vue、添加、修改、删除、查询、搜索、分页、上传、下载、导入、导出
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 652
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
Niucode的博客
04-26 272
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 294
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 360
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 513
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 404
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 716
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
最新发布
ZL4120505的博客
04-29 707
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
el-tree 或 el-tree-select 根据条件，控制节点的显示隐藏
IT_dabai的博客
04-25 306
要求el-tree-select 的节点根据节点数据状态来进行显示隐藏（状态字段为status，显示：‘1’，隐藏：‘0’）
vue第一次弹框二维码无法显示
06-10
可能是因为在第一次弹框时，二维码还没有完全加载完成，导致无法正常显示。 一种解决方法是在页面加载时先预加载二维码图片，或者在弹框显示时再去加载二维码图片，这样可以保证二维码图片的加载完成，避免出现无法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤永红

一分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值