Vue.js初学笔记

Vue.js

首先学习vue.js，应该要了解前段开发基础：html、css、js等，熟悉前端模块化基础，对ES6有初步的了解。
vue.js的官网： http://cn.vuejs.org
vue.js官网教程: http://cn.vuejs.org/guide/installation.html
vue.js的一个组件就是一个*.vue文件。

1.安装vue.js

推荐使用淘宝的npm镜像: cnpm

$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm -v  #查看版本
$ sudo cnpm install -g vue-cli   #全局安装 vue-cli
$ vue  #查看vue是否安装
$ vue init webpack my-first-project   #创建一个基于 "webpack" 模板的新项目
# 创建项目后按回车，输入项目描述介绍、作者名、是否使用ESLint语法检查工具等（输入n即可）
$ cd my-first-project    
$ sudo cnpm install   # 安装依赖
$ npm run dev #运行项目

运行项目后，在浏览器里打开localhost:8080即可查看页面效果，可进行热更新。另外在编辑项目过程中，一般在项目目录src下编写代码文件。像vue.js这样来编写页面其实就是进行模板渲染的应用。

2.vue.js组件的重要选项

• data是一个对象，代表数据
• methods - 方法
• watch - 监听数据方法等变化

模板指令:

数据渲染: v-text 、v-html 、{{}}

{{a}}

控制模块隐藏: v-if 、v-show

渲染循环列表: v-for

事件绑定: v-on

属性绑定: v-bind

3.总结：

• new一个vue对象的时候你可以设置它的属性，其中最重要的包括三个，分别是data，methods，watch。
• 其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。
• vue对象里的设置通过html指令进行关联。
• 重要的指令包括
  • v-text 渲染数据
  • v-if 控制显示
  • v-on 绑定事件
  • v-for 循环渲染 等