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:,

}

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

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

最新文章

热门文章