Vue.js学习笔记

发表于 | 分类于 | | 阅读次数

作为开发者，学习一门新语言或者框架的时候，势必会想到，为什么会学（用）这个呢？同样的，学vue.js理由有很多，下面是我觉得vue.js做的比较好的地方：

  1. 目前属于中文世界最流行的前端框架，有丰富的文档支持，上手极快。
  2. 单文件组件的好处

同样的，也有很多不好的地方，跟以往的框架不一样，这里会有些新的思维。本来想着把目前几个后台的smarty都切换到vue.js,发现其成本太高，如果要用vuejs，全部模板都要重构!这相当是vuejs的一些坏处了吧。。。

好了，废话不多说，开始说下vue.js的一些基础内容咯。

一、说说Vue.js

首先带个问题：

  1. Vue.js 的核心思想是什么？

    答： 1、数据驱动; 2、组件化

  2. Vue.js 的单文件组件有什么作用？

    答：

Vue.js 可以做什么？

  • 移动端的web开发
  • 后台管理系统
  • 混合应用 WebApp
  • 其他一些不用兼容IE8及以下的项目（如果你还用IE8以下的浏览器，建议你弃坑！）

1.1 常用指令

  • 条件指令 ：v-if、v-else
  • 循环指令 ：v-for
  • 事件指令 ：v-on
  • 其他指令 ：v-show、v-model …

他们都有一个共性就是v-前缀，这就是vue.js指令的特点了。那么如何使用vue.js呢？这里有个简单例子：

二、vue.js基础

2.1 数据驱动(Data-Driven)

vue.js是通过 MVVM 的数据绑定实例自动同步

2.2 组件化(Component)

2.3 实例生命周期（Life-Cycle）

常用的生命周期钩子函数

三、vue.js进阶

3.1 Vue.js 脚手架工具的使用

1
2
3
4
vue init webpack vue-demo     # 初始化项目
cd vue-demo                   # 切换到该项目
npm install                   # 安装依赖的包
npm run dev 与 npm run build   # 开发与打包

vue.js包含内容

  • template
  • script
  • css