vue学习(一)——安装与基本使用

简介

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,完整安装流程如下:

  1. 安装nodejs以获取npm

  2. 用npm安装cnpm(建议使用镜像)

  3. 用cnpm安装vue(cnpm install vue)

  4. 创建一个项目:

    全局安装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对象“死亡”时执行某些操作,就可以通过钩子实现,详细教程可以看手册,这里只是简单介绍。

发布了23 篇原创文章 · 获赞 0 · 访问量 578

猜你喜欢

转载自blog.csdn.net/CSDN_Yong/article/details/103085945
今日推荐