魏婴
魏婴

vue-1

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue初识(前后端分离)title>
    head>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    <style type="text/css">
        
    style>
    <body>
        <div id="app">
            <div v-html="name">div>  {{name}}
            <hr />
            <div v-show="show">出现div>  
            
            <div v-if="isok">欢迎进入我的主页div>
            <div v-else>请先登录div>
            <hr />
            
            <button v-on:click="res">-button>{{count}}<button @click="add">+button> 
            <hr />
            
            <ul >
                <li v-for="(item,index) in stus"> 
                    {{index}}------{{item}}
                li>
            ul>
            <hr />
            <span v-bind:title="messa">
                鼠标悬停几秒后显示页面信息
            span>
            <hr />
            
            {{message}}
            <br />
            请输入<input type="text" v-model="message" />
            <hr />
            
        div>
        <script type="text/javascript">
            //vue进入
            var vue=new Vue({//new一个Vue对象   必须找id
                el:"#app", //固定格式
                data:{
                    name:"
hello world
",
                    isok:true,
                    count:0,
                    show:true,
                    stus:["一","二","三"],
                    messa: '页面加载于 ' + new Date().toLocaleString(),
                    message:"",//初始值
                },
                    
                    
            
                
                //f方法，事件
                methods:{
                    add:function(){
                        this.count++;
                    },
                    res:function(){
                        this.count--;
                        
                    }
                }
                    
            });    
        script>
        
    body>
html>

 

你可能感兴趣的:(vue-1)

  • Vue-1 -seventy- #Vuevue.js
    Vue简介Vue是一个用于"构建用户界面(基于数据渲染出用户看到的画面)"的渐进式框架基本使用Document{{msg}}{{num}}//创建实例constboxObj=newVue({el:'.box',data:{msg:'HelloWorld',num:520}})//data中的内容绑定到了boxObj中，我们可以使用boxObj.msg和boxObj.num获得数据console.l
  • Vue-1、用idea搭建脚手架 一叶飘零晋 vuevue.jsintellij-idea前端
    1、右键选择new->选择module2.点击staicweb->选择vue.js=>选择next3.输入项目名称vuetest点击next4.耐心等待此过程需要2分钟左右。5.等待几分钟后选择在下拉框里面选择第二个。注意如果要创建vue3则选择第一个。点击next。6.创建成功
  • _vue-1 beifeng11996 vue.js
    谈谈你对MVVM的理解为什么要有这些模式，目的：职责划分、分层（将Model层、View层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上MVC模式代表：Backbone+underscore+jquery传统的MVC指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染MVVM：传统的前端会将数据手动渲染到页面上,MVVM
  • vue-1 是三好 #VUEvue.js前端javascript
    一、为什么要学习Vue1.前端必备技能2.岗位多，绝大互联网公司都在使用Vue3.提高开发效率4.高薪必备技能（Vue2+Vue3）二、什么是Vue概念：Vue(读音/vjuː/，类似于view)是一套构建用户界面的渐进式框架1.什么是构建用户界面基于数据渲染出用户可以看到的界面2.什么是渐进式所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点Vue的
  • Vue-1 核心基础 学_ vuevue.js前端
    指令v-htmlv-textv-bind/:v-on/@v-if/v-showv-for&:key使用javascript代码操作html元素，操作内容，样式，属性，事件-操作内容原生:获取h2,innerHTMLinnerText$().html()$().text()vue:1.{{数据}}模板插件指令(Directives)是带有v-前缀的特殊属性2.v-html3.v-text-操作属性原
  • Vue-1 Vue cli3 多页面配置 一颗数据小白菜
    1准备工作1.1先查看版本[email protected]:\ProgramFiles\nodejs\node_modules\npmvue-Vvue==3.11.01.2创建项目vuecreatetemplates会创建一个名为templates的项目目录结构为：初始结构.pngnpmrunserveApprunningat:-Local:http://localhost:8080/-Networ
  • VUE-1 韫秋
    1-vue.js教程vue.js是一套构建用户界面的渐进式框架。vue只关注视图层，采用自底向上增量开发的设计。vue的目标是通过尽可能简单的API实现【响应的数据绑定和组合】的视图组件。vue学习起来非常简单，本教程基于vue2.1.8版本测试。2-阅读本教程前，您需要了解的知识：htmlcssjavascript3-第一个实例{{message}}newVue({el:'#app',data:
  • 数据可视化大屏-Vue-1图表基本配置 皮 卡丘 前端开发vue.jsechartsjavascript
    1.横向柱状图bar①基本配置//ref更好的获取domexportdefault{data(){return{chartInstance:null,//图表的数据allData:null//服务器返回的数据}},mounted(){this.initChart()//初始化图表数据this.getData()//获取后端的数据},methods:{initChart(){//初始化图表数据thi
  • Vue驾校-从项目学Vue-1 starnight531 #Vue驾校vue.jsjavascript前端框架vuejava
    Vue驾校-从项目学Vue-1前言：框架安装安装Node.js：安装@vue/cli架构模式前后端分离：（Vue）前后端不分离：（Thymeleaf）前后端分离的好处：项目准备：创建新项目1.选择存储位置：2.项目名+包管理器3.预设所需插件和配置4.自配所需插件和库5.任务功能介绍：查看项目文件：1.编辑工具：2.文件目录含义：3..vue组件：3.组件内css选择器：4.main.js作用：博
  • Vue-1 dianzhaochi6393
    1.前端框架的发展历史前端工程师（攻城狮）12年.htmlcss+div13年.js加入jquery14年.MVCangular1.0react15年.vue微信小程序2.Vue.js第一次使用什么是框架？什么是库框架:是有一套自己的生态系统的库:是没有自己的生态系统的，它就是一个工具jsx(javascript+xml)总结vue.js第一次使用使用script标签引入Vue.js实例化全局暴露
  • vue-1 _有猫
    vue是什么？尤雨溪vue.js框架的作者github-vue2014年2月，开源了一个前端开发库Vue.jsVue.js是一个JavaScript来编写的框架前端框架有什么用框架就是给了规则,并实现细节发者按照规则,去实现业务逻辑帮助我们去节省DOM操作的实现细节;将数据与页面的元素挂钩双向数据绑定页面改变影响内存;内存改变影响页面启动vuenewVue(options)options(选项)注
  • VUE-1：基础、指令、数据 kino2046
    vue.js`vue.js`是一套用于构建用户界面的渐进式框架渐进式Vue核心-声明式渲染-组件引入我们还是先通过\的方式来引入vue组件`vue`的核心功能之一就是组件组件基本分类-根组件-可复用的功能组件根组件的创建通过`vue`提供的构造函数可以实例化出来一个跟组件实例对象letapp=newVue可复用的功能组件通过`Vue`提供的静态方法`component`窗口可复用的功能组件letc
  • vue-1 warmT_
    MVVM框架数据可以影响视图视图可影响数据。基本结构引入：html部分:script部分:varapp=newVue({el:'#app',data:{//所有的数据都写在data里面},methods:{//所有的函数都写在methods里面}})表达式{{msg}}-->显示、{{msg=320}}-->赋值、{{bok?"haha":"wuwu"}}-->三目{{mas}}{{msg=320
  • vue-1 魏婴
    vue初识(前后端分离){{name}}出现欢迎进入我的主页请先登录-{{count}}+{{index}}------{{item}}鼠标悬停几秒后显示页面信息{{message}}请输入//vue进入varvue=newVue({//new一个Vue对象必须找idel:"#app",//固定格式data:{name:"helloworld",isok:true,count:0,show:tru
  • Vue-1 Vue的基础语法 花懒顾 前端开发框架VueVue的基础语法vue教程vue学习vue交流群
    Vue-1Vue的基础语法三大主流框架的对比背景版本小结Angular09年发布，Google1.x,2.x,4.x,5.x(beta)基于html的大而全的MVC框架ReactFacebook于2013年5月开园最新版本:16.x基于js的视图层框架Vue尤雨溪团队2014年2月开源0.1x,1.x,2.x,虞姬2019年下半年发布3.x版本基于html视图层框架组织方式数据绑定模板能力自由度路
  • Vue.js学习笔记 大灰狼的小绵羊哥哥 【Vue点滴知识】
    Vue.js学习笔记一：入门前言https://seminelee.github.io/2016/08/18/vue-1/vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库。MV*可能大家都经常听说，我们先来理解一下MV*的概念。出现的背景MVC开始是存在于桌面程序中的，但由于后端的mvc框架的v层越来越重，后端的MVC思想就搬移到了前端。随着前端代码越来越重，能力越来
  • Java常用排序算法/程序员必须掌握的8大排序算法 cugfy java
    分类： 1）插入排序（直接插入排序、希尔排序） 2）交换排序（冒泡排序、快速排序） 3）选择排序（直接选择排序、堆排序） 4）归并排序 5）分配排序（基数排序） 所需辅助空间最多：归并排序 所需辅助空间最少：堆排序 平均速度最快：快速排序 不稳定：快速排序，希尔排序，堆排序。 先来看看8种排序之间的关系：   1.直接插入排序 （1
  • 【Spark102】Spark存储模块BlockManager剖析 bit1129 manager
    Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
  • linux 查看端口被占用情况详解 daizj linux端口占用netstatlsof
    经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序   1、lsof -i:port port为端口号   [root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080 COMMAND   PID USER   FD   TY
  • Hosts文件使用 周凡杨 hostslocahost
         一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
  • java excel工具 g21121 Java excel
    直接上代码，一看就懂，利用的是jxl： import java.io.File; import java.io.IOException; import jxl.Cell; import jxl.Sheet; import jxl.Workbook; import jxl.read.biff.BiffException; import jxl.write.Label; import
  • web报表工具finereport常用函数的用法总结（数组函数） 老A不折腾 finereportweb报表函数总结
    ADD2ARRAY ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。 示例： ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7]. ADDARRAY([3,4, 1, 5, 7], "测试&q
  • 游戏服务器网络带宽负载计算 墙头上一根草 服务器
    家庭所安装的4M，8M宽带。其中M是指，Mbits/S 其中要提前说明的是： 8bits = 1Byte 即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。 8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。 我是在计算我们网络流量时想到的
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans Spring 3 系列
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • 高性能mysql 之 选择存储引擎(一) annan211 mysqlInnoDBMySQL引擎存储引擎
    1 没有特殊情况，应尽可能使用InnoDB存储引擎。   原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她   被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃   恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
  • UDP网络编程 百合不是茶 UDP编程局域网组播
      UDP是基于无连接的,不可靠的传输   与TCP/IP相反       UDP实现私聊,发送方式客户端,接受方式服务器 package netUDP_sc; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.Ine
  • JQuery对象的val()方法执行结果分析 bijian1013 JavaScriptjsjquery
            JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。        
  • http请求测试实例（采用json-lib解析） bijian1013 jsonhttp
            由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。 package com; import java.util.HashMap; import java.util.Map; import
  • 【RPC框架Hessian四】Hessian与Spring集成 bit1129 hessian
    在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。   定义模型、接口和服务器端代码 |---Model    &nb
  • 【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析 bit1129 Mahout
    1.Mahout环境搭建  1.下载Mahout http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz    2.解压Mahout  3. 配置环境变量 vim /etc/profile export HADOOP_HOME=/home
  • nginx负载tomcat遇非80时的转发问题 ronin47
    　　nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port        详细如下： 　　 该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的： ? 1 2 3 4 5
  • java-17-在一个字符串中找到第一个只出现一次的字符 bylijinnan java
    public class FirstShowOnlyOnceElement { /**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b * 1.int[] count:count[i]表示i对应字符出现的次数 * 2.将26个英文字母映射：a-z <--> 0-25 * 3.假设全部字母都是小写 */ pu
  • mongoDB 复制集 开窍的石头 mongodb
    mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题             mo
  • [宇宙与天文]宇宙时代的经济学 comsci 经济
        宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。      在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源      以目前地球上国家的经济发展水平来讲，
  • Git忽略文件 Cwind git
         有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。 ==== ==== ==== 一些牢骚
  • MySQL连接数据库的必须配置 dashuaifu mysql连接数据库配置
    MySQL连接数据库的必须配置   1.driverClass：com.mysql.jdbc.Driver   2.jdbcUrl：jdbc:mysql://localhost:3306/dbname   3.user：username   4.password：password   其中1是驱动名；2是url，这里的‘dbna
  • 一生要养成的60个习惯 dcj3sjt126com 习惯
    一生要养成的60个习惯 第1篇 让你更受大家欢迎的习惯 1 守时，不准时赴约,让别人等,会失去很多机会。 如何做到： ①该起床时就起床， ②养成任何事情都提前15分钟的习惯。 ③带本可以随时阅读的书，如果早了就拿出来读读。 ④有条理，生活没条理最容易耽误时间。 ⑤提前计划：将重要和不重要的事情岔开。 ⑥今天就准备好明天要穿的衣服。 ⑦按时睡觉，这会让按时起床更容易。 2 注重
  • [介绍]Yii 是什么 dcj3sjt126com PHPyii2
    Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。 Yii 最适合做什么？ Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
  • Linux SSH常用总结 eksliang linux sshSSHD
    转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机   格式： ssh name@remoteserver 例如： ssh [email protected]   二、连接到远程主机指定的端口   格式： ssh name@remoteserver -p 22 例如： ssh i
  • 快速上传头像到服务端工具类FaceUtil gundumw100 android
    快速迭代用 import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOExceptio
  • jQuery入门之怎么使用 ini JavaScripthtmljqueryWebcss
    jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？   首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
  • 带filter的hbase查询优化 kane_xie 查询优化hbaseRandomRowFilter
    问题描述 hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。   问题原因 直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
  • java设计模式-单例模式 men4661273 java单例枚举反射IOC
             单例模式1，饿汉模式 //饿汉式单例类.在类初始化时，已经自行实例化 public class Singleton1 { //私有的默认构造函数 private Singleton1() {} //已经自行实例化 private static final Singleton1 singl
  • mongodb 查询某一天所有信息的3种方法，根据日期查询 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    // mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。 // 第一种方式： coll.aggregate([ {$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}}, {$match:{sendDate: '2015-
  • 二维数组转换成JSON tangqi609567707 java二维数组json
    原文出处：http://blog.csdn.net/springsen/article/details/7833596 public class Demo {     public static void main(String[] args) {        String[][] blogL
  • erlang supervisor wudixiaotie erlang
    定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他