vuejs入门级简单实例

ITandYT      2022-02-12     555

关键词:

Vue作为2016年最火的框架之一,以其轻量、易学等特点深受大家的喜爱。今天简单介绍一下Vue的使用。

首先,需要在官网下载vuejs,或者直接用cdn库。以下实例使用Vue实现数据绑定与判断循环:

 1 <!DOCTYPE html>  
 2 .<html>  
 3    <head>  
 4        <meta charset="UTF-8">  
 5         <title></title>  
 6    </head>  
 7     <body>  
 8         <div id="app1">  
 9            <!--vue判断-->  
10           <span v-if="ok">  
11                {{message}}  
12            </span>  
13             <!--vue循环-->  
14             <ul>  
15                <li v-for="l in list">  
16                    my name is {{l.name}},I am {{l.age}} years old  
17                </li>  
18            </ul>  
19        </div>  
20         <!--引入cdn库,引入js需要在最底部-->  
21        <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>  
22         <script src="js/v1.js" type="text/javascript" charset="utf-8"></script>  
23     </body>  
24 </html>  

js代码:

//声明  
02.var app1=new Vue({  
03.    //绑定 DOM 元素  
04.    el:‘#app1‘,  
05.    data:{  
06.        message:"hello world",  
07.        list:[  
08.            {name:‘lvxueyuan‘,age:15},  
09.            {name:‘xueyuan‘,age:15},  
10.            {name:‘yuan‘,age:15},  
11.            {name:‘lv‘,age:15},  
12.            {name:‘lvxue‘,age:15}  
13.        ],  
14.        ok:1  
15.    }  
16.})  

  大家快来试试吧!!!

angularjs的简单使用(入门级)

  AngularJS诞生于2009年,由MiskoHevery等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注... 查看详情

vuejs入门

先写个标题,慢慢写。。。  vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。  Vue.js的目标是通过尽可能简单的API实现响应的... 查看详情

阿里云简单部署项目(入门级)(代码片段)

操作如下1.在本地将项目打成jar包(war包的话,服务器需要部署tomcat,走tomcat那一套)//两种方式//1.命令模式//本地找到项目目录,通过命令将target下的文件先全部清除//在项目目录执行以下命令,注意pom文件里指定打包为jar或者不要... 查看详情

一个非常简单的入门级asp.netcoreautofac使用(代码片段)

好好学习,天天向上。这是结构。   方法一 在Program中,添加Autofac服务1:1publicstaticvoidMain(string[]args)23CreateHostBuilder(args).Build().Run();45//publicstaticIHostBuilderCreateHostBuilder(string[]args 查看详情

jstl简单入门学习实例

Maven依赖:<dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency>建立页面index.jsp<%@pagelanguage="jav 查看详情

python信息安全技术篇简单实现入门级隐写术

前言利用Python简单实现图片隐写术,废话不多说,直接开始吧~开发工具Python版本:3.5.4相关模块:cv2模块;pillow模块;numpy模块;以及一些Python自带的模块。环境搭建安装Python并添加到环境变量... 查看详情

struts简单入门实例

 转自http://www.cnblogs.com/xing901022/p/3961661.html有改动struts2其实就是为我们封装了servlet,简化了jsp跳转的复杂操作,并且提供了易于编写的标签,可以快速开发view层的代码。过去,我们用jsp和servlet搭配,实现展现时,大体的过... 查看详情

vue.js入门

背景为了学习spring,准备写一个通讯录demo,实现增删改查功能。前端页面同事推荐用vue.js,因为简单快速,当然前提是基于你对前端的html,css,js有一定的了解 资料 vue.js官网:https://cn.vuejs.org/axios:https://www.npmjs.com/package/a... 查看详情

springboot学习入门篇-idea开发简单的helloworld实例

原文:http://www.zuidaima.com/blog/3386443542367232.htmspringBoot学习入门篇-idea开发简单的helloworld实例 最近学习springBoot,用Idea写了一个简单的实例,分享给有需求的牛牛们.1.idea创建一个完整的maven项目项目完整结构:2.打开pom.xml添加springBoot相... 查看详情

lb(loadbalance)负载均衡集群--{lvs-[nat+dr]单实例实验+lvs+keeplived实验}菜鸟入门级

LB(Loadbalance)负载均衡集群LVS-[NAT+DR]单实例实验LVS+keeplived实验LVS是LinuxVirtualServer的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统。逻辑可分为:1调度层(Director):它是整个集群对外面的前端机,负责将客户的请求... 查看详情

docker入门到实践——简单操作

1.对比传统虚拟机总结特性容器虚拟机启动秒级分钟级硬盘使用一般为MB一般为GB性能接近原生弱于系统支持量单机支持上千个容器一般几十个2.基本概念Docker包括三个基本概念:镜像(Image)容器(Container)仓库(Repository)Docker... 查看详情

mybatis框架——入门级

什么是mybatis框架?  MyBatis是一款优秀的持久层框架,它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解来配置和映射原生信息,将接口... 查看详情

elasticsearch数据搜索篇·入门级干货===转

ES即简单又复杂,你可以快速的实现全文检索,又需要了解复杂的RESTAPI。本篇就通过一些简单的搜索命令,帮助你理解ES的相关应用。虽然不能让你理解ES的原理设计,但是可以帮助你理解ES,探寻更多的特性。其他相关的内容参... 查看详情

如何从父级更新 vuejs 组件

】如何从父级更新vuejs组件【英文标题】:howtoupdatevuejscomponentfromparent【发布时间】:2017-06-1810:17:44【问题描述】:我对VueJs有点迷茫,我尝试用组件和Vue更新的数据制作一个vue。我了解如何使用$emit更新父值。如果可以的话,有... 查看详情

一起使用 TypeScript 和 Vuejs 时的对象级变量?

】一起使用TypeScript和Vuejs时的对象级变量?【英文标题】:ObjectlevelvariableswhenusingTypeScriptandVuejstogether?【发布时间】:2018-06-1103:12:02【问题描述】:我不确定最好的方法是什么。我非常想制作一个组件,并且我有一些我想使用的... 查看详情

idea入门级

最智能的IDE智能提示重构代码更友好的代码提示功能什么叫智能强大的纠错能力IDEA的基础配置jdk的配置IDEA的个人配置与常用操作IDEA的个人配置IDEA的常用操作快捷键最智能的IDEIDEA相对于eclipse来说最大的优点就是它比eclipse聪明... 查看详情

mybatis快速入门,mybatis简单实例,如何使用mybatis

目录结构:  1.导入所需要的包2.创建数据库createdatabasemybatis;usemybatis;CREATETABLEusers(idINTPRIMARYKEYAUTO_INCREMENT,NAMEVARCHAR(20),ageINT);INSERTINTOusers(NAME,age)VALUES(‘Tom‘,12);INSERTINTOusers(NAME, 查看详情

Vuejs:是不是可以在 vue-devtools 中命名 Vue 实例?

...述】:我正在实现一个包含多个Vue实例的网页。我有一个简单的问题:是否可以使用vue-devtools以他们的名字命名并显示它们?实际 查看详情