DOVE-----Vue.js框架入门（一）

第一周学习内容整理（7.6-7.12）

markdown语法

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。其编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

1、标题：使用 = 和 - 标记一级和二级标题；使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。
2、段落：段落的换行是使用两个以上空格加上回车，也可以在段落后面使用一个空行来表示重新开始一个段落。
3、字体：*斜体文本*         ~~~~~~~         _斜体文本_
             ~~~~~~~~~~~~              **粗体文本**       ~~~~~       __粗体文本__
          ~~~~~~~~~          ***粗斜体文本***    ~~    ___粗斜体文本___
4、分隔线：可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。也可以在星号或是减号中间插入空格。
5、列表：Markdown 支持有序列表和无序列表。无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容；有序列表使用数字并加上 . 号来表示。
6、引用：在引用的文字前加>即可。引用也可以嵌套，如加两个>>三个>>>n个…
7、图片：！[alt 属性文本] (图片地址)         ~~~~~~~         开头一个感叹号 !，接着一个方括号，里面放上图片的替代文字，接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。
8、连接：[链接名称] (链接地址) 或者 <链接地址>
9、表格：使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
10、转义：Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符。

Vue.js框架

概述

Vue：渐进式JavaScript框架。
声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
官网：https://cn.vuejs.org/v2/guide/

• 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手vue
• 在一个库文件和一套完整框架之间自如伸缩
• 高效：20kB运行大小，超快虚拟DOM

基本使用

1、vue使用基本步骤：

• 需要提供标签用于填充数据
• 引入vue.js库文件
• 使用vue语法功能
• 把vue提供的数据填充到标签里

2、el：元素挂载位置（值可以是CSS选择器或者DOM元素）
      ~~~~~      data：模型数据（值是一个对象）
      ~~~~~      插值表达式:{{ }}，将数据填充的HTML中，支持基本计算操作

模板语法

1、插值表达式：{{ }},将数据填充的HTML中，支持基本计算操作
2、指令：自定义属性       ~~~~~      格式：以v开始（比如：v-cloak）
v-cloak指令的用法：
   ~~   （1） 提供样式
      ~~~~~      [v-cloak]{
      ~~~~~             ~~~~~      display:none;
      ~~~~~         ~  }
     ~~~~     (2)在插值表达式所在标签中添加v-cloak指令
     ~~~~     背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

v-text指令：填充纯文本，相比插值表达式更简洁

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html指令：填充HTML片段，存在安全问题，本网站内部数据可以使用，第三方数据不可用

<div v-html="html"></div>

v-pre指令：显示原始信息，跳过编译过程（分析编译过程）

<span v-pre>{{ this will not be compiled }}</span>

3、数据响应式：

• 响应式：html5中的响应式（屏幕尺寸的变化导致样式的变化）
                     ~~~~~~~~~~~~~~~~~~                   数据的响应式（数据的变化导致页面内容的变化）
• 数据绑定：将数据填充到标签中
• v-once指令：只编译一次，显示内容之后不再具有响应式功能

4、双向数据绑定：用户修改页面内容时，数据会变，数据又会反过来影响数据绑定的内容的变化
      ~~~~~      v-model指令用法：<input type='text' v-model='unamme'/>
      ~~~~~      MVVM设计思想：model,view,view-model
5、事件绑定

• vue如何处理事件
  v-on指令用法：<input type='button' v-on:click='num++'>
  v-on指令简写形式： <input type='button' @click='num++'>
• 事件函数的调用方式
  直接绑定函数名称<button v-on:click='say'>Hello</button>
  调用函数<button v-on:click='say（）'>Say hi</button>
• 事件函数参数传递
  普通参数和事件对象<button v-on:click='say("hi",$event)'>Say hi</button>
  事件绑定-传递参数
  （1）如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
  （2）如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
• 事件修饰符
  .stop阻止冒泡 <a v-on:click.stop="handle">跳转</a>
  .prevent阻止默认行为 <a v-on:click.prevent="handle">跳转</a>
• 案件修饰符：
  .enter回车键<input v-on:keyup.enter='submit'>
  .delete删除键<input v-on:keyup.delete='handle'>
• 自定义案件修饰符
  全局config.keyCodes对象 Vue.config.keyCodes.f1=112
  规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值

6、属性绑定

• vue如何动态处理属性
  v-bind指令用法<a v-bind:herf='url'>跳转<a/>
  缩写形式<a :herf='url'>跳转<a/>
• v-model的低层实现原理分析<input v-bind:value="msg" v-on:input=”msg"=$event.target.value">

7、样式绑定

• class样式处理
  对象语法<div v-bind:class="( active: isActive )"></div>
  数组语法<div v-bind:class="( activeClass, errorClass)"></div>
  样式绑定相关语法细节
  （1）对象绑定和数组绑定可以结合使用
  （2）class绑定的值可以简化操作
  （3）默认的class会保留
• style样式处理
  对象语法<div v-bind:style="( color: activeColor,fontsize:fontsize )"></div>
  数组语法<div v-bind:style="(baseStyles, overridingStyles )"></div>