笔记一

vue项目搭建笔记一

vue学习官网：https://cn.vuejs.org/
视频学习：http://m.v.qq.com/play/play.html?coverid=p8nuk9fpavwco45&vid=o14233dznt6&vuid24=L9Y9y6uJ4SritiL%2FMwkfRw%3D%3D&ptag=2_7.6.0.20170_copy

项目初始化：
1.安装vue-cli
npm install -g vue-cli
2.初始化项目
vue init webpack 项目名称
3.进入项目
cd 项目名称
4.安装依赖
npm install
5.启动项目
npm run dev

项目目录结构：
index.html项目根视图
.postcssrc.js.:postcss配置文件
static:静态文件目录
src:源码文件
config:配置文件
build:服务器配置文件

模板语法：
Mutache:模板：
表现形式：{{语法}} //只能存在单行语句，不能作用在html属性

vue组件包含三个部分：
<-template><-/template>:视图部分
<-script><-/script>:逻辑部分
<-style scoped><-/style>:样式部分

vue基本指令：
v-html:渲染文本 //必须依赖于标签，不能解析内容中的标签
v-text:渲染文本 //必须依赖于标签
v-bind:绑定 //动态绑定 例：v-bind:class

条件渲染
v-if
v-else:
v-show
v-if与v-show区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染：
v-for
每个列表都要添加key