简介
vuejs是一种渐进式框架,可以作为应用的一部分嵌入。(举个例子,再用vue重构jquery时,可以一步一步完成,一部分界面用jquery,一部分用vue,即渐进式。)
其拥有许多特点与功能(包括且不限于):1.解耦视图和数据 2.可复用组件 3.前端路由技术 4.状态管理 5.虚拟DOM。
vue还是一种声明式的语言,不同于以往普通的js编程,这点之后的代码会体现。
安装
初期学习,建议只导入本地vue.min.js文件进行学习即可,地址如下:
https://vuejs.org/js/vue.min.js
后期学习,不可避免地要构建vue项目,要用到vue-cli,完整安装流程如下:
-
安装nodejs以获取npm
-
用npm安装cnpm(建议使用镜像)
-
用cnpm安装vue(cnpm install vue)
-
创建一个项目:
全局安装vue-cli cnpm install --global vue-cli 创建一个名为demo的项目(在当前路径目录下) vue init webpack demo 所有配置按默认的来就行,也就是不断回车即可,然后到指定目录下 cd demo 配置并运行 cnpm install cnpm run dev
此时一个项目已经建成并,可以访问http://localhost:8080查看是否运行成功
基本语法
上面提到,vue是一种声明式语法,非常的便捷。其采用Mustache模板技术,下面是一个简单的例子:
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
可以看到,这种“{{}}”符号就是模板技术的体现。其通过将div标签交付vue对象管理,能通过vue对象有效管理页面展示效果,十分智能,极大地减轻了前端工作者的负担。
{{}}中的内容会被vue解析,也就是说{{1 + 2}},vue会显示出3,变量名也会被vue用data中的数据替代,如上面例子中的message会替换成’Hello Vue.js!’。
VUE对象
vue的本质就是一个对象,从script标签中,我们也可以看出,我们是通过创建vue对象的方式来实现管理的。那么一个vue对象是什么结构的呢?
github有源码(链接https://github.com/vuejs/vue ),这里主要讲传入的参数options(可以参考手册https://vuejs.bootcss.com/v2/guide/instance.html),有:
1.data函数成员 (放数据,也可以放函数)
2.methods对象成员 (方法)
3.挂载元素el (管理元素的id)
4.生命周期钩子 (下面会讲)
5.props属性声明
6.computed计算成员
7.watch监视成员 ,等等。
讲这个的原因是我们要看清楚vue的本质,这样才能更好地使用vue对象来帮助我们构建前端页面。
上面是一个vue对象的生命周期,通过这个生命周期我们可以很好地使用生命周期钩子。我们可以通过生命周期钩子回调,进行信息交互,比如你要在某个vue对象“死亡”时执行某些操作,就可以通过钩子实现,详细教程可以看手册,这里只是简单介绍。
好地使用生命周期钩子。我们可以通过生命周期钩子回调,进行信息交互,比如你要在某个vue对象“死亡”时执行某些操作,就可以通过钩子实现,详细教程可以看手册,这里只是简单介绍。