<!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. 使用JFlex生成词法分析器 1：安装配置

    环境:Windows 10 STEP 1: 下载 JFlex 文件,我选择的是 jflex-1.7.0.zip.下载完成后解压到想安装的位置. 文件结构如下(假设解压目录为 C:\): C:\jfle ...

  2. php的运行原理、cgi对比fastcgi以及php-cgi和php-fpm之间的联系区别

    最近项目中本地测试环境遇到了windows环境下的nginx使用file_get_contents/curl访问php文件导致的阻塞问题,一直在找解决的方案,这个问题研究了三天终于找到了解决方案,特别 ...

  3. python基础 (初识函数&函数进阶)

    函数基础部分 .什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率. 2.定义函数 定义:def 关键词开头,空格之后接函数名 ...

  4. 如何选择合适的PHP版本

    PHP版本很多,包括32位64位以及线程安全与非线程安全在内的php版本多达几百个,应该如何选择PHP版本呢 PHP32和64的选择和区别 32bit的php的整型数据最大最小正负2GB左右(0x7F ...

  5. 创建Gitblit本地服务器（For windows ）01

    1.先下载gitblit  貌似需要FQ,百度云链接https://pan.baidu.com/s/1WUtBswj5TkFFcd_hiFFCcw,提取码: xr9n .因为gitblit是基于jav ...

  6. 五分钟让你读懂UML常见类图

    相信各位同学在阅读一些源码分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,经常看到UML类图但还不太熟悉的小伙伴赶紧来一起认识一下它吧:)   一 ...

  7. XMLHttpRequest状态码及相关事件

    1.创建一个XMLHttpRequest对象 2.对XMLHttpRequest对象进行事件的监听(定义监听事件的位置不影响 3.对XMLHttpRequest对象的状态码 状态   名称 描述 0 ...

  8. JavaScript中Object.keys用法

    Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组. var data={a:1,b:2,c:9,d:4,e:5}; console.log(data);//{a: 1, ...

  9. jieba库的使用和好看的词元

    一.jieba库的使用与说明 1.jieba库基本介绍 jieba库是优秀的中文分词第三方库 -中文文本需要通过分词获得单个的词语         - jieba是优秀的中文分词第三方库,需要额外安装 ...

  10. 使用electron开发指静脉客户端遇到的问题总结

    使用electron 使用nodejs 的ffi模块调用dll文件 总结1.electron 与nodejs版本不需要一致,甚至nodejs版本应该高于electron的node版本2.要安装 Vis ...