Vue2笔记——（尚硅谷张天禹Vue笔记)

2023-09-05 03:23:41

简介

什么是Vue？

一套用于构建用户界面的渐进式JavaScript框架。将数据转变成用户可看到的界面。

什么是渐进式？

Vue可以自底向上逐层的应用

简单应用:只需一个轻量小巧的核心库

复杂应用:可以引入各式各样的Vue插件

Vue的特点是什么？

1.采用组件化模式，提高代码复用率、且让代码更好维护。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

3.使用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点

Vue官网

介绍 — Vue.js

Vue.js - 渐进式 JavaScript 框架 | Vue.js

Vue2-html文件中写vue

下载安装

开发版本比较大，生产版本较小。

开发时推荐引入开发版本的vue，有提示。

我们下载下来源码并引用，甚至可用修改源码。

下载Vue开发者工具

参考：vue devtools在谷歌浏览器安装使用，附vue,vue3devtools下载资源_vue3.js tools 谷歌_…咦的博客-CSDN博客

学习vue2，可参考vue2的文档API — Vue.js

外：shift+点击网页刷新，为强制刷新。

外：vscode的live server运行html，网页除了输入http://127.0.0.1:5h500/http://127.0.0.1:5500/Vue/Vue.htmlhttp://127.0.0.1:5500/还可输入http://127.0.0.1:5500/，然后选中文件夹

可在vsCoder中安装一个Vue 3 snippets插件。写vue代码回有提示补全。

演示代码：

目录结构

html代码



初识Vue

{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;-->hello,kdy
{}}中的需要为一个js表达式(表达式最终计算出一个值的),而不是js代码 -->{{name.toUpperCase()}}--{{new Date()}}
{{name}}

注意：vue实例和容器之间是一对一的：若两个class为root容器对于一个绑定.root的vue实例，则第二个容器中不生效。若一个id为root的容器绑定两个new Vue的cl为“#root”的实例，则第二个new的vue实例不生效。

模板语法

1、插值语法{{}}：位于标签体中

2、指令语法v-bind：位于标签属性

代码演示：



模板语法

{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。2.指令语法:功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....） 。举例:v-bind:href="xxx”或简写为:href="xxx"，xxx同样要写js表达式,且可以直接读取到data中的所有属性。备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。-->{{message}}
{{user.name}}{{user.age}}
百度

数据绑定

单向数据绑定v-bind:，data->模板页面

代码案例数据绑定.html



数据绑定

单向数据绑定:
双向数据绑定:
双向数据绑定:

el与data的两种写法

代码展示： el与data的两种写法.html



el与data的两种写法

你好,{{name}}

MVVM模型

vue参考了MVVM：

1.M:模型(Model) :对应data中的数据
2.V:视图(View):模板
3.VM:视图模型(ViewModel) : Vue 实例对象

文档中常用vm代表vue实例。

vm实例中的所有东西都可写在{{}}中

代码演示：vue中的MVVM.html:



Document

{{name}}
{}}中 -->{{$options}}
{{$emit}}

回顾js的Object.defineproperty方法

代码演示：Object.defineproperty.html



Document

运行后在f12控制台中person.age和person.age = 150这样设置。

数据代理

代码演示：何为数据代理.html



何为数据代理

运行后在f12控制台中obj.x和obj2.x和其set。

就是通过vm读取或写入data中的数据：

vm将data中的数据放到了_data中（_data里的数据做了数据劫持）

Vue中的数据代理.html:



Document

姓名:{{name}}
姓名:{{_data.name}}
年龄:{{age}}

live server运行后，f12控制台测试为：

vm.name
'张三'
vm.name="王五"
'王五'
vm.name
'王五'
vm._data.name="张柳"
'张柳'
vm.name
'张柳'
vm._data==data
true

如果vue没有做数据代理，f12控制台只能访问vm._data.name了，加上数据代理，就可以vm.name使用了。

数据代理，就是把_data中的东西放到vm对象身上。

事件处理

事件的基本使用.html



事件的基本使用

欢迎来到{{name}}学习

天气案例.html



天气案例

今天天气很{{info}}

事件修饰符

阻止默认行为、阻止冒泡、事件只触发一次. . .

demo.html



事件修饰符

欢迎来到{{name}}学习
百度
百度2div1div2div1div21
2
3
4

事件修饰符，也可以连着写，@click.stop.prevent=showInfo()

键盘事件

键盘事件.html



键盘事件

如果需要按下shift+y时触发事件：@keydown.shift.y="showInfo2" 连写

不用计算属性,使用{{方法()}}

计算属性

计算属性.html



姓名案例-插值语法实现

    
姓：

名：

{计算属性无括号}} -->全名：{{ fullName }}
全名：{{ fullName }}
全名：{{ fullName }}
全名：{{ fullName2 }}
全名：{{ fullName3 }}

监视属性

监视属性也叫侦听属性。

天气案例-监视属性.html



天气案例

今天天气很{{info}}

深度监视

深度监视.html



天气案例

今天天气很{{info}}

a的数据是{{numbers.a}}

b的数据是{{numbers.b}}

watch对比computed

watch对比computed.html



计算属性和watch

    
姓：

名：

全名：{{ fullName }}

绑定class样式

f12元素中可直接编辑，失去焦点就会运用

绑定样式.html



绑定样式

{name}} -->{{name}}

{{name}}

{{name}}

{{name}}

{{name}}

{{name}}

{{name}}

条件渲染

条件渲染.html



条件渲染

欢迎你:{{name}} 
欢迎你:{{name}} 
欢迎你:{{name}} 
欢迎你:{{name}} 
当前的n值为：{{n}}
AngularReactVueAngularReactVue哈哈

列表渲染

v-for

条件渲染.html



列表渲染

列表渲染{{p.name}}-{{p.age}}
{{index}}-{{item.name}}-{{item.age}}
{{index}}-{{item}}
{{index}}-{{item}}
{{number}}-{{index}}

:key的作用

index为key

id为key

列表渲染.html



列表渲染

列表渲染
{{p.name}}-{{p.age}}
{{index}}-{{item.name}}-{{item.age}}:
{{index}}-{{item.name}}-{{item.age}}:

列表过滤

watch和计算属性均可实现：

watch的写法：



列表过滤

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

computed计算属性写法：更简便一些：



列表过滤

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

列表排序：

列表排序.html



列表排序

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

Vue如何监测数据改变的？

更新时的问题



更新时的问题

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

Vue监测数据改变的原理



Vue监测数据改变的原理及模拟一个数据监测

Vue.set()方法从外部给data的属性添加子属性



Vue.set()方法

姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}

Vue变更数组

vue没有为数组元素提供get和set服务

不能直接通过索引值监视数组元素，不能在f12中通过vm.数组名[0]="值"的方式修改，虽然值可以被修改，但页面上呈现的还是原来的值。

需使用vue能够识别的数组方法来修改数组内容push pop shift unshift splice sort reverse
vm.hobbies.splice(0,1,"看光头强") 会把第一个替换成光头强.

采用了包装的技术。

vm._data.student.hobby.push === Array.prototype.push=》false即vue中的push并不是js原型对象中的push。vue中的push先调用原型对象的push后，然后还做了解析模板的操作



vue变更数组

hobbies :
{{h}}

Vue监视总结

Vue监视数据的原理:
1. vue会监视data中所有层次的数据。
2.如何监测对象中的数据?
        通过setter实现监视,且要在new Vue时就传入要监测的数据。

        (1),对象中后追加的属性，Vue默认不做响应式处理
        (2).如需给后添加的属性做响应式,请使用如下API:
                vue.set(target.propertyName/index,value）

                或vm.$set(target.propertyName/index,value)
3.如何监测数组中的数据?
        通过包裹数组更新元素的方法实现,本质就是做了两件事

        (1).调用原生对应的方法对数组进行更新。
        (2).重新解析模板,进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:
        1.使用这些API:plush()、pop()、shift()、unshift()、spLice()、Sort()、reverse()

        2. Vue.set()或vm.$set()
        特别注意:Vue.set(）和 vm. $set()不能给vm或 vm的根数据对象添加属性!!!

_data里的数据做了数据劫持，访问data中的数据和修改data中的数据进行get和set来劫持了

收集表单数据

v-model配合各种表单



收集表单数据

账号：

密码：

年龄：

性别：男：女：

爱好：看喜羊羊:看灰太狼:看光头强:

所属校区：

其他信息：

用户协议

过滤器及全局过滤器

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

搜索dayjs，保存本地dayjs.min.js



显示格式化后的时间

{ xxx│过滤器名}}或v-bind:属性= “xxx|过滤器名"备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据,是产生新的对应的数据-->显示格式化后的时间
现在是：{{fmtTime}}
现在是：{{getFmtTime()}}
{}}-->现在是：{{time | timeFormate}}
现在是：{{time | timeFormate2("YYYY-MM-DD")}}
现在是：{{time | timeFormate3 |mySlice}}
{}}中，也可用在属性绑定中，如下 -->尚硅谷
{msg | mySlice}} 由于mySlice是root1的vue中的局部过滤器，在root2的vue中不可使用。可配置全局过滤器-->{{msg | mySlice2}}

内置指令

v-text



内置指令

{xx}}则不会。-->{{name}}

v-html：



内置指令

{xx}}则不会。(2).v-html可以识别html结构。3.严重注意:v-html有安全性问题!!!!(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!        -->{{name}}

v-cloak



v-cloak{name}}先展示网页后5秒后渲染值的情况，会先空白，5秒后出现值 -->

{xxx}]的问题。        -->{{name}}
{name}}先展示网页后5秒后渲染值的情况 解决方式为给{{name}}所在的标签加上v-cloak配合css样式使用，v-cloak作用为当vue没有介入时会加上在标签上，一旦vue介入后，就会从标签上移除 -->

v-once



v-once

初始化的n值是：{{n}}
当前的n值是：{{n}}

回忆上面讲的事件中的.once只能执行一次事件。

v-pre



v-pre

Hello
当前的n值是：{{n}}{}}和@click不要加。可以加在没有vue介入的标签上，如Hello
 这样vue直接跳过效率会高一些-->

自定义指令及全局自定义属性



自定义指令

当前的n值是：
放大10倍后的n值是：
放大10倍后的n值是：
/*当前的n值是：
*/

原生js



Document

引出生命周期



引出生命周期

欢迎学习Vue
欢迎学习Vue
{change()}} 不能这样写，因为走到方法时，方法中修改了data内容，又重新解析模板，又走了一次方法，又改了data内容，重新解析模板，走方法...-->

Vue生命周期



分析生命周期

当前n的值为：{{n}}



生命周期总结

欢迎学习Vue

组件化编程

实现应用中局部功能代码和资源的集合

2.1.1.模块
1.理解:向外提供特定功能的js程序，一般就是一个js文件-
2为什么: js文件很多很复杂
3.作用:复用js，简化js的编写，提高js运行效率
2.1.2.组件
1.理解:用来实现局部(特定)功能效果的代码集合(html/css/js/image...)
2为什么“一个界面的功能很复杂e
3．作用:复用编码，简化项目编码,提高运行效率

2.1.3.模块化
当应用中的js 都以模块来编写的，那这个应用就是一个模块化的应用。e
2.1.4.组件化
当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用,。

创建/定义组件

非单文件组件、单文件组件:

非单文件组件︰一个文件中包含有n个组件.
单文件组件∶一个文件中只包含有1个组件。

Vue.extend只是定义组件，component:{}中只是注册组件，在中才是new出一个组件对象

非单文件组件基本使用.html



Document

{schoolName}}学校地址：{{address}}
学生姓名：{{name}}
学生年龄：{{age}}
 -->
{{msg}}
root2

组件是不可以写el的

组件的几个注意点



Document

template:`` 如果里面有多个标签，就需要最外层套一层div

组件嵌套



组件嵌套

VueComponent组件的构造函数



VueComponent

可f12控制台输出vm和hello这个组件vc，vm实例中的很多东西在vc中也有。但还是有很多区别的：
mv中可用使用el，但vc中不能使用el，vm中的data使用函数时或对象式都可以，但vc中data只能使用函数式。

一个重要的内置关系关于原型对象



一个重要的内置关系

f12控制台console.dir(Vue)显示Vue上的东西

实例的隐式原型属性永远执行自己缔造者的原型对象

VueComponent的原型对象的原型对象就是Vue的原型对象

单文件组件.vue和暴露export

非单文件组件的一个弊病是样式不能跟着组件走

.vue文件为单文件组件

.Vue文件的命名规范，如果是一个单词，可用使用school.vue或School.vue但开发中推荐第二种首字母大写的。
如果是多个单词如my-school.vue也可写成MySchool.vue，在开发中还是推荐使用第二种帕斯卡命名脚手架：vue官方团队打造的.vue文件的类似webpack的编译环境

vsCode默认不识别vue，需要安装一个插件：可选择vetur插件，最好重启一下vsCode。

vue文件中顶头第一行敲

创建School.vue组件

创建Student.vue组件

创建App.vue组件

创建main.js

/* 这里用来大哥级别的创建Vue实例 */
import App from './App.vue'   //improt这些类型的代码浏览器识别不了，需要放入脚手架中
new Vue({el: '#root',//为哪个容器服务的template:``,components: {App}
})

创建index.html页面



练习一下单文件组件的语法

需要在脚手架中运行

使用Vue脚手架

安装使用

command line interface vue cli

Vue版本有1，2，3 脚手架版本也有1，2，3，4，使用的脚手架版本需要高于Vue版本，默认使用4版本的脚手架

官网文档：Vue CLI

打开cmd
第一步(仅第一次执行)︰全局安装@vue/cli。
npm install -g @vue/cli 敲npm命令的时候卡住的话，敲一个回车就好

node尽量不要安装到C盘，即使安装到C盘，需要使用管理员方式运行cmd
第二步:切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxxx

出问题的先看一下下面node的安装，安装好node后再执行上面第一步

【转载】windows下Nodejs zip版下载安装及环境变量配置_nodezip版如何配置_AllTimeLow丶的博客-CSDN博客

创建项目进度条走到头卡住了等待几分钟即可

$ cd vue_test
$ npm run serve

第三步:启动项目
npm run serve
1.如出现下载缓慢请配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org
2. Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpakc配置，请执
行: vue inspect > output.js

两次执行ctrl+c就可停掉项目服务退出

项目结构

使用VsCode打开项目的根文件，分析脚手架结构：

脚手架的结构：
.gitignore为git的忽略文件
babel.config.js为es6转es5的babel配置文件，默认就是，其他配置参考官网

package.json：包的说明书：里面有包的名、包的版本、
script中包括常用的命令，如刚刚执行npm run serve时，真正执行的为"vue-cli-service serve"
还有build为当项目所有功能都写完了，最终要把整个工程变成浏览器能够认识的东西。
link几乎不用，对整个项目中的写的js或.vue文件进行一次语法检查，判断哪里写的不对或不太好的地方。
package-lock.json：包版本控制，记录包的版本和地址。这样对于一些包，以后无论什么时候下载的都是这个版本。
README.md，可写一些说明，甚至上课时的笔记

vsCode使用ctrl+`打开终端，可在终端中npm run serve

node_modules中引入第三方库，包含Vue。
assets一般放前端的静态资源，png视频等。
components所有程序员写出的组件都往这里放。唯独App.vue不向这里放。
mian.js是整个项目的入口文件，import引入vue， import引入vue，是所有组件的父组件。创建vue实例对象，new Vue({render: h=>h(App),}).$mount('#app'),这个将App组件放入容器中，也可写成new Vue({el:'#app',render: h=>h(App),})
main.js是入口问价是因为脚手架配置好的。main.js未在html页面中引入还能找到这个app容器也是脚手架配置好的。

另外一种Vue项目的创建方式参考：

Vue基础知识_阳光明媚UPUP的博客-CSDN博客

对于index.html


<%= htmlWebpackPlugin.options.title %>

render函数

main.js

//如下行中，使用es6的模块化语法引入vue
import Vue from 'vue'//默认会找node_modules中vue中的package.json中有个"module": "dist/vue.runtime.esm.js"，其实就是iyge残缺版的vue精简版的vue，残缺了模板解析器。用的其实时vue库中的components中的vue.runtime.es.vue
//引入残缺版的vue，其实可用render函数，由于模板解析器占vue的内容的1/3，所以脚手架使用这种精简版的vue
//import Vue from 'vue/dist/vue'//完整版的vue
/* 如上：引入第三方库只写名字 */
import App from './App.vue'
import { component } from 'vue/types/umd'Vue.config.productionTip = false
/* 
1.vue.js 与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。 */
/* new Vue({render: h => h(App),
}).$mount('#app') */
new Vue({el:"#app",render(createElement){//还可接收参数console.log("render")console.log(typeof createElement)createElement("h1",'你好啊')//return null;//render需要有返回值return createElement;},render:createElement=>{//可转为箭头函数，因为没用到thiscreateElement("h1",'你好啊')return createElement;},render:createElement=>createElement("h1",'你好啊'),//箭头函数还可进一步精简render: h => h(App),//如果参数为组件，可用只写以一个参数。//render: h => h(App), //如果不使用这种方式，使用下面的这种原始引入的方式会报错，因为本文件中引入的vue为残缺版缺乏模板解析器的vue， /* template:`你好啊`,components:{App} */
})

package.json中的devDependencies的"vue-template-compiler": "^2.6.14"专门解析.vue中的

Vue2笔记——（尚硅谷张天禹Vue笔记)

简介

Vue官网

Vue2-html文件中写vue

下载安装

下载Vue开发者工具

hello,kdy

模板语法

数据绑定

el与data的两种写法

你好,{{name}}

MVVM模型

回顾js的Object.defineproperty方法

数据代理

姓名:{{name}}

姓名:{{_data.name}}

年龄:{{age}}

事件处理

欢迎来到{{name}}学习

今天天气很{{info}}

事件修饰符

欢迎来到{{name}}学习

键盘事件

不用计算属性,使用{{方法()}}

计算属性

监视属性

今天天气很{{info}}

深度监视

今天天气很{{info}}

a的数据是{{numbers.a}}

b的数据是{{numbers.b}}

watch对比computed

绑定class样式

条件渲染

欢迎你:{{name}}

欢迎你:{{name}}

欢迎你:{{name}}

欢迎你:{{name}}

当前的n值为：{{n}}

你好

happy

hello

列表渲染

列表渲染

:key的作用

列表渲染

列表过滤

人员列表

人员列表

列表排序：

人员列表

Vue如何监测数据改变的？

人员列表

Vue监测数据改变的原理

Vue.set()方法从外部给data的属性添加子属性

姓名：{{student.name}}

年龄：{{student.age}}

性别：{{student.sex}}

Vue变更数组

hobbies :

Vue监视总结

收集表单数据

过滤器及全局过滤器

显示格式化后的时间

现在是：{{fmtTime}}

现在是：{{getFmtTime()}}

现在是：{{time | timeFormate}}

现在是：{{time | timeFormate2("YYYY-MM-DD")}}

现在是：{{time | timeFormate3 |mySlice}}

尚硅谷

{{msg | mySlice2}}

内置指令

v-text

{{name}}

v-html：

{{name}}

v-cloak

{{name}}

v-once

初始化的n值是：{{n}}