vue 的基本知识

vue 的基本知识

mvc 与mvvm 的区别

mvc	mvvm
后端框架	前端框架

项目中需要导入相关的 vue包 与vue项目的基本格式

基本指令

1. 插值表达式 {{}} 输出data里面的数据 前后可以任意跟上想要的数据
2. v-cloak 处理页面没有加载数据的时候显示源生代码的问题
3. v-text 只能输出data 里面的数据 前后不能有任何数据 如果有的话会全部覆盖
4. v-html 指定输出html 格式的内容
5. v-bind (缩写是 英文下的冒号) 绑定事件与绑定data里面的数据
6. v-on (缩写是 @)
7. v-model 双向绑定 只能应用与表单元素
8. v-for 循环输出数据
9. v-if 判断条件 条件为真的时候 创建元素 条件为假的时候删除元素
10. v-show 判断条件 只修改display 样式 条件为真时属性为block 条件为假时属性为 none
11. 事件修饰符
    • 阻止冒泡事件 .stop
    • 阻止默认程序 .prevent
    • 只执行一次 .once
    • 只执行子级本身的函数 .self
    • 先执行父级的函数，再执行子级的触发函数 .capture
12. 通过指令可以设置class类
    • class类中使用三元运算符 class
    • 绑定data中的对象
    • v-bind:class v-bind:style
    • :class=’{这里面可以直接是对象}’

基本语法

1. 字符串包含字符串
   • 原字符串.indexof(需要查找的字符串) 如果后面的字符串不存在 则返回 -1 如果存在返回其他的数字
   • 原字符串.includes(需要查找的字符串) 如果存在返回true 不存在返回false
   • contains — jquery中用到的查找字符串的方法
2. 数组循环
   • 数组(对象).foreach(item=>{}) 不能终止
   • 数组(对象).some(item=>{}) 如果返回true 则终止循环 这个可以在循环中处理逻辑代码
   • 数组(对象).findIndex(item=>{}) 如果返回true 则终止循环 这个专门用来查找索引
   • 数组(对象).filter(item=>{}) 用来过滤对象中的内容 的 不能终止
3. 过滤器 只能用在插值表达式 与v-bind中 其他地方不能使用 过滤器采用就近原则 如果有一个私有的 还有一个全局的 则会使用私有的过滤器
4. padStart padEnd 在字符串前面或者是后面填充到规定的长度 只能对字符串处理 补充固定的字符串
5. 自定义按键修饰符 按回车添加 @keyup.enter = ‘方法名’ 其他的键盘可以 @keyup.键盘码 = ‘方法名’ 自定义键盘码 (调用方式 @keyup.键盘名 = ‘方法名’ vue.config.keyCodes.键盘名 = 键盘码 )
6. 自定义指令 directives 参数1：在定义的时候 指令前面不需要加 v-前缀 但是在调用的时候 必须要加上v-前缀 参数2 是一个对象 在这个对象身上有一些指令相关的函数 这些函数可以在特定的阶段 执行相关的操作

后续在更新