JS教程-vue语法整理

1、回顾

• 规范

  目录规范

  代码规范
  css
  js

• 前端发展史

• 了解vue

• vue数据双向绑定的原理
  数据劫持以及发布订阅者模式
  数据劫持 Object.defineproperty()
  Observer/watcher/compile
  Observer 劫持属性，看到变化，通知订阅者
  compile 绑定数据 指令解析器
  watcher 接收到变化后通知相应的函数更新数据

  数据的改变会引起视图的二次渲染

  shim: vue不知ie8
  一个shim是一个库，它将一个新的API引入到一个旧的环境，而且要仅靠旧的环境中已有的手段实现

  polyfill
  可以让低版本你的浏览器支持promise等

2、模板语法

2.1 文本

{{ msg }}

02文本.html

{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} --
{{ arr[3] }}

data: { // 初始化数据，可以定义很多个，可以定义各种数据类型
      msg: 'hello vue',
      num: 1,
      flag: true,
      obj: {
        a: 1,
        b: 2
      },
      arr: [1, 2, 4, 5]
    }

2.2 纯HTML

v-html vue提供的一个指令，相当于原生js中的 innerHTML 的功能,相当于jQuery中的$().html()v-textvue提供的一个指令，相当于原生js中的innerText的功能,相当于jQuery中的$().text() ,一般会用 文本 形式代替 {{ msg }},
作用： 防止XSS,CSRF
作业： XSS, CSRF
用途：传递的代码中如果有HTML标签，并且需要解析的时候，比如说 详情页面 的 详情部分 ，一搬后台会返回带有图文的一些HTML代码

03html.html

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

data: {
    msg: '<h1>hello vue</h1>'
}

2.3 表达式

赞成使用三元（目）运算符，不赞成写其余的业务逻辑

虽然赞成你使用三元运算符，但不是必须，以此案例为例，可以使用vue的 过滤器（filter） 实现，后面会讲

04表达式

{{ sex == 0 ? '女' : '男' }}
{{ msg.split('').reverse().join('*') }}

data: {
    sex: 0,
    msg: 'hello vue'
}

2.4、指令

vue中含有v-前缀的特殊属性 ---- 指令

input中使用v-model ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
v-if 条件判断 v-else-if v-else
v-show 条件判断
v-for 遍历循环使用
v-on 绑定事件
v-bind 绑定属性

不常用的

v-slot
v-pre
v-cloak
v-once

2.5 缩写

• 事件简写形式 v-on:click =》 @click

click ---- 原生js

click — vue

<button @click=“fn()”>click — vue简写

• 属性的简写形式 v-bind:class =》 :class

--- 原生，test就是一个固定的值

--- vue中，test可以是一个变量

--- vue简写形式

2.6 绑定属性

绑定属性必然跟标签相关

适合场景

• img 的 src 属性(从服务器获取了地址)
• 组件间的传值

05绑定属性.html

<div id="app">
    <div msg="msg">原生的属性，只能是定值</div>
    <div v-bind:msg="msg">利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量</div>
    1<img src="img" alt="">
    2<img v-bind:src="img" alt="">
</div>

const app = new Vue({
    el: '#app',
    data: {
        msg: 'hello vue',
        img: 'https://cn.vuejs.org/images/logo.png'
    }
})

3、 class与style绑定

class 与 style 都属于 HTML 的属性， ---- 绑定属性 v-bind:属性 : 属性

3.1 class 绑定

如果数据来源是后端提供的 class 的名字，前端不能操控，就需要使用class语法

• 对象

<style>
.active {
    font-size: 40px;
    color: #f66;
}
</style>

<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div>

data: {
    flag: true
}

• 数组

<style>
.active {
    font-size: 40px;
    color: #f66;
}
.test {
    background-color: #ccc;
}
</style>

<div :class="[activeClass, testClass]">数组写法就是先把数据定义好，直接数组包裹即可</div>

data: {
    activeClass: 'active',
    testClass: 'test'
}

作业：style绑定属性

4、条件判断

v-if v-else-if v-else
v-show

v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
审查元素查看效果
07条件判断.html

<div id="app">
    <div v-if="flag">如果为真我就显示</div>
    <div v-if="test === 1">test的值为1</div>
    <div v-else>test的值不为1</div>
    <div v-show="flag">v-show也可以作为条件的判断，但是 显示/隐藏</div>
</div>

作业：详细描述v-if与v-show区别

5、循环遍历

v-for = “item of/in list” :key=“唯一性的值”
v-for = “(item, index) of/in list” :key=“index”

可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 – 详细介绍 — 虚拟DOM算法）

08列表渲染.html

=================================================================
2、事件处理

v-on:click @click v-on:change @change
v-on:click=“fn()”
v-on:click=“fn($event)”
v-on:click="fn(‘params’)
v-on:click=“fn(msg)” msg为变量

02事件处理.html

一般不要轻易使用事件对象 $event
那么如果需要阻止冒泡以及默认事件呢，vue提供了修饰符

2.1事件修饰符

阻止冒泡 v-on:click.stop=“fn()”
阻止默认事件 v-on:click.prevent=“fn”
阻止冒泡阻止默认事件 v-on:click.stop.prevent=“fn”
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。

2.2 按键修饰符

以前如果有一个表单输入框，当你输入之后敲回车想要打印值

if (event.keyCode === 13) {name.value}

vue

<input @change.enter=“fn()” id=“name” />
.tab
.delete
.esc
.space
.up
.down
.left
.right

2.3 系统修饰符

.ctrl
.alt
.shift
.meta

3、表单输入绑定 — 购物车

v-model

唯一特殊的就是 checkbox
如果初始值为 数组，则表示多选框
如果初始值为 boolean，则表示真假 — 购物车中的选择
04表单输入

<input type="text" v-model="username"> {{ username }} <br />
<input type="password" v-model="password"> {{ password }} <br />
<input type="radio" value="男" v-model="sex"> 男
<input type="radio" value="女" v-model="sex"> 女 {{ sex }}<br />
<input type="checkbox" value="篮球" v-model="hobby"> 篮球
<input type="checkbox" value="足球" v-model="hobby"> 足球
<input type="checkbox" value="排球" v-model="hobby"> 排球 {{ hobby }} <br />
<textarea v-model="note"></textarea>{{ note }}<br />
<select v-model="lesson">
<option value="一阶段">一阶段</option>
<option value="二阶段">二阶段</option>
<option value="三阶段">三阶段</option>
</select> {{ lesson }}<br />
<input type="checkbox" v-model="flag"> 已阅读协议<br />
<button @click="getData">记录信息</button>

[外链图片转存失败(img-LSvOQRv3-1566353238259)(en-resource://database/547:1)]

表单修饰符
v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘

？？？ 原生js如果要做正则的校验，失去焦点、键盘弹起时

vue 中 可以使用 侦听属性 或者 计算属性 去做