什么是vue?
1. 官方介绍 (https://cn.vuejs.org/v2/guide/)
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型
框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图
层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的
工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱
动。
2. 渐进式
框架做分层设计,每层都可选,不同层可以灵活接入其他方案。而当你都想
用官方的实现时,会发现也早已准备好,各层之间包括配套工具都能比接入
其他方案更便捷地协同工作。
一个个放入,放多少就做多少。
响应式渲染
1. 模板语法
(1)插值
a.文本 {{}},v-text
b.纯HTML
v-html ,防止XSS,CSRF(
(1) 前端过滤
(2) 后台转义(< > < >)
(3) 给cookie 加上属性 http
)
c.表达式
(2)指令:是带有 v- 前缀的特殊属性
v-bind 动态绑定属性
v-if 动态创建/删除
v-show 动态显示/隐藏
v-on:click 绑定事件
v-for 遍历
v-model 双向绑定表单
(3)缩写
v-bind:src => :src
v-on:click => @click
2. class 与 style
(1)绑定HTML Class
-对象语法
-数组语法
(2)绑定内联样式
-对象语法
-数组语法
//需要将 font-size =>fontSize
3. 条件渲染
(1)v-if
(2)v-else v-else-if
(3)template v-if ,包装元素template 不会被创建
(4)v-show
4. 列表渲染
(1)v-for (特殊 v-for=“n in 10”)
a. in
b. 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(example1.items, indexOfItem, newValue)
(2)splice
(4)应用:显示过滤结果
5. 事件处理
(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名 handleClick
(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象
(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html
.stop
.prevent
.capture
.self
.once
.passive
每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次
事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用
preventDefault阻止默认动作。
这里一般用在滚动监听,@scroll,@touchmove 。因为滚动监听过程
中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使
滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅
度。
(5)按键修饰符
6. 表单控件绑定/双向数据绑定
v-model
(1)基本用法
-购物车
(2)修饰符
.lazy :失去焦点同步一次
.number :格式化数字
.trim : 去除首尾空格
一个vue2的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
{{message}}
<ul>
<li v-text="message"></li>
<li v-html="html"></li>
</ul>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
//创建vue实例
const vm = new Vue({
el: "#app",
data: {
message: "hello vue",
html: `<h1 style="color:red">vue 第一天</h1>`,
},
});
</script>
</body>
</html>