<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./vuev2.5.21.js"></script>

</head>

<body>

    <div id="app">

            <input type="text" v-model="inputValue">

            <button v-on:click="BtnClick">提交</button>

            <ul>

                <li v-for="item in list">{{item}}</li>

            </ul>

    </div>

    <script>

        var app= new Vue({

            el:"#app",

            data:{

                list:["嗷嗷嗷"],

                inputValue:""

            },

            methods:{

                BtnClick:function(){

                //   console.log(this.list);

                this.list.push(this.inputValue);

                this.inputValue="";

                }

            }

        })

    </script>

</body>

</html>
先创建一个实例
el 接管ID /限制实例对象
data 定义数据
v-for="item in list" 这是vue的循环渲染数据
v-on:click="BtnClick" 绑定事件
v-model 是获取数据(拿值)他必须和一个事件进行绑定 /他是双向绑定input发生改变,data也会发生.
methods 定义实例(会自动执行click点击事件)/方法
<!-- ------------------------------------- -->
mvp理论知识点:
view 视图 dom 视图层
model 控制台 存储数据 模型层
Presenter中转站
jquery是面向dom
vue面向数据
vue 用到es5 核心api 和虚拟dom
 

vue模式的更多相关文章

  1. python工业互联网应用实战18—前后端分离模式之jquery vs vue

    前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...

  2. Vue+Express实现前后端分离

    先说明一下缘由,因为自己前段时间在实习,实习期间为了参与项目开发,粗略学习了下Vue.Vuex.Vue-Router,大致会一些基础的.这里也快要做毕业设计了,趁着放假回来的这两天,学习下Node的相 ...

  3. vue框架学习笔记(vue入门篇)

    vue框架 - 构建用户界面的渐进式框架 - 采用自底层向上增量开发的设计 - 核心库只关注视图层 - 当与单文件组件和vue生态系统支持的库结合使用时,也完全能够为复杂的单页应用程序提供驱动 - v ...

  4. vue面试常遇到的面试题

    最近面试了好几家公司,总结一下经常被问到的面试题. 首先呢,一开始先来一个自我介绍,没啥好说的. 接下来就是考验你vue技术的问题了 一些常见的面试题 vue的生命周期 一共有八个阶段,分别为创建前后 ...

  5. 移动端跨平台方案对比：React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架百花齐放,颇有一股推倒原生开发者的势头. 为什么我们需 ...

  6. 最火移动端跨平台方案盘点：React Native、weex、Flutter

    1.前言 跨平台一直是老生常谈的话题,cordova.ionic.react-native.weex.kotlin-native.flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头. ...

  7. megalo -- 网易考拉小程序解决方案

    megalo 是基于 Vue 的小程序框架(没错,又是基于 Vue 的小程序框架),但是它不仅仅支持微信小程序,还支持支付宝小程序,同时还支持在开发时使用更多 Vue 的特性. 背景 对于用户而言,小 ...

  8. 谷歌浏览器安装vuejs devtools 插件

    1 . 下载chrome扩展插件. 在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools 2. npm instal ...

  9. EIP权限工作流平台总结-2前端框架

      1.预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com ...

随机推荐

  1. abap 常用TCODE

    ABAP: 通过查询表TSTC或者TSTCT:SAP系统将所有的事务代码都存储在这个表中,包括字开发的Y*和Z* TCODE 事务代码功能描述 CG3Y 下载服务器上文件 CG3Z upload fi ...

  2. optional install error: Package require os(darwin) not compatible with your platform(win32)

    解决方法: cnpm rebuild node-sass cnpm install

  3. AX_ClassTemplate

    static void main(Args args) { THK_InterfaceDataExtract THK_InterfaceDataExtract; FormRun formRun = a ...

  4. 【Java】a++，++a 区分记忆

    写了个例子测试: package com.xdsux.java.basetest; public class BaseTest1 { public static void main(String[] ...

  5. 地磁应用中的低功耗无线数传模块xbee PRO S2C

    地球上每一个地理坐标点,在一段时间内磁场强度是恒定的,当车辆这种铁磁物质经过这个点时,对这个点的磁场强度产生一个连续的扰动,通过磁传感器采样数据与初始采样数据(该点的地球磁场值)进行对比,其差值为车辆 ...

  6. docker私库Harbor部署（转载）

    系统环境 centos7.3docker-ce docker version: 18.03.0docker-compose version: 1.21.0 Install Docker CE 安装依赖 ...

  7. pandas库的学习笔记

    Environment pandas 0.21.0 python 3.6 jupyter notebook 开始 习惯上,我们导入如下: import pandas as pd import nump ...

  8. adb安装apk

    1.    安装配置 1.1安装包 下载adb.zip,解压至本机 1.2环境配置 将adb安装路径加入path中 2.    安装apk 使用数据线将Android手机与电脑连接,打开手机usb调试 ...

  9. JPA学习-03

    一.单向一对多 特点:性能差,不怎么用,有集合默认懒加载 @OneToMany 1.private Set<T> t = new HashSet<>() 2.private L ...

  10. Notes ： <Hands-on ML with Sklearn & TF> Chapter 6

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...