Vue.js 入门总结（开发环境搭建、常用指令）-原创手记-慕课网

一、简介（搬砖）
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
二、开发环境搭建
使用nodejs npm或国内cnpm环境安装
全局安装vue-cli

npm install -g vue-cli

创建一个基于“webpack”模板的新项目

vue init webpack my-project

安装项目依赖（详见packpage.json中配置项）
第一步进入项目目录my-project

cd my-project
npm install

运行/启动项目

npm run dev

三、App.vue到页面
XX.vue -> webpack -> XX.html/XX.js（new Vue({})）/XX.css
四、Vue.js组件的重要选项

new Vue({
    data: {
        // 数据
    },
    methodes: {
        // 方法
    },
    watch: {
        // 监测数据变化
    }
})

五、常用指令
1、数据渲染 v-text、v-html、{{}}
2、控制模块的显示/隐藏 v-if、v-show
实质是改变css样式display属性
3、渲染循环列表 v-for
4、事件绑定 v-on

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

5、属性绑定 v-bind

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

6、总结
① new 一个vue对象时，你可以设置它的属性，其中最重要的三个属性为：data、methodes、watch
② data 代表 vue对象的数据，methods代表其方法、watch设置对象监听的方法
③ Vue对象里的设置通过html指令进行关联
六、vue.js框架代码

import Vue from 'vue'
import App from './App'
// import ES6语法，export、const 均为ES6语法
// 以上代码相当于 var App = require('./App')
new Vue({
    el: '#app',
    template: '<App/>',
    components:  { App }
})

export default {
    name: 'hello',
    data: function () {
        return {
            msg: 'Welcome to Yagiza Demo'
        }
    }
}
// 注意：
// function与后面()间必须用空格隔开
// function () 与 {}之间，也必须用空格隔开
// msg: 'Welcome to Yagiza Demo'结尾不能使用“;”号