vue基础
一、了不起的vue
1. 官方介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项
目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.渐进式
渐进式代表的含义是：没有多做职责之外的事。vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定。就好像 vuex、vue-router都属于围绕vue.js开发的库。框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。
二、 Vue 心跳体验
-
直接下载并用标签引入，
Vue会被注册为一个全局变量。- 开发版本 包含完整的警告和调试模式
<script src="https://cn.vuejs.org/js/vue.js"></script>- 生产版本 删除了警告，33.30KB min+gzip
<script src="https://cn.vuejs.org/js/vue.min.js"></script> -
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
</script>
- NPM
# 最新稳定版
$ npm install vue
npm install -g @vue/cli
我的第一个Vue例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 引入需要的依赖 -->
<script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<!-- 2. 定义一个受到Vue 控制的元素 -->
<div id="app">
{{ msg }}
</div>
</body>
<script>
/* 3. 实例化 Vue */
let vm = new Vue({
el:"#app",// 受到控制的元素
data:{
msg:"👍👍👍👍👍👍"
}
})
</script>
</html>
安装 Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
三、真相只有一个—数据绑定原理
https://cn.vuejs.org/v2/guide/reactivity.html
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使
用Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个
无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。
之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-801ogkWw-1606827523862)(C:\Users\quqing\Desktop\data.png)]
注意: Vue 3.0 的变化
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化；
2、无法监听Class类型的数据；
3、属性的新加或者删除也无法监听；
4、数组元素的增加和删除也无法监听。
针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。
四、模板语法
1. 插值
文本
<span>Message: {{ msg }}</span>
let vm = new Vue({
el:"#app",// 受到控制的元素
data:{
msg:"👍👍👍👍👍👍"
}
})
纯 HTML
<span v-html="rawHtml"></span>
let vm = new Vue({
el:"#app",// 受到控制的元素
data:{
rawHtml:"<span style='color:red'>红色的内容</span>"
}
})
如何防止 XSS(跨站脚本攻击),XSRF(跨站请求伪造)
前端过滤
后台转义
给cookie 加上 Secure 和 HttpOnly 标记,这样通过JavaScript的
Document.cookieAPI无法访问带有HttpOnly标记的Cookie，它们只应该发送给服务端Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
使用Javascript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
！！！以下语句不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
2.指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-bind
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
缩写:
:
<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除
false、0、""、null、undefined和NaN以外皆为真值）。
当和
v-if一起使用时，v-for的优先级比v-if更高。
template v-if ,包装元素template 不会被创建
v-else
不需要表达式,前一兄弟元素必须有 v-if 或 v-else-if。
<div v-if="Math.random()>0.5">
你可以看到我了
</div>
<div v-else>
看不到看不到
</div>
v-else-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-show
根据表达式之真假值，切换元素的 display CSS property。元素还在，只是看不见而已。
v-on
缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
(1)v-for (特殊 v-for=”n in 10”)
-
in (for in)
-
of (for of)
//没有区别
(2)key：
跟踪每个节点的身份，从而重用和重新排序现有元素
理想的 key 值是每项都有的且唯一的 id。data.id
(3)数组更新检测
a. 使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse()
b. filter(), concat() 和 slice() ,map(),新数组替换旧数组
c. 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决方法
(1) Vue.set( target, propertyName/index, value )
(2) splice
<div v-for="item in items">
{{ item.text }}
</div>
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-model
在表单控件或者组件上创建双向绑定。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本
<span>多行文本信息是:</span>
<>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="添加多行文本"></textarea>
复选框
单个复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多个复选框 绑定到同一个数组
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
选择框
单选时
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
如果
v-model表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
多选时
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
v-text
更新元素的 textContent。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html
更新元素的 innerHTML
<div v-html="html"></div>
v-slot
提供具名插槽或需要接收 prop 的插槽。
v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不会显示，直到编译结束。
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
Class 与 style
- 绑定HTML Class
-
对象语法
<div :class="{ red: isRed }"></div> -
数组语法
<div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]">
- 绑定内联样式
- 对象语法
<div :style="{ fontSize: size + 'px' }"></div>
- 数组语法
<div :style="[styleObjectA, styleObjectB]"></div>
//需要将 font-size =>fontSize
9812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
