首页 > 代码库 > 谈谈对vue的认识:

谈谈对vue的认识:

Vue是一个数据驱动页面的一个框架,基于MVVM模式,M指的是数据,V值得是视图,VM是视图模型,将数据绑定视图上(双向绑定)

这个框架着重于VM部分

技术分享

总结起来的几大特点:

(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化Vue

vue技术双向绑定原理使我们开发页面更简单,比如我们以前用源生js开发页面时候,书写复杂可读性差,后来用jquery开发页面业务逻辑重复,可复用差,Vue通过数据双向绑定是这一一切变得更简单

Eg:(改变值)

Js:

<div></div>

 document.getElementsByTagName(‘div‘)[0].innerHTML = ‘韩国‘;

document.getElementsByTagName(‘div‘)[0].innerHTML = ‘中国‘

Jq

<div></div>

$(‘div‘).html(‘韩国‘)

$(‘div‘).html(‘中国‘)

Vue

Vue只提供一个Api就是Vue,它是类,我们要想获取Vue实例化对象,只能通过new关键字创建

 通过el定义一个Vue视图的容器元素,可以传递css选择器,id选择,类选择器,元素名称选择器等等

 页面中有多个符合条件选择器,vue只会捕获第一个符合条件的选择器对应的元素选择器

实现了将视图到视图模型的绑定

 

 <div>{{msg}}</div>

var data = http://www.mamicode.com/{

  msg: ‘韩国‘

}

new Vue({

 el: ‘div‘,

  data: data

})

data.msg = ‘中国‘

 

通过data属性可以为Vue实例化对象添加属性,添加的属性与外部的data中的数据是同步的
不论是修改外部data中的数据还是修改Vue实例化对象中的数据,他们的数据始终同步的
数据绑定实现了将模型到视图模型的绑定
var data = http://www.mamicode.com/{
msg: ‘国‘,
obj: {
color: ‘red‘
}
}
var app = new Vue({
el: ‘#app‘,
data: data
})
console.log(data.msg === app.msg)   //true
console.log(app.obj === data.obj)   //true
// data.msg = ‘下周‘

 

谈谈对vue的认识: