【vue】入门生命周期以及cli(脚手架)demo

[Kelichao]

一、前端MVVM框架VUE概要及入门Demo

由于前端所做的业务越来越复杂，现在越来越多的单页应用，渐渐的前端MVC框架确实对我们前端开发者来讲是有必要深入学习的，MVVM可以让我们从dom操作中完全解脱，只需要操作数据即可自动渲染dom，可以说是非常高效。

生命周期

实例化注意点

new一个vue对象的时候可以设置它的属性，其中最重要的包括三个

• data
• methods
• watch

其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。

重要指令

• v-text渲染数据
• v-if控制显示
• v-on绑定事件
• v-for循环渲染
• v-bind属性绑定

	<div id="app">
		{{message}}
	</div>

js代码

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            val1: "100"
        },
        watch: {
            val1: "method1"
        },
        // 初始化完毕触发
        mounted: function() {
            // some code
        },
        // 更新完视图触发
        updated: function() {
            alert(2)
            console.log(this);
        }
        methods: {
            method1: function() {
                alert("method1");
            }
        }
    });

        // watch如果是注册在外部则用
        // app.$watch('val1', function (newVal, oldVal) {
        //   // some code
        // })

页面输出

二、脚手架cli搭建

• 安装vue-cli，cli介绍是说可以通过工程化打包以及自动化方式生成代码

 $ cnpm install -g vue-cli

初始化项目，并输入一系列参数

$ vue init webpack my-first-vue-project

会生成一个文件夹

• 在 first-vue文件夹中，安装node的package依赖模块

$ cnpm install

三、启动一个本地热服务

cnpm run dev

vue-protal

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.