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 、{{}}

<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>

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

<p v-if="isShow"></p>
<p v-show="isShow"></p>

渲染循环列表: v-for

<ul>
  <li v-for='item in items'>
    <p v-text='item.label'></p>
  </li>
</ul>

事件绑定: v-on

<button v-on:click="doThis"></button>
<button @click="doThis"></button>

属性绑定: v-bind

<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, {classB: isB, classC: isC}]"></div>

3.总结：

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