Vue.js基础

vue.js源代码

匿名函数 (function(){}) ()

特点

1.安全性高
2.减少了函数命名冲突
3.第二个括号才是函数的真正运行， 里面可以传入实际参数
4.第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数

匿名函数作用:

1. 确定vue.js这个库的使用方法
   *直接将Vue当做全局的一个方法使用， 因为将Vue挂在了 window上
   *使用了amd来定义vue.js这个库为一个模块， 这样才能模块化引入
2. 封装库如何定义

语法:

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"

3. 条件渲染

两种：

1. v-if:

• 单路分支

<p v-if = " f ">
true
</p>

• 双路分支

<p v-if = " f ">
true
</p>
<p v-else>
false
</p>

• 多路分支

<p v-if = " text === 'A'"> A </p>
<p v-else-if = " text === 'B'"> B </p>
<p v-else> C </p>

2. v-show:

<p v-show = " f ">
if条件
</p>

v-if 和 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中
写事件时应先写方法，再去绑定

5.事件修饰符

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. 自定义按键修饰符

<input type="text" @keyup.p = "submitHandler">
Vue.config.keyCodes.P = 80   //现在不需要定义直接使用即可

4. 全局修改
   Vue.config.keyCodes.自定义修饰符 = 键盘码
   使用：@keyup.自定义修饰符 = eventFnName
5. 自定义事件(自定义事件类型)
6. 使用new Vue() 的到的实例来定义

vm.$on(eventName,callback)

7. 触发事件

vm.$emit(eventName)
this.$emit(eventName)

6.单项 和 双向数据绑定

单项数据绑定：将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
(数据更改 ， 视图就更新)

格式:v-bind:attr = data ||  v-bind=data

双向数据绑定: 数据改变， 视图更新，视图改变， 数据更新

 格式：v-model:attr=data || v-model=data

注意:v-model用于表单， v-model默认绑定了value属性，也就是说只有value属性才能使用v-model