Vue 的基础指令
1 . Mustache 语法 -> 插值操作
- Mustache 语法 - > 双大括号
- Mustache : 胡子/胡须 {{ }}
1 . 1 可插入数据形式
- 直接写变量
- 简单表达式
1 . 2 实例
<body>
<div id="app">
{{ms}} <!-- Mustache 语法 -->
{{ms + "zi"}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
ms: 'qi'
}
})
</script>
</body>
2 . 基础 Vue 指令
2 . 1 . v-once
- 该指令后面不需要跟任何表达式
- 该指令表示元素和组件只渲染一次, 不会随着数据的改变而改变
<div id="app" v-once>
{{ms}} <!--添加 v-once 后 该元素将会一直为第一次渲染上的数值, 并不会修改-->
<button v-on:click="btnClick">Add</button>
</div>
2 . 2 . v-html
-
将字符串 html 解析
-
将从服务器请求到的数据(HTML) 代码, 按照 HTML 格式解析, 并且显示对应内容
-
该指令后面往往会更上一个 string 类型, 并且会将 string 的 html 解析出来并且进行渲染
<body>
<div id="app" v-html="ms">
{{ms}} <!--将 HTML 格式代码输出显示 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
ms: "<html> <div> <h2>qeqe</h2> </div> </html>"
}
})
</script>
</body>
- 若不添加结果为
2. 3 . v-text
- 用于将数据显示在界面
- 通常情况下接收一个 string 类型
- 缺点 : 会覆盖固定输入的内容
<body>
<div id="app" v-text="ms">
{{ms}}
ziqi
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
ms: "v-text"
}
})
</script>
</body>
- 输出
- 使用
2 . 4 . v-pre
- 用于跳过这个元素和它子h元素的编译过程, 用于显示原本的 Mustache 语法
2 . 5 . v-cloak
- cloak : 斗篷
- 在某些情况下, 我们浏览器可能会直接显示未编译的 Mustache 标签, v-cloak 会将原生的 Mustache 采用自己定义页面内容的覆盖
2 . 6 . v-bind
动态绑定属性元素
- 动态绑定属性, eg : a -> href, img -> src
- 缩写 : :
- 预期 : any (with argument) | Object (without argument)
- 参数 : attrOrProp (optional)
<div id="app">
<img v-bind:src="imgURL" alt="">
</div>
<script>
const app = new Vue({
el : '#app', //用于挂载要管理的元素
data : { //定于数据
imgURL : 'https://avatars3.githubusercontent.com/u/75103425?s=60&v=4'
}
</script>
-
bind 语法糖
-
v-bind 有一个语法糖, 也就是简写方式
<div id="app"> <img :src="imgURL" alt=""> </div>
-
-
v-bind 绑定 class
- 对象语法 : 即 class 后面跟的是一个对象
- 用法一 : 直接通过 { } 绑定一个类
<h2 :class="{'active': isActive}">hello </h2>- 用法二: 也可以通过判断, 传入多个值
<h2 :class="{'active': isActive, 'line': isLine}"> hello </h2>- 用法三 : 和普通的类同时存在, 并不冲突
- 如果 isActive 和 isLine 都为 true , 那么会有title/active/line 三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}"> hello </h2>- 用法四 : 如果过于复杂, 可以放在一个 methods 或者 computed 中, classes 为一个计算属性
<h2 class="title" :class="classes"> hello </h2> -
数组语法 : class 后面跟随的是一个数组
- 用法一 : 直接通过 [ ] 绑定一个类
<h2 :class="['active']">hello </h2>- 用法二 : 可以传入多个值
<h2 :class="['active', 'line']">hello </h2>- 用法三 : 和普通的类同时存在并不冲突
<h2 class="title" :class="['active', 'line']">hello </h2>- 用法四 : 如果过于复杂, 可以放在一个 methods 或者 computed 中, classes 为一个计算属性
<h2 class="title" :class="classes"> hello </h2>
<style>
.active {
color: red;
}
</style>
<div id="app">
<img v-bind:src="imgURL" alt="">
<h2 :class="active">QI</h2>
</div>
<script>
const app = new Vue({
el : '#app', //用于挂载要管理的元素
data : { //定于数据
imgURL : 'https://avatars3.githubusercontent.com/u/75103425?s=60&v=4',
active : 'active'
}
</script>
- 应用场景
- 动态修改页面样式
- 按照选择按钮动态选择样式
-
v-bind 绑定 class 数组
-
v-bind + v-for
<style>
.qi {
color: red;
}
</style>
<div id="app">
<ul>
<li v-for="(item, index) in movies" :class="{qi : qi === index}" v-on:click="liClick(index)">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
movies : ['黑猫警长', '火影忍者', '忍者神龟', '海尔兄弟'],
qi : 0,
},
methods : {
liClick : function(index){
this.qi = index;
}
}
})
</script>
v-bind 绑定 style
-
我们可以利用 v-bind:style 来绑定一些 CSS 内联样式
-
CSS 属性名 格式
- 驼峰式 : fontSize
- 短横线分隔 : font-size
-
绑定方式
- 对象语法
<h3 v-bind:style="{key(属性名): value(属性值)}">{{msg}}</h3> <!-- '50px' 必须加上单引号, 否则会当作一个变量去解析 --> <h3 v-bind:style="{fontSize: '50px'}">{{msg}}</h3>- Vue 解析数据
- ’ ’ -> 当成字符串整体进行解析使用
- 无单引号 -> 会到 Vue 实例中寻找对应对象引入使用
- 数组语法
2 . 7 . V - ON
-
V - ON 事件监听
-
作用 : 绑定事件监听器
-
缩写 : @Statement | Object
-
参数 : event
- 如果方法不需要额外参数, 那么方法后的 () 可以不添加
- 如果方法本身有一个参数, 那么会默认将原生事件event参数传递进去
- 如果需要同时传入某个参数, 同时需要event时, 可以通过 $event 传入事件
-
基本使用
-
修饰符 :
- .stop : 调用 event.stopPropagation()
<div id="app" @click="divClick"> <button @click.stop="btnClick">btnClick</button> </div>- .prevent - 调用 event.preventDefault()
- 阻止默认事件得提交
- .{keyCode | keyAlias} - 只当时间是从特定键触发时才触发回调
- .native - 监听租金按根元素的原生时间
- .once - 只触发一次回调
2 . 8 v- if , v- else-if , v- else
- key - 对比组件复用问题
- Vue 内部对组件复用问题
2 . 9 v-show
- v-show 的用法和 v-if 非常相似, 也用于决定一个元素是否渲染
- v-if 和 v-show 对比
- 如何选择
- v-if 当条件为 false 时, 不会有对应的元素在 DOM 中
- v-show 当条件为 false 时, 仅仅是将元素的 idsplay 属性设置为 false
- 开发中选择
2 . 10 V-for
-
格式 : item in items 的形式
-
有无索引情况
- 无索引
- item in items
- 有索引
- (item, index) in iems
- 其中index就代表了取出的item在原数组的索引值
- 无索引
-
遍历对象
<li v-for="item in items"></li> <li v-for="(value, key) in items"></li> <li v-for="(value, key, index) in items"></li> -
官方推荐我们在使用 v-for 时, 给对应的元素或组件添加上一个 : key 属性
<li v-for="item in items" :key="item"></li>- 这个与 Vue 的虚拟化 DOM 的 Diff 算法有关
- 在一个数组列表节点加入新的元素时, Diff 算法默认执行是在 index 位置插入数据, 之后数据依次后移, 这样在虚拟化 DOM 渲染到 HTML 上的时候效率就不大可观
- 所以我们需要使用 key 来给每一个节点做一个唯一标识
- Diff 算法可以正确的识别到此节点
- 找到正确的位置区直接插入新的节点
- 所以 key 的作用主要是为了高效的更新虚拟化 DOM
- ? li 渲染的格式是链表形式 ? ?
-
数组中的响应式方法
- push() 数组最后插入数据
- pop() 数组删除最后一个元素
- shift() 删除数组中第一个元素
- unshift() 数组最前面插入元素
- splice(a, b, c)
- a -> index 数组下标, 只有a -> 删除a之后的所有元素
- b -> 删除元素个数, 为0 -> 增加元素
- c -> 添加的元素
- 替换 b != 0 , c != null
- reverse() 数组反转
- Vue.set(a, b, c)
- a : 要修改的对象
- b : 索引值
- c : 修改后的值
2 . 11 V-model
- 表单控件在实际开发中是非常常见的
- Vue 中使用 v-mdel 指令实现表单元素和数据的双刺昂绑定
<div id="app">
<input type="text" v-model="msg">
{{msg}}
</div>
-
实现原理
-
v-model 其实是一个语法糖, 它的背后本质上是包含两个操作
- v-bind 绑定一个 value 属性
- v-on 指令给当前元素绑定 input 事件
-
<input type="text" v-model="msg"> 等同于 <input type="text" :value="msg" @input="mag = $event.target.value">
-
- v-model 结合 radio
-
v-model : checkbox
- 单选
- v-model 即为 布尔值
- 此时input 的 value 不影响 v-model 的值
- 单选
- 多选框
- 当是多个复选框时, 因为可以选中多个, 所以对应的 data 中属性是一个数组
- 当选择某一个时, 就会将 input 的 value 添加到数组中
-
v-model : select
- 单选
- v-model 绑定是一个值
- 当我们选中 option 中的一个时, 会将它对应的 value 赋值到 绑定数据中
- 单选
-
多选
- v-model 绑定的就是一个数组
- 当选中多个值时, 就会将选中的 option 对应的 value 添加到绑定的数组中
-
值绑定
- 就是动态的给 value 赋值
- 就是动态的给 value 赋值
-
修饰符
- v-model.lazy
- lazy 修饰符
- 默认情况下, v-model 默认是再 input 事件中同步输入框的数据的
- 一旦有数据发生改变, 对应的 data 中的数据就会自动发生改变
- lazy 修饰符 可以让 数据再失去焦点或者回车时才更新
- number 修饰符
- 默认情况下, 在输入框中无论输入数字还是字母, 都会被当作自负床来处理
- 我们希望处理数字类型数据, 那么最好将输入内容当作数字处理
- number 修饰符可以让在输入框中输入的内容自动转换成数字类型
- trim 修饰符
- 如果输入的内容首尾有很多空格, 通常我们希望能够去除
- trim 修饰符能够过滤左右两边的空格
3 . 计算属性 -> computed
-
字符串 拼接方式
- 直接拼接
- 代码过于冗杂
<p>{{first}} {{second}} {{three}}</p>- 通过定义 methods
- 方法是每次加载时都需要重新运行一次, 对资源消耗过大
<div> <p>{{getFull()}}</p> </div> <script> const app = new Vue({ el: '#app', data: { first: 0, second: 0, three: 0 } method: { getFull: function() { return this.first + '' + this.second + '' + this.three } } }) </script>- 通过 computed:
- computed 既达到了代码简化, 也采用了缓存机制, 会将加载的内容进行缓存, 等待下次调用时就可以直接使用, 增加了界面的优化
- computed 性能更加优化
<div> <p>{{full}}</p> </div> <script> const app = new Vue({ el: '#app', data: { first: 0, second: 0, three: 0 } computed: { full: function() { return this.first + '' + this.second + '' + this.three } } }) </script> - 直接拼接
-
什么是计算属性
- 对数据进行转换后在显示, 或者将多个数据结合起来显示
- 本质是一个属性, 区别方法
-
computed 完整写法
- 计算属性的 setter 和 getter
- 计算属性一般没有 set 方法, 只读属性
<script>
const app = new Vue({
el : '#app',
computed: {
test: {
set: function(newValue){
//一般不需要实现, 一般只使用get 就好
console.log(' log ');
},
get: function(){
return 'test'
}
}
}
})
</script>
简化 - >
- computed : 的缓存
- computed 在 Vue 中具有缓存, Vue 会将第一次运行的 computed 结果进行缓存, 等待下一次调用时, 会根据观察 computed 的值是否有变化进行调用, 有变化进进行值的修改, 无变化就直接调用
- 缓存机制也是 computed 在数据拼接优于 methods 的原因
4 . 高阶函数
- 编程范式
- 面向对象编程 (第一公民 : 对象)
- 函数式编程 (第一公民 : 函数)
-
reduce()
- 对数组中所有元素进行汇总
- preValue 上一次遍历时返回值
let total = array.reduce(function(preValue, n){ return preValue + n }, 0) -
filter()
- filter 函数必须返回一个 boolean 值
- true : 当返回 true 时, 函数内部会自动将这次的回调的 n 返回到新的数组中
- false : 如果为false, 函数会自动过滤掉这次数据
-
map()
- 对数组中所有元素进行遍历
- 回调函数可对数值进行相应操作
-
混合使用
let total = array.filter(function (n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function(preValue, n) {
return preValue + n
}, 0)
- 箭头函数
let total = array.filter(n => n < 100).map(n => n*2).reduce(preValue, n) => preValue + n)
5951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
