1. vue.js源代码
-
匿名函数 (function(){}) ()
- 特点
- 安全性高
- 减少了函数命名冲突
- 第二个括号才是函数的真正运行, 里面可以传入实际参数
- 第一个括号确定了匿名函数的作用范围, 语法不会报错, 里面放一个没有名字的函数, 函数可以接收形式参数
- 底层代码封装
- 匿名函数作用
-
确定vue.js这个库的使用方法
- 直接将Vue当做全局的一个方法使用, 因为将Vue挂在了 window
- 使用了amd来定义vue.js这个库为一个模块, 这样我们才能模块化引入
-
封装库如何定义
-
1. 模板语法
1. alert console.log 不能用
2. if条件改成使用三元表达式
3. 方法一定要写在methods里面, 不要直接写在模板语法中
4. 模板语法中支持使用匿名函数可以直接写
2. 列表渲染
v-for指令
v-for = " xxx in data "
{{ xxx }}
如果需要 索引 index
v-for = "(item,index) in data "
{{ item }} — {{ index }}
对象:
v-for = “(index,item,key) in obj”
总结:
1. v-for 最多可以有三个参数
2. 格式
v-for = "(index,item,key) in data"
名词解释:
index: 索引
item; data中的每一个
key; 如果是对象, 表示对象的key
3. v-for如果有循环嵌套, 那么value可以写成一样的命名, 但是我们建议大家写成不一样的命名, 理由: 比较语义化
4. v-for 可以循环 数字或是一个字符
扩展:
v-for = ' item in data'
底层:
function v-for( arg ){
//做字符串处理
var data = 'data'
for( var i = 0 ; i < data.length; i++ ){
}
}
3. 条件渲染
两种:
1. v-if
* 单路分支
javascript <p v-if = " f "> true </p>
* 双路分支
javascript <p v-if = " f "> true </p> <p v-else> false </p>
* 多路分支
javascript <p v-if = " text === 'A'"> A </p> <p v-else-if = " text === 'B'"> B </p> <p v-else> C </p>
2. v-show
javascript <p v-show = " f "> if条件 </p>
v-if vs v-show
1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能
* 如果条件为假,v-show有较高的初始渲染开销
* v-if 有更高的切换开销
项目中建议:
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
4. 事件
1. 属性绑定
<div onClick = "alert"></div>
function alert(){
alert('hello vue.js')
}
2. js操作
// 1. 获取数据
var data = 'hello vue.js'
// 2. 获取DOM
var app = document.querySelector('#app')
// 3. 渲染数据
app.innerHTML = data
// 4. 添加事件
app.onclick = function(){
app.style.background = 'red'
}
事件的组成部分:
1. DOM
2. on 添加事件的形式
3. 事件类型 click
4. 事件处理函数
有上面的总结:
vue使用第一种事件添加的形式 ---》 v-on
格式:
v-on:eventType = eventFnName
简写:
@eventType = eventFnName
事件处理函数写在配置项中 methods中
书写步骤:
先写方法, 再去绑定
需求:
我们有一个方法, 这个方法中有两个参数, 第一个参数是自定义参数, 第二个参数是事件对象
问题:第二个参数 事件对象 = undefined\
原因: 当我们自定义参数后, 系统无法自动识别 , 是不是事件对象
解决: 传入事件对象的实际参数: $event
1. 事件修饰符
举例:事件冒泡
通过举例告诉大家, e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案: 使用事件修饰符(modify)
格式:
v-on:eventType.modify = eventFnName
类型:
.stop : 阻止冒泡行为
.prevent :阻止浏览器默认行为
.capture : 阻止捕获行为
.self : 自身触发
.once : 只执行一次
.passive : 行为结束后触发(scroll)
2. 按键修饰符 ( 键盘事件 keyup keydown keypress)
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
3. 自定义按键修饰符
1. 全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用:
@keyup.自定义修饰符 = eventFnName
2. 自定义事件(自定义事件类型)
如何定义?
1. 使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)
2. 如何触发呢?
vm.$emit(eventName)
this.$emit(eventName)
5. 单项 和 双向数据绑定
-
单项数据绑定:
1. 概念;
将数据和属性进行绑定, 也就是原生身上的属性的值就是数据
2. 格式
v-bind:attr = data
简写:
:attr = data数据更改 , 视图就更新
-
双向数据绑定
数据改变, 视图更新,
视图改变, 数据更新1. 格式: v-model:attr=data 简写:可以省略属性 v-model=data 2. 特别强调: v-model用于表单, v-model默认绑定了value属性
总结:
-
数据修改了, 视图就会更新, 这个现象就叫做, 数据驱动视图渲染
-
Vue是由两大内容构成
-
指令
-
组件
-
指令
-
vue中使用v-xxx来表示一个指令, 这个指令写在 标签的属性中
-
属性中不写 mustache语法, 内部中要写的
-
如果 new Vue(options)如果没有el选项, 那么我们可以手动进行模板装载,
new Vue().$mount(’#app’)