#vue源代码底层
- 匿名函数 (function(){}) () 自执行函数
- 特点
- 安全性高
- 减少了函数命名冲突
- 第二个括号才是函数的真正运行, 里面可以传入实际参数
- 第一个括号确定了匿名函数的作用范围, 语法不会报错, 里面放一个没有名字的函数, 函数可以接收形式参数
- 底层代码封装
* 匿名函数作用
1. 确定vue.js这个库的使用方法
* 直接将Vue当做全局的一个方法使用, 因为将Vue挂在了 window
* 使用了amd来定义vue.js这个库为一个模块, 这样我们才能模块化引入
2. 封装库如何定义
##vue 指令
-
模板语法
- alert console.log 不能用
- if条件改成使用三元表达式
- 方法一定要写在methods里面, 不要直接写在模板语法中
- 模板语法中支持使用匿名函数可以直接写
-
列表渲染
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++ ){
}
}
- 条件渲染
两种:
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 有更高的切换开销
1.v-bind:绑定属性
2.v-model:数据双向绑定
3.v-if:判断dom是否存在
如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
4.v-for:循环
5.v-on:事件绑定
6.v-html:输出html
v-text:输出文本