VUE 1.0

现代开发模式：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:18,

}

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(2,str.length-2);

　　　　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:12, b,5 },
　　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标签

 

数据交互

 

组件