Vue.js(1)--下载与简单实用
Vue,正式发布于2014年2月,是一套构建用户界面的渐进式框架(MVVM模式的框架),Vue只聚焦视图层,是一个构建数据驱动的Web界面的库,它很容易上手且容易与其他第三方库或其他项目集成(注意:Vue.js因使用了ECMAScript5特性,因此不支持IE8及以下版本,推荐使用Chrome浏览器等),性能上也是很不错的,它使用基于依赖追踪的观察并且使用异步队列更新,所有模型对应的...
Vue,正式发布于2014年2月,是一套构建用户界面的渐进式框架(MVVM模式的框架),Vue只聚焦视图层,是一个构建数据驱动的Web界面的库,它很容易上手且容易与其他第三方库或其他项目集成(注意:Vue.js因使用了ECMAScript5特性,因此不支持IE8及以下版本,推荐使用Chrome浏览器等),性能上也是很不错的,它使用基于依赖追踪的观察并且使用异步队列更新,所有模型对应的数据更新都是独立触发的,这样提高了响应速度。其GitHub地址为: https://github.com/vuejs/vue,这里下载它的最新的2.3.3版本:
下载后解压目录如下,在dist子目录下就是可以引用的js文件,按需引用即可,这里引用vue.js,在开发大型项目时,更推荐使用npm来安装使用(npm install vue):
下面新建一个网页来测试下,代码如下:
Vue的数据绑定是将数据和视图相关联,当数据发生变化时,可以自动更新视图。
这里,数据和视图的绑定时通过文本插值的方式,即双大括号的方式:{{}},这样,标签{{user_input}}将会被相应的数据对象user_input属性的值替换掉,当user_input的值改变时,标签的值也会联动地发生变化,如果只需要只渲染一次,后续的数据变化不再关心,可以通过"*"实现,如:{{*user_input}}。
另外,也支持表达式操作:
这里用到了一个指令: v-model,它用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定,根据控件类型自动选取正确的方法更新元素。
打开页面后效果如下:
可以看到,vue通过一些指令(如:v-*,上面用到了v-model),指令的值限定为表达式,其作用就是当表达式的值发生变化时将这个变化也反映到DOM上,这样提高了前端的开发速度,后面再了解和测试使用Vue的更多特性。
更多推荐
所有评论(0)