vue从入门到精通之基础篇（一）语法概要

看：v-model=“xxx”

v-model 代表要做什么 xxx代表针对的js内存对象

写在那个元素上，就对哪个元素操作

(5).v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

(6).v-bind使用

• 给元素的属性赋值

• 可以给已经存在的属性赋值 input value

• 也可以给自定义属性赋值 mydata

• 语法 在元素上 v-bind:属性名="常量||变量名"

• 简写形式 :属性名="变量名"

(7).v-on的使用

• 处理自定义原生事件的,给按钮添加click并让使用变量的样式改变

• 普通使用 v-on:事件名="表达式||函数名"

• 简写方式 @事件名="表达式"

(8).v-model

• 双向数据流（绑定）

• 页面改变影响内存(js)

• 内存(js)改变影响页面

(9).v-bind 和 v-model 的区别?

• input v-model="name"

• 双向数据绑定 页面对于input的value改变，能影响内存中name变量

• 内存js改变name的值，会影响页面重新渲染最新值

• input :value="name"

• 单向数据绑定 内存改变影响页面改变

• v-model: 其的改变影响其他 v-bind: 其的改变不影响其他

• v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

(10).v-for的使用

• 基本语法 v-for="item in arr"

• 对象的操作 v-for="item in obj"

• 如果是数组没有id

• v-for="(item,index) in arr" :class="index"

• 各中v-for的属性顺序(了解)

• 数组 item,index

• 对象 value,key,index

(11).过滤器filter

• filters

• 将数据进行添油加醋的操作

• 过滤器分为两种

• 1:组件内的过滤器(组件内有效)

• 2:全局过滤器(所有组件共享)

局部过滤器的使用

• 先注册,后使用

• 组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据

• 使用方式是 {{ 原有数据 | 过滤器名 }}

• 过滤器fn:

• 声明function(data,argv1,argv2...){}

• 使用{{ 数据 | 过滤器名(参数1,参数2) }}

全局过滤器的使用

• 语法：Vue.component('过滤器的名字',fn)

• 调用：跟局部组件调用方式一样

(12).侦听器watch

• watch 监视单个属性和对象

watch:{

//监视复杂类型,无法监视的原因是因为监视的是对象的地址

// obj:function(newV,oldV) {

// console.log(newV,oldV);

// },

// key是属于data属性的属性名，value是监视后的行为 fn中的参数（新值，旧值）

msg:function (newV,oldV) {

console.log(newV,oldV);

if (newV===‘alex’) {

console.log(‘sb’);

}

},

// 深度监视 ：object ||array

stus:{

deep:true,//深度监视

handler:function (newV,oldV) {

console.log(newV[0].name)

}

}

小结： 基本数据类型 简单监视，复杂数据类型深度监视

(13).计算属性computed

• computed 同时监视多个属性

​ 默认computed只有getter方法

(14).获取DOM元素

• 救命稻草, document.querySelector

• 1: 在template中标识元素 ref=“xxxx”

• 2: 在要获取的时候, this.$refs.xxxx 获取元素

• 创建组件,装载DOM,用户点击按钮

• ref在DOM上获取的是原生DOM对象

• ref在组件上获取的是组件对象

• $el 是拿其DOM

• 这个对象就相当于我们平时玩的this,也可以直接调用函数\

-特殊情况

// 需求：input输入框 获取焦点

var App = {

data: function() {

return {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
(img-Z9DVIqW8-1715692698722)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！