vue基础入门篇1

最新推荐文章于 2023-12-12 23:37:27 发布

liaimin111

最新推荐文章于 2023-12-12 23:37:27 发布

阅读量107

点赞数

分类专栏： vue 文章标签： vue.js基础入门

本文链接：https://blog.csdn.net/qq_43511568/article/details/89362221

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue基础总结

0. vue.js源代码

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

1. 特点

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

底层代码封装

匿名函数作用

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

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

封装库如何定义

1. 模板语法

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”
总结:
v-for 最多可以有三个参数
格式
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key；如果是对象，表示对象的key
v-for如果有循环嵌套，那么value可以写成一样的命名，但是我们建议大家写成不一样的命名，理由：比较语义化
v-for 可以循环数字或是一个字符
扩展：
v-for = ’ item in data’
底层：
function v-for( arg ){
//做字符串处理
var data = ‘data’
for( var i = 0 ; i < data.length; i++ ){
}
}
条件渲染
两种：
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>

v-show

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

v-if vs v-show

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

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

4. 事件

5. 单项和双向数据绑定

class && style
计算属性

总结：

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

事件基础内容：

属性绑定

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

事件修饰符
举例：事件冒泡
通过举例告诉大家， e.stopPropagation()这个代码的复用性差
所以vue这边有一个解决方案：使用事件修饰符(modify)
格式：
v-on:eventType.modify = eventFnName
类型：
.stop : 阻止冒泡行为
.prevent ：阻止浏览器默认行为
.capture ：阻止捕获行为
.self ：自身触发
.once ：只执行一次
.passive ：行为结束后触发（scroll）
按键修饰符（键盘事件 keyup keydown keypress）
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
自定义按键修饰符
全局修改
Vue.config.keyCodes.自定义修饰符 = 键盘码
使用：
@keyup.自定义修饰符 = eventFnName
自定义事件(自定义事件类型)
如何定义？
使用new Vue() 的到的实例来定义
vm.$on(eventName,callback)
如何触发呢？
vm. $e m i t (e v e n t N a m e) t h i s .$ emit(eventName)