Vue快速入门（附实战小项目：记事本、天气预报、音乐播放器）

16. .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

17. .postcssrc.js:前缀的配置 （css转化的配置）

18. .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格…（建议定义这个规范）

19. .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

20. .eslintignore:忽略eslint对项目某些文件的语法规则的检查

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev （npm run start）运行项目

五、Vue核心指令

---

Vue导入

或

1、插值表达式

指令：{ { }}

{ { msg }}

{ {message}}

---

{ {student}}

---

{ {student.name}}

---

{ {school[0]}}

---

{ {school}}

2、v-text

设置标签的文本值（textContent）

{ {message+“very good”}}

3、v-html

设置标签的innerHTML，内容中有html结构会被解析为标签

4、v-on

为元素绑定事件

<input type=“button” value=“单击简写” @click=“clicktest”>

---

传递自定义参数，事件修饰符

<input type=“button” value=“单击简写” @click=“clicktest(‘Java’)”>

…

methods: {

clicktest: function (p1) {

this.message = p1 + “已经被修改” + this.count++

}

5、计数器实战

<button @click=“sub”>-

{ {count}}

<button @click=“add”>+

6、v-show

根据表达式的真假，切换元素的显示和隐藏

<button @click=“changee”>步尔斯特

{ {message}}

7、v-if

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）

<button @click=“changee”>步尔斯特

{ {message}}

8、v-bind

设置元素属性

<button @click=“changee”>步尔斯特

9、v-for

根据数据生成列表结构，经常和数组结合使用

• { {index}} -> { {item}}

• { {item.name}}

  10、v-model

  获取和设置表单元素的值

  <input type=“text” v-model=“message” @keyup.enter=“getM”>

  { {message}}

  六、实战小项目

  ---

  1、记事本

  可动态增加、删除、显示总数、一键清除、隐藏

  

  html

  步尔斯特记事本

  <input v-model=“inputValue” @keyup.enter=“add” autofocus=“autofocus” autocomplete=“off” placeholder=“请输入任务”

  class=“new-todo” />
• { { index+1 }}.

  { { item }}

  <button class=“destroy” @click=“remove(index)”>

  { { list.length }} items left

  <button v-show=“list.length!=0” class=“clear-completed” @click=“clear”>

  Clear

  css

  html,

  body {

  margin: 0;

  padding: 0;

  }

  body {

  background: #fff;

  }

  button {

  margin: 0;

  padding: 0;

  border: 0;

  background: none;

  font-size: 100%;

  vertical-align: baseline;

  font-family: inherit;

  font-weight: inherit;

  color: inherit;

  -webkit-appearance: none;

  appearance: none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  }

  body {

  font: 14px “Helvetica Neue”, Helvetica