Vue学习笔记之总体结构

一. 项目初始化

1. 安装vue-cli(需提前安装node.js)
    npm install -g vue-cli
2. 初始化项目
    vue init webpack my_first_vue
3. 进入项目
    cd my_first_vue
4. 安装依赖
    npm install
5. 启动项目
    npm run dev

二. 项目目录

1. build 项目构建(webpack)相关代码

2. config 配置目录，包括端口号等。我们初学可以使用默认的。

3. node_modules npm 加载的项目依赖模块

4. src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
     assets: 放置一些图片，如logo等。
     components: 目录里面放了一个组件文件，可以不用。
     App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
     main.js: 项目的核心文件。

5. static 静态资源目录，如图片、字体等。

6. test 初始测试目录，可删除

7. .xxxx文件 这些是一些配置文件，包括语法配置，git配置等。

8. index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

9. package.json 项目配置文件。

10. README.md 项目的说明文档，markdown 格式

三. 模板语法

1. Vue组件:
   • 包含三个部分
     I. template:视图
     
     II. script:逻辑
     
     III. style:样式
2. Mustache:模板
   • 表现形式:{{ }}，可以存变量(必须已定义),数字运算，字符串，双目运算符  --不能作用在HTML属性中,如title={{ }}
3. VUE指令

   1. Vue基本指令
      I. v-html:渲染文本（可以解析标签文本)
      
      II. v-text:渲染文本
      
      III. v-bing:动态绑定HTML属性值

   2. 条件渲染
      I. v-if:条件渲染,true为渲染并显示
      
      II. v-else:跟v-if 配套
      
      III. v-else-if:跟v-if,v-else配套
      
      IV. v-show:条件渲染，与v-if不同，它是控制css达到效果，不管true还是false都渲染

   3. 列表渲染
      I. v-for  每个列表都要添加key,否则可能会有warn提示

   4. 事件监听
      I. v-on:例如:

      <div v-on:click="fn"></div>
      

      II. 事件修饰符
       .stop  阻止单击事件冒泡，与js中stopPropagation相同
       .prevent  提交事件不在重复加载，与js中preventDefault相同
       .capture  添加事件监听时使用事件捕捉模式
       .self  只当事件在该元素本身（而不是子元素）触发时触发回调
       .once  click 事件只能点击一次，2.1.4版本新增
       .passive  滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待Onscroll事件触发完成，禁止与.prevent同时串用，2.3.0版本新增

      <div v-on:click.stop.prevent="fn"></div> //事件串行
      //使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
      

      III. 按键修饰符
       .exact  修饰符允许你控制由精确的系统修饰符组合触发的事件

      <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
      <button @click.ctrl="onClick">A</button>
      
      <!-- 有且只有 Ctrl 被按下的时候才触发 -->
      <button @click.ctrl.exact="onCtrlClick">A</button>
      
      <!-- 没有任何系统修饰符被按下的时候才触发 -->
      <button @click.exact="onClick">A</button>
      

       .enter  与键盘上的enter键相同，下同
       .tab
       .delete (捕获 "删除" 和 "退格" 键)
       .esc
       .space
       .up
       .down
       .left
       .right
       .ctrl
       .alt
       .shift
       .meta  在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”

          <div v-on:keyup.enter="fn"></div>
      

       还可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

      // 可以使用 `v-on:keyup.f1`
      Vue.config.keyCodes.f1 = 112
      

       使用 keyCode attribute 也是允许的：

      <input v-on:keyup.13="submit">
      

      IV. 鼠标修饰符
       .left  点击鼠标左键触发，下同
       .right
       .middle

      <div v-on:click.left="fn"></div>