项目实战流程及知识点整理（定期更新）

一 、vue 的安装及介绍

1、安装及构建项目

1.1、全局安装webpack

    npm install webpack -g

1.2、全局安装vue cli

	npm install webpack -g

1.3、检查状态

	vue -V	

1.4、构建项目

	vue init webpack demo（‘项目名称’）

1.5、运行项目

	cnpm init
	cnpm run dev

1.6、vue配置

	build.js：构建生产环境的文件，其原理是加载webpack.base.cof.js等配置文件去构建打包正产环境。
	webpack.base.conf.js：打包配置文件，加载项目的一些插件。
	index.js：也是项目的配置文件，在这里这也对生产环境做一些配置，如端口、静态资源路径配置等
	main.js：整个项目的入口。

1.7、vue的基础语法

1.7.1、模板语法

 (1) 插值 
 
​	a.文本 {{ }}   声明一条数据，然后用特殊的模板语法将其渲染出来（声明式渲染）
​	b.表达式

 (2) 指令
 
​	是带有 v- 前缀的特殊属性

	bind               动态绑定属性
	v-if               动态创建/删除 
	v-show             动态显示/隐藏 
	v-on:click         绑定事件 
	v-for              遍历
	v-model            双向绑定表单 (修饰符)
	v-cloak            防止表达式闪烁
	v-text             会指定将模板内元素的textContent属性替换为指令值所代表的数据
	v-html             可以解析标签，更改元素的innerHTML，性能比v-text较差
	v-pre              跳过元素和其子元素的编译过程，可以用来显示mustache

1.7.2、class 和 style

 (1) 绑定**HTML Class**
 	- 对象语法
		<div id="app">
	        <p class="red">这是一个p段落标签...</p>
	        <p :class="{'red':isRed}">这是一个p段落标签...</p>  
	        <p class="red" :class="(isBig ? 'big' : '')">这是一个p段落标签...</p>
	        <p><button @click="isRed=!isRed">切换class</button></p>
	    </div>

	- 数组语法
		<p :class="['red',(isBig ? 'big' : '')]">这是一个p段落标签...</p>
		
 (2) 绑定**内联样式**
  	- 对象语法
  			<p :style="{backgroundColor:background,fontSize:'20px'}">段落标签...</p>
			 **//key名需要采用驼峰式的写法，不然会报错！**
			 new Vue({
			     el:"#app",
			     data:{
			     	background:"green"
			     }
			 })
			 
	- 数组语法
		需要将 font-size =>fontSize
		<p :style="[{backgroundColor:background,fontSize:'20px'}]">段落标签...</p>

1.7.3、条件渲染

  (1) v-if
	
		在Vue中可以使用v-if来控制模板里元素的显示和隐藏，值为true就显示，为false就隐藏
		v-if控制的是 是否渲染这个节点
		
  (2)  v-else-if

		当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，
		效果与v-if相反。
		
		还有v-else-if指令可以实现多分支逻辑
		
		<input type="text" v-model="type">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
  (3) template  v-if

		当我们需要控制一组元素显示隐藏的时候，可以用template标签将其包裹，将指令设置在template上，
		等vm渲染这一组元素的时候，不会渲染template

  (4) v-show

		Vue还提供了v-show指令，用法和v-if基本一样，控制的是元素的css中display属性，从而控制元素
		的显示和隐藏 ， 不能和v-else配合使用,且不能使用在template标签上，因为template不会渲染，
		再更改它的css属性也不会渲染，不会生效
		
  (5) v-if 与 v-for
  
		v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁
		和重建。
		
		v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做；—直到条件第一次变为真时，才会开始
		渲染条件块。
		
		相比之下，v-show 就简单得多；—不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 
		进行切换。
		
		一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地
		切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。