mingyunyuziyou

从HTML到Vue

作者： 秒速五厘米     
 

文章简介：

从HTML到Vue

vue 基本语法

一、概述

1.HTML说明


HTML名词 意义
HTML超文本标记语言, 使用一套 标记标签 来描述网页(HTML文档)的 标记语言
HTML标签 组件名 由尖括号包围的关键词,成对出现(开始和结束标签)
HTML元素 自定义元素 从开始到结束标签的所有代码
HTML元素的内容开始与结束标签之间的内容 内容可为空,也可嵌套 空元素(内容为空),可在开始标签中进行关闭
HTML元素的属性提供元素 更多的信息 在 开始标签 中以名称/值对的形式出现 属性名和值忽略大小写 始终为属性值加引号 重要属性：行内样式style和类名class
HTML元素的事件属性 组件自定义事件 监听对元素交互操作


  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭.

  • HTML忽略大小写,但推荐使用小写：标签、属性名、属性值

2.Vue说明

组件选项对象以下简称组件对象

组件内(子组件)：特指在定义组件的SFC内

自定义元素(父组件)：相当于组件外,在父组件的模板中使用组件


名词意义
Webpack将前端项目的代码和资源使用多种 预处理器 构建、打包
Vue CLI已配置好的Webpack项目,用于 生成Vue工程模板
Vue文件 *.vue,SFC,单文件组件 包含导出组件对象的script元素 可能包含style元素、template元素的一种模块
定义组件相当于定义一个返回组件对象的函数 组件内特指在定义组件的内部
注册组件相当于引入函数并获得返回的组件对象,作为组件名的对应值
使用组件相当于使用自定义元素,以组件名作为自定义元素的标签 自定义元素做为组件的使用者


2.1 定义组件类似于

function 组件名(prop选项){  //prop作为函数形参变量名
    var 组件对象;
    组件对象.data=data选项;   //局部变量
    组件对象.template=模板;
    
    $emit('事件名'); //给自定义元素发送事件
    $emit('事件名',值); //给自定义元素发送带参数的事件
    
    return 组件对象;
}

2.2 使用组件类似于

<自定义元素>
  内容


定义回调方法

2.3 注册组件类似于

var 组件对象=组件名()
//建立映射关系
自定义元素标签 <--> 组件对象

3. Vue命名规范


变量表示法示例推荐用途
Mustache语法{{var}}自定义元素的内容中的变量
kebab-casexxx-xxx自定义元素的标签名、属性名、事件属性名
camelCasexxxXxx作为自定义元素的属性值的变量名
PascalCaseXxxXxx组件名、组件对象名


二、Vue的安装和使用

1.首次安装准备：Nodejs、NPM、CNPM、Vue CLI

  1. 安装 Nodejs、Nodejs包管理工具(NPM),并检测是否安装成功

node -v
npm -v

  1. 安装CNPM(NPM的淘宝镜像),是否安装成功

npm install -g cnpm -registry=https://registry.npm.taobao.org
cnpm -v

  1. 使用NPM全局安装Vue CLI(命令行工具)

cnpm i -g @vue/cli
cnpm i -g @vue/cli-init

2.创建Vue2.x项目

  1. 使用Vue CLI创建Vue2.x项目

vue init webpack 项目名

# 选择或输入相关配置项
# 以下均为No 其他直接回车
#? Use ESLint to lint your code?no
#? Set up unit tests No
#? Setup e2e tests with Nightwatch? No
#? Should we run `npm install` for you after the project has been created?(recommended) no

  1. 安装package.json中的包

cd 项目名/
cnpm i
cnpm run dev

3.MacOS更新Nodejs、NPM

  1. 安装n工具(管理node.js版本)

sudo npm install -g n

  1. 更新node.js到最新版

sudo n stable

  1. 更新npm到最新版：

sudo npm install npm@latest -g

三、使用组件(自定义元素)

1.设置自定义元素的属性值

  • 可设为常量或变量

1.1 变量(v-bind指令)

  

简写

  

1.2 常量

常量为字符串时：(与HTML相同)

  

常量为true时：

  

常量为非字符串常量、数组或对象字面量时：

  

2.设置自定义元素的内容

2.1 默认插槽：

<自定义元素>
    显示的dom内容

2.2 具名插槽

便于自定义元素的内容在组件模板内的分发

<自定义元素>
    
        显示的dom内容
    

简写

<自定义元素>
    
        显示的dom内容
    

2.3 动态插槽名

设置插槽名为变量

<自定义元素>  
    
        显示的dom内容
    

3.监听组件自定义事件

3.1 绑定处理事件的回调方法

在 methods 属性中定义的处理事件的回调方法


简写


3.2 内联 JavaScript 语句调用方法


3.3 带参数的组件事件

特殊变量 $event：事件携带的参数


4. 监听组件原生事件

4.1 对原生事件的处理

事件冒泡:从触发事件的原始元素到其所有祖先元素响应事件.原始元素作为目标元素


修饰符作用
@原生事件.native监听组件根元素的原生事件
@原生事件.preven阻止DOM元素的默认响应行为preventDefault
@原生事件.stop阻止DOM元素的事件冒泡,仅原始元素做响应stopPropagation
@原生事件.capture冒泡从当前绑定元素向内层依次响应
@原生事件.once只触发一次回调函数,然后移除监听器
@原生事件.passiveDOM元素的默认响应行为会立即触发 不等回调结束
@原生事件.self目标元素=当前绑定元素时,调用回调函数


4.2 按键事件

@keyup.按键码

//按键别名：.enter、.tab、.delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right、.ctrl、.alt、.shift、.meta
@keyup.按键别名

//精确匹配 只按一个按键时响应
@keyup.按键别名.exact

//只当点击鼠标左/中/右键时触发
@鼠标按键事件.left
@鼠标按键事件.middle
@鼠标按键事件.right

四、变量控制组件的使用

1.选择使用组件v-if/v-else-if/v-else/v-show

  • 条件渲染：在切换过程中条件块内的事件监听器和组件都会被销毁和重建

  • 惰性的：直到条件第一次变为真时，才会开始渲染条件块

1.1 单个组件


1.2 多个组件


  多个自定义元素

1.3 v-show

  • 元素总是会被渲染

  • 只控制自定义元素的display

2. 重复使用组件v-for

2.1 重复单个组件(数组变量)

<自定义元素 v-for="数组元素迭代的别名 in 数组">
<自定义元素 v-for="数组元素迭代的别名 of 数组">
<自定义元素 v-for="(数组元素迭代的别名,索引) in 数组">

2.2 重复单个组件(对象变量)

<自定义元素 v-for="对象各个属性值迭代 in 对象">
<自定义元素 v-for="(对象各个属性值迭代,对象各个属性名迭代) in 对象">
<自定义元素 v-for="(对象各个属性值迭代,对象各个属性名迭代,索引) in 对象">

2.3 重复单个组件(整数)


2.4 重复多个组件


  多个自定义元素

2.5 改变数组变量

  • 使用变异方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()时会改变为新数组,从而直接刷新

  • 使用非变异方法filter(), concat() 和 slice()不会改变数组,只返回新数组,需要将返回结果赋值给原数组时,才刷新

  • 数组[下标]=新值不刷新:只有使用Vue.set(数组,下标,新值)才刷新

  • 数组.length=新长度值不刷新.只有使用数组.splice(新长度值)才刷新

2.6 改变对象变量

  • 直接添加或删除属性 对象.属性=值 不会刷新,只有使用Vue.set(对象,属性,值)才刷新

3. key

Vue在选择渲染组件或更新已渲染过dom列表时,会尽可能不改变dom结构.以提高渲染效率.

  • 把不同组件当做不同的dom结构,必然会被重新渲染

  • 当在组件中使用 v-for 时，key 是必须的

4. 同时使用v-for和v-if

4.1 单个元素

1.先选择再重复


  <自定义元素 v-for="迭代 in 变量">

2.先重复再选择(v-for优先级高)


4.2 多个元素

1.先选择再重复


<自定义元素 v-if="变量">
  <自定义元素 v-for="迭代 in 变量">



  
    多个元素
  

2.先重复再选择(v-for优先级高)


  多个元素

五、定义组件

定义组件的本质是定义JavaScript模块对象(组件对象)并导出

  • 使用ES6的模块方法：export(推荐)

补充材料1：JavaScript:ES6(ES 2015)语法-ES6模块语法-1.导出对象：定义模块

1.组件内的局部变量：data选项

data选项的值必须是函数且必须返回一个object(仅在组件内部使用,当组件被复用时该object独立变化)

  • 组件内的局部变量

  • 作为自定义元素的内容的模板变量

  • 作为自定义元素的属性值的变量

export default {  //ES6+省略写法:  data() {    return {      变量名:初值,    };  }  //完整写法  data:function(){    return {      变量名:初值,    };  },  };" _ue_custom_node_="true">

2.组件内的模板

模板必须是单根的dom树结构

2.1 XML


  ...

2.2 Function

2.3 String

export default {  ...  template: "模板字符串"  //ES6的字符串拼接  template:`字符串...    字符串...${变量或表达式}...    字符串...    字符串...`};" _ue_custom_node_="true">

3.接收自定义元素的属性值：props选项

  • 作为自定义元素的内容的模板变量

  • 作为自定义元素的属性值的变量

  • 组件内的data选项中某个变量的初始值,computed计算表达式中的某个原始值

单向数据流

  • 数据流：当自定义元素的属性值的变量发生变化,会自动刷新组件.

  • 单向：不应该在组件内改变prop,且不会影响自定义元素的属性值的变量

3.1 字符串数组

prop特性名的字符串数组

props:['prop名',...]

3.2 对象数组

key为prop特性名 value为类型或其他校验

类型名字符串：String、Number、Boolean、Array、Object、Date、Function、Symbol、构造函数名

prop在组件实例化之前校验,校验失败会在控制台发出警告

  1. 简单的类型检查:null 和 undefined 会通过任何类型验证

props:{
  ‘prop名’:'类型字符串',
}

  1. 多个可能类型的检查

props:{
  ‘prop名’:['类型字符串',...],
}

  1. 完整的类型检查

props:{
  ‘prop名’:{
    type:'类型字符串',
    required:false, //Boolean,是否必填
    default:默认值,//any/function,默认值(数组、对象必须由函数返回)
    validator(){//function,自定义校验函数,返回Boolean
      return true;
    },
  }
}

3.3 接收自定义元素的属性为非prop特性

默认组件内的根元素继承(添加)非prop特性

  • 如果组件内的根元素已定义该特性,则会被替换

  • 如果组件内的根元素已定义该特性且特性为class或style,则会被合并

3.4 非根元素继承非prop特性

设置组件对象

inheritAttrs: false,//禁止根元素继承特性

设置组件模板


其中

$attrs={
  非prop特性名:值,
  ...
}
相当于
<非根元素 ...="">

4.接收自定义元素的内容：插槽slot

接收自定义元素的内容分发到组件内的模板中定义插槽的位置 如果组件内没有定义插槽,则自定义元素的内容会被舍弃

4.1 默认插槽


4.2 带默认值的默认插槽

如果没有收到自定义元素的内容会显示默认值

默认值

4.3 具名插槽

  • 自定义元素的多个内容分发到组件内的模板中定义的多个插槽

  • 默认插槽相当于缺省为name="default"的具名插槽


5.发送自定义元素的监听事件：$emit(‘事件名')

给自定义元素的发送事件

$emit(‘事件名')

给自定义元素的发送事件并传递新值

$emit(‘事件名',新值)

将作用于该组件的所有外部监听器$listener直接指向组件内某个原生元素

v-on="$listener"

六、导入组件对象并注册组件

1.静态导入组件对象的方法

1.1 使用ES6的import

import 组件对象 from “组件路径”;

2.异步导入组件对象的方法

2.1 使用返回Promise对象的匿名函数

function (resolve, reject) {
  if(true){//成功条件下加载组件
    resolve(组件对象)
  }else{//失败条件下加载组件
    reject(组件对象)
  }
}

2.2 使用ES6的import()

import()方法返回Promise对象,并且做为webpack代码分离的一个chunk

function () {
    //加载组件
    import(‘组件文件路径’)
}

ES6箭头表达式简写

()=>import(‘组件文件路径’)

补充材料1：JavaScript:ES6(ES 2015)语法-ES6模块语法-2.静态导入对象：使用模块 补充材料2：JavaScript:ES6(ES 2015)语法-ES6模块语法-3.动态导入对象：使用模块 补充材料3：webpack:代码分离 补充材料4：JavaScript:异步编程

webpack 2 支持原生的 ES6 模块语法import和export

2.注册组件

使 (标签为组件名的)自定义元素 可作为组件被识别

2.1 局部注册

export default {  components: {    //完整写法    组件名:组件对象，    //ES6+省略写法:组件名与组件对象同名    组件名,  }}" _ue_custom_node_="true">

七、语法糖

1.双向绑定

变量可以给组件传递特定props特性,可以通过监听特定事件获得新值 组件需要定义props、值改变时发送带新值的事件

//使用组件
<自定义元素 :prop名="变量" @事件=”变量=$event"/>

//创建组件
props:['prop名'],
$emit(’事件‘,新值),


原生表单元素 自定义元素特定props特性特定事件
input text、textarea v-modelvalue@input
select v-modelvalue@change
checkbox、radio v-modelchecked@change
自定义元素 v-model默认value 或由组件model.prop定义默认@input 或由组件model.event定义
v-bind.syncprop名@update:prop名


<自定义元素 v-model="变量">
<自定义元素 .sync="变量">

1.1 v-model在自定义组件中实现

//默认接收数据的props特性为value
props:['value'],
//默认被监听的发送事件为input,并带参数返回新值
$emit(’input‘,新值),

通过model修改接收数据的props特性、被监听的发送事件

model:{
  prop: 'prop特性名',
  event: '被监听的事件名'
}

props:['prop特性名'],
$emit(’被监听的事件名‘,新值),

1.2 v-bind.sync在自定义组件中实现

//只需要定义
props:['prop名'],
$emit(’update:prop名‘,新值),

//相当于对v-mode自动完成
//model:{
//  prop: 'prop名',
//  event: 'update:prop名'
//}

1.3 修饰符


修饰符作用
v-model.lazyinput事件发生时同步延迟到change事件发生时同步
v-model.number输入值转为数值类型
v-model.trim自动过滤首尾空白符


1.4 值绑定

//选中：变量=值1，未选中：变量=值2


//选中：变量=值1


//选中：变量=值1

  

textarea在html插槽中的模板变量不会生效,需要使用v-model

2.作用域插槽

2.1 作用域插槽

由于组件内部数据可能影响插槽的dom内容,声明一个作用域插槽变量 用来访问组件内定义的插槽特性值

  • 作用域插槽：用于在 自定义元素的dom内容 中使用组件内部的变量

               具名插槽显示的dom内容 {{作用域插槽变量.插槽特性名}}       //只有默认插槽时,作用域插槽缩略写法    具名插槽显示的dom内容 {{作用域插槽变量.插槽特性名}}  //ES6+的对象解构语法    具名插槽显示的dom内容 {{插槽特性名1}}}

2.2 旧语法

具名插槽、作用域插槽

<自定义元素>
    
        具名插槽显示的dom内容 {{作用域插槽变量.插槽特性名}}
    

v-slot 只能添加在 上 或 只有默认插槽时的作用域插槽的自定义元素上

slot特性、slot-scope特性：可以在用在非 元素上

3.动态组件

通过组件名变量直接选择组件进行渲染,是vue内置组件



//相当于
<自定义元素 v-if="组件名变量==组件名1">
  <组件名1>

<自定义元素 v-else-if="组件名变量==组件名2">
  <组件名2>

如果是需要配对的内部和外部元素,而内部没有使用指定元素,则会被作为无效的内容提升到外部.从而解析dom出错


      <自定义元素> //无效dom内容



        

      • //保持配对并使用自定义元素

      需要配对的内部和外部元素


        、


          、
           和


          第一次创建后被缓存,失活的组件仍然保留,提高渲染效率


            

          八、其他文件

          1.main.js

          作为index.html和app.vue之间的桥梁

          1.1 全局注册组件

          必须在创建根Vue实例之前

          Vue.component(
              组件名,
          }

          1.2 创建根 Vue 实例


          作者：落雪的午后阳光

          链接：https://www.jianshu.com/p/fa364684efa4

          来源：简书

          简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。


            教程   技术分享   插件   Vue   Javascript
          1551
           
          webpack:代码分离
            上一篇
          webpack:代码分离
          Vue语法糖
            下一篇
          Vue语法糖
           
           网站访问次数:1504    
          粤ICP备18056219号 | 命运与自由博客 | 730308009@qq.com | 地图 | 地图