vue基础入门篇1

Vue基础总结

0. vue.js源代码

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

1. 特点

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

2. 底层代码封装

• 匿名函数作用

1. 确定vue.js这个库的使用方法

• 直接将Vue当做全局的一个方法使用， 因为将Vue挂在了 window
• 使用了amd来定义vue.js这个库为一个模块， 这样我们才能模块化引入

2. 封装库如何定义

1. 模板语法

1. alert console.log 不能用
2. if条件改成使用三元表达式
3. 方法一定要写在methods里面， 不要直接写在模板语法中
4. 模板语法中支持使用匿名函数可以直接写
5. 列表渲染
   v-for指令
   v-for = " xxx in data "
   {{ xxx }}
   如果需要 索引 index
   v-for = "(item,index) in data "
   {{ item }} — {{ index }}
   对象：
   v-for = “(index,item,key) in obj”
   总结:
6. v-for 最多可以有三个参数
7. 格式
   v-for = “(index,item,key) in data”
   名词解释：
   index: 索引
   item； data中的每一个
   key； 如果是对象， 表示对象的key
8. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
9. v-for 可以循环 数字或是一个字符
   扩展：
   v-for = ’ item in data’
   底层：
   function v-for( arg ){
   //做字符串处理
   var data = ‘data’
   for( var i = 0 ; i < data.length; i++ ){
   }
   }
10. 条件渲染
    两种：
11. 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 vs v-show

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能

• 如果条件为假，v-show有较高的初始渲染开销
• v-if 有更高的切换开销
  项目中建议：
  如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. 事件

5. 单项 和 双向数据绑定

6. class && style
7. 计算属性

总结：

1. 数据修改了， 视图就会更新， 这个现象就叫做， 数据驱动视图渲染
2. Vue是由两大内容构成
3. 指令
4. 组件
5. 指令
6. vue中使用v-xxx来表示一个指令， 这个指令写在 标签的属性中
7. 属性中不写 mustache语法， 内部中要写的
8. 如果 new Vue(options)如果没有el选项， 那么我们可以手动进行模板装载，
   new Vue().$mount(’#app’)

事件基础内容：

1. 属性绑定

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. 自定义按键修饰符
4. 全局修改
   Vue.config.keyCodes.自定义修饰符 = 键盘码
   使用：
   @keyup.自定义修饰符 = eventFnName
5. 自定义事件(自定义事件类型)
   如何定义？
6. 使用new Vue() 的到的实例来定义
   vm.$on(eventName,callback)
7. 如何触发呢？
   vm. $emit(eventName) this.$emit(eventName)

单项数据绑定：

1. 概念；
   将数据和属性进行绑定， 也就是原生身上的属性的值就是数据
2. 格式
   v-bind:attr = data
   简写：
   :attr = data
   数据更改 ， 视图就更新

双向数据绑定

数据改变， 视图更新，
视图改变， 数据更新

1. 格式：
   v-model:attr=data
   简写：可以省略属性
   v-model=data
2. 特别强调：
   v-model用于表单， v-model默认绑定了value属性