小白的vue学习路程

最近公司开发新的项目，前端框架选定vue，对于前端小白的我，需要自己学习补充能量。

vue的最大特点：响应的数据绑定、组合的视图组件。

vue文件里面包含三种：<template>html模板</template>  <script>js</script>  <style>css<style>

webpack 将vue的文件打包成浏览器能识别的 html（视图层）、js(就是一个vue对象，model数据层在这里)、css

全局安装vue的环境：

npm install -g vue-cli(可以在命令行vue命令)

vue init webpack vueTest(创建一个基于webpack模板的vue的新项目，项目名称为：vueTest)

npm install -d(将项目中package.json中的依赖的包下载到vueTest)

npm  run dev(启动环境，在package.json中的"scripts": "dev": "node build/dev-server.js",所以启动只需要npm run  dev  就好，在浏览器中可以浏览该项目：http://localhost:8080)如下图所示：可以实时监控，当你修改了js，页面就会实时输出对应的内容

vue.js重要的组件:

1:data:数据

2：method：方法

3：watch：监听

4：el:绑定的对象

vue的数据渲染：

三种形式：{{}}、v-text、v-html效果上没有多大的区别。

当Vue中的a发生变化，上面的a也会相对应发生变化，响应式的数据绑定。

常用的指令：

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

渲染循环列表：v-for，就会循环出来两个qinbb、mmp

事件绑定：v-on（其中v-on:click和@click是一样的事件绑定）

属性绑定：v-bind，这个一般绑定的是class属性，所以v-bind会省略，其中imageSrc是字符串，第三个p中的classA和classB也是字符串，{red:isRed}这个是对象，is说明是个布尔值。

总结：

new一个vue对象，主要包含了三个重要的属性data（vue对象的数据相当于model）、method（vue对象的方法）、watch（vue对象的事件监听）

模板指令将视图层（html）和逻辑层（data）连接起来，常用的模板指令：

v-if（v-show）:判断指令

v-text（v-html、{{}}）:模板渲染

v-for:循环指令

v-on:事件绑定