现代开发模式:vue/react。  20%的时间花在了表现层

传统开发模式:jquery。  80%的时间花在了表现层

MVC——数据、表现、行为分离

视图层(表现层)<----->数据层

MVC、MVP、MVVM
vue的核心是数据,vue是典型的MVVM结构

前台渲染 vs 后台渲染

前台渲染好处:降低服务器负担、带宽压力小、用户体验好、

后台渲染好处:SEO更好、兼容性更好、安全性更高

指令(directive)——补充了html的属性

v-bind(简写为:):向html属性里面输出东西,可以用于任何属性,有两个属性有另外的写法:class、style。这两个属性可以用数组以及json。

v-model:数据双向绑定。只要用于输入组件(input,...),数据(data)和input之间双向绑定。

通过v-model进来的数据都是字符串。

v-text和v-html:一个是转义输出一个是非转义输出

v-text比较少用,直接输出html代码;v-html是innerHTML;

v-on:eg:v-on:click="fn()",()可以不加东西

v-on的简称是@,@click="fn()"。

事件修饰符:

@click.stop = 'fn()'——阻止冒泡

@click.once = 'fn()'——单次事件

@click.prevent = 'fn()'——阻止默认事件

@click.native——原生事件(组件)

@keydown.enter——筛选按键 .keycode|name|

@keydown.ctrl.enter——组合按键

@self

@capture

v-show 只是显示隐藏,控制元素的display

v-if 会删除这个元素

v-for

1.循环数组  v-for="item,index in array"

2.循环json  v-for="val,key in json"

3.循环字符串  v-for="char,index in str"

4.循环数字  v-for="i in num"

跟for密切联系的:key

虚拟dom——json

:key属性(跟虚拟dom有巨大的关系)

1.key属性不能重复(唯一)

2.key属性不能改变

v-pre——预编译

提高性能

放置意外的解析

v-cloak

渲染未完成时不显示vue代码,*[v-cloak]{display:none}


1.vm结构

  new Vue({

    el,data,methods,

    computed,props,watch,template,router,.......

  })

2.概念

  数据同步

  双向绑定

  虚拟DOM

3.指令

双向绑定:

<script>

let el = document.getElementById('div1');

let template = el.innerHTML;

let _data = {

  name:'blue',

  age:,

}

let data = new Proxy(_data,{

  set(obj,name,value){

    obj[name]=value;

    console.log(`有人试图设置${name}=>${value}`);

    render();

  },

  get(){

  },

});

render();

function render(){

  //渲染

  el.innerHTML = template.replace(/\{\{\w+\}}/g,str=>{

    str = str.substring(,str.length-);

    return _data[str];

  })

  //找所有的v-model

  Array.from(el.getElementBysTagName('input'))

  .filter(ele=>ele.getAttribute('v-model'))

  .forEach(input=>{

    let name = input.getAttribute('v-model');

    input.value = _data[name];

    input.oninput = function(){

      data[name] = this.value;

    };

  });

}

</script>

虚拟DOM:

合并请求,快速查询,局部刷新


computed——计算属性

1.缓存——性能

2.方便——可读可写,属性的形式

<div id="div1">{{a}}+{{b}}={{sum}}</div>

let  vm = new Vue({
  el:'#div1',
  data:{ a:, b, },
  computed:{
    sum(){ return this.a+this.b; }
  }
})
<div id="div1">
  姓:<input type="text" v-model="familyName"><br>
  名:<input type="text" v-model="givenName"><br>
  <input type="text" v-model="name">
</div>
let  vm = new Vue({
  el:'#div1',
  data:{ familyName:'张',givenName:‘三’ },
  computed:{
    name:{
      get(){ return this.familyName+this.givenName; },
      set(value){
        this.familyName=value[0];
        this.familyName=value.substring(1);
      }
    }
  }
})

watch——监听(适合做搜索栏下拉提示选项)

vue-router

1.路由容器  <router-view></router-view>

2.路由表  let router = new VuewRouter( {path,component}, {path,component}, {path,component},.....)

3.添加到vm对象  new Vue({  el,data,...,router:router  })

router-view  容器

router-link  a标签

数据交互

组件

VUE 1.0的更多相关文章

  1. 使用 Vue 2.0 实现服务端渲染的 HackerNews

    Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.v ...

  2. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  3. vue 2.0 无法编译ES6语法

    # vue2.0 webpack 无法编译 ES6 语法 之前在使用 vue 1.x 时用 vue-loader@8.0.0 版本可以正常打包vue的代码,包括ES6语法也能正常转为ES5语法,但是当 ...

  4. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...

  5. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  6. Vue 2.0基础语法:系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  7. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  8. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  9. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  10. Vue 1.0 和 2.0 执行顺序

    // Vue 生命周期 // Vue 1.0 // 执行步骤:选项/生命周期钩子 // 1 init // 2 created // 3 beforeCompile // 4 compiled // ...

随机推荐

  1. 2、CString与string借助char *互转

    CString是MFC中的类,MFC前端界面中获得的字符串是CString类.标准C/C++库函数是不能直接对CString类型进行操作的. string是C++中的类. 安全性 CString &g ...

  2. Postman使用tv4进行JSON Schema结构验证和断言

    JSON Scheme简介 对于JSON格式的请求数据或者响应数据,在不同的数据和场景下往往会有一部分动态的值及字段.此时我们可以使用JSON Scheme Validator(JSON结构验证)来验 ...

  3. 秒的换算:ms(毫秒),μs(微秒),ns(纳秒),ps(皮秒)

    皮秒 皮秒,符号ps(英语:picosecond ).1皮秒等于一万亿分之一秒(10-12秒) 1,000 皮秒 = 1纳秒 1,000,000 皮秒 = 1微秒 1,000,000,000 皮秒 = ...

  4. nodejs的npm命令无反应的解决方案

    这二天用npm下载模块的时候输入npm命令完全无反应,不是加载的那种状态而是下标不停地在哪里闪...之后找解决方案,说要删除npmrc文件.强调:不是nodejs安装目录npm模块下的那个npmrc文 ...

  5. cucumber+testng

    执行顺序 beforeSuite in RunnerForInt beforeSuite in RunnerForString beforeTest in RunnerForInt beforeTes ...

  6. Mysql 逗号分隔行列转换总结

    方法一 存储过程实现: -- 修改结束符,防止在mysql命令行中默认分号直接运行 delimiter $$ -- 创建一个计算拆分后字符串的个数函数 drop function if exists ...

  7. ERROR 1292(22007)

    ERROR 1292(22007) Table of Contents 1. 1292 1.1. 22007 1 1292   1.1 22007 错误信息 ERROR 1292 (22007): T ...

  8. React Native 常用第三方组件

    React-Native-Elements 一组开发RN的UI工具包(强烈推荐)

  9. springmvc快速入门(XML版本)

    1)springmvc快速入门(传统版) 步一:创建springmvc-day01这么一个web应用 步二:导入springioc,springweb , springmvc相关的jar包 步三:在/ ...

  10. solr 初接触

    solr教程,值得刚接触搜索开发人员一看 http://blog.csdn.net/awj3584/article/details/16963525