前端Vue框架（2+3）知识点（详细总结）

学习准备：要求note.js是15.0以上版本，熟练cmd命令框命令

创建项目命令：npm init vue@latest

项目名字：小写英文

项目安装：npm/cnpm install

运行项目：npm run dev

文件内容：

---

一、模版语法

Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模版都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析！

{{}}插值表达式当中只能是单一表达式！验证如下：

//正确案例


//错误案例
 {{var a = 1}}
//这是一条语句，不是单一表达式
{{if(ok){return message}}}
//这不是一个单一表达式

v-html指令

如下面代码：

运行案例：

二、属性绑定

{{ }}不能在HTML的属性当中使用，这个时候我们想要绑定一个属性就可以使用指令v-bind!

v-bind 绑定属性------------' v-bind: ' 可以简写成 ' : '

当其中的一个绑定，变成null或者undefined,则这个属性（attribute）会被移除！假如displayTitle:null,则调试结果为title属性被移除：

布尔值attribute (true/false) 一般常用于button按钮

disable ------ 这个属性就是默认为按钮不可按动 代码案例如下：

// disabled默认为true,即按钮不能按动！当isButtonDisabled为true时 ，按钮不能按动，当为false时，按钮可按动
//利用了v-bind绑定属性disabled

动态绑定自定义多个值

调试案例：

当我们将displayId改成id,将displayClass改成class的时候，发现就变成我们HTLM当中的id属性和class属性了！

export default {
  data() {
    return {
      Person1:{
        id:"appid",
        class:"appClass"
      },
      isButtonDisabled: false
    };
  },
};

调试案例：

三、条件渲染

条件：v-if v-else-if v-else v-show的案例说明：

v-if和v-show 的区别：v-if是条件渲染，当我们是false的时候，该条语句是不做任何处理的，直接被浏览器舍弃，而v-show 是无论是false还是true都会被渲染！

v-if ：切换开销大，初次渲染开销小，当我们的代码中频繁的切换会每次都要渲染，则不建议使用v-if 使用v-show

v-show: 初次渲染开销大，但是切换开销小，以为初次以全部渲染，频繁切换不会出现渲染。

总结：

四、列表渲染

指令 v-for 的使用方法：

当我们电脑使用发现v-for="items of item"无故报错则参考：报错问题解决

在items in item 当中，我们可以用of替换掉in,推荐使用of

运行案例：

五、通过key管理状态

key 一般用与v-for指令当中，做一个标记！当数据增加或减少的时候不用全部重写渲染，而是渲染增加的！

//key当中的内容一般是字符串或数字，用于标记
//一定程度上节省资源的消耗

六、事件处理

v-on 用来监听DOM事件，v-on：=== @,在应用的时候， 可以写成v-on:click="handler"或者@click="handler"

注意事项：this.变量，调用的自己data当中的变量！！！

七、事件传参

1.获取event对象，简称e

运行案例：

2.当我们方法当中有参数传递的时候，获取event对象，案例如下：

注意一点：当外侧已经使用双引号，内部如果需要用到引号的使用单引号！！！

案例2：

八、事件修饰符

在HTML当中有阻止事件冒泡 "event.stoppropagation()" 和阻止默认事件等 " event.preventDefault() " .......

事件冒泡：当我们子元素的事件触发后父元素事件也触发了,当子元素加上.stop 后，父元素当中的事件不触发，只触发子元素当中的事件

默认事件：这个标签本来点击就要默认执行调到Baidu这个网站，这个就是默认事件，当加入.prevent后取消跳转网站

在Vue3当中为v-on提供了很多更加方便的事件修饰符，而不用像HTML当中在方法当中调用！

事件修饰符：.stop、.prevent、.once、.enter...........

修饰符地址：事件处理 | Vue.js

我们以阻止事件冒泡和阻止默认事件为例：

九、数组变换侦测

这当中有两类方法，一类为变更数组，一类为替换数组！变更数组会直接改变UI界面，而替换数组不会直接改变UI界面

1.变更数组，当按下增加数据按钮的时候，直接在页面显示增加 “开心超人” 方法：pop() push() shift() unshift() splice() sort() reverse().......

2.替换数组 当没有  this.Person =this.Person.concat(["王霸天"]);这个替换旧数组的时候，UI界面不会显示增加数据，但是数组的数据增加了 方法：concat() filter() slice()

观察控制台上数组增加的数据

案例：数组合并

运行案例：

十、计算属性

当我们谈到计算属性的时候，就会谈到计算属性 VS 方法有什么区别呢？

1.计算属性的关键字是computed, 方法的属性是methods.

2.计算属性在整个程序中，多次调用，计算属性当中的方法只会调用计算一次，而方法methods当中定义的方法，每调用一次就计算一次！

3.他们计算的结果是一样的，就是消耗的资源computed比methods少，但是当每一次方法调用的内容都不一样的时候，他们就没有多大区别了！

案例：

注意：方法属性当中的方法调用的时候要加 "（）" !!!

十 一、Class绑定

因为class也是属性，我们就想到了用Vue当中的v-bind和class结合起来使用，这样我们class=“ ”当中就可以不单单是字符串，也可以是对象和数组！！！

注意：这里的绑定只能是数组当中包含对象，而不能对象包含数组，也就是说[{ }],而不能是{[ ]}

案例运行：

十二、style绑定

style与v-bind结合后同样不单单是字符串，可以是对象和数组，但是这里数组不建议使用！

十三、侦听器

侦听器只能监听动态的内容，而不能改变的内容是无法被监听的！

侦听器当中的watch：{}属性是与data平级的，而且当中定义的方法名要与被监听内容保持一致！

运行案例：

十四、表单输入绑定

在前端开发当中，我们要实时在text文本框当中获取数据到JS当中，这个时候我们就需要到Vue当中一个强大的指令v-model

v-model:就是HTML当中和JS当中数据的绑定

和v-model相关联的修饰符有.lazy、.number .trim

.lazy:作用主要是当我们在文本框当中输入文字内容的时候，下面和其用v-model绑定的Js数据不会马上发生改变，只有敲回车、鼠标不聚焦于文本框才可以同步储存于JS当中绑定的数据当中！！！

.number：使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字.但它的类型其实是String！！！

.trim:当文本框当中输入的字符串前后都有空格，他会自动帮忙去掉！！！

运行案例：

十五.模版引用

Vue当中的ref属性=====》操作DOM元素，我们可以通过ref和this.$refs这一套属性联用可获取DOM元素当中输入的值和标签元素或修改DOM元素当中的内容 ，代码案例：

this.$refs.getElement1获取的是一个绑定的标签这个元素：

运行案例：

十六、组件组成

在外面组件当中可分为三个部分