尚硅谷张天禹Vue2+Vue3笔记（待续）

简介

什么是Vue？

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

什么是渐进式？ 

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

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

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

Vue的特点是什么？

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

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

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

 Vue官网

vue2 

介绍 — Vue.js

vue3  

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代码 

    
    
    
    


    
    
    

        
hello,kdy
        
        
{{name.toUpperCase()}}--{{new Date()}}
    
    
{{name}}

    

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

模板语法

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

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

代码演示： 

    
    
    
    


    
    

        
{{message}}
        
{{user.name}}
        
{{user.age}}

            
        百度
        

    
    

数据绑定

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

代码案例  数据绑定.html

    
    
    
    


    
    

        单向数据绑定:

        双向数据绑定:

        双向数据绑定:
        
        
    
    

  el与data的两种写法

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

    
    
    
    


    
    

        
你好,{{name}}
    
    

MVVM模型

vue参考了MVVM：

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

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

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

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

    
    
    
    


    
    

        
{{name}}
        
        
{{$options}}
        
{{$emit}}
        
    
    

回顾js的Object.defineproperty方法

代码演示：Object.defineproperty.html

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

数据代理

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

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

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

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

Vue中的数据代理.html:

    
    
    
    


    
    

        
姓名:{{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}}学习
        点我显示提示信息

        
        点我显示提示信息2

        
        点我显示提示信息3
    
    

天气案例.html

    
    
    
    


    

        
今天天气很{{info}}
        切换天气

        
        切换天气

        
        切换天气
    

事件修饰符

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

demo.html

    
    
    
    
    


    
    

        
欢迎来到{{name}}学习
        百度

        
        百度2
        
        

            点我提示信息
        
        
        点我提示信息
        
        

            div1
            

                div2
            
        
        
        

            div1
            

                div2
            
        
        
        

            点我提示信息
            
        
        
        

            
            
            
1
            
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}}
        点我让a加1

        

        
b的数据是{{numbers.b}}
        点我让a加1

    

watch对比computed

watch对比computed.html

    
    
    
    

    
    

    姓：


    名：


    全名：{{ fullName }}


    

绑定class样式

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

绑定样式.html

    
    
    
    
    


    
    

        
        
        
{{name}}


        
        
{{name}}


        
        
{{name}}


        
        
{{name}}


        
        
{{name}}


        
        
{{name}}


        
{{name}}


    
    

条件渲染

条件渲染.html

    
    
    
    


    
    

        
        
欢迎你:{{name}} 
        
欢迎你:{{name}} 
        
        
欢迎你:{{name}} 
        
欢迎你:{{name}} 
        
当前的n值为：{{n}}
        点我n+1
        
Angular
        
React
        
Vue
        
        
Angular
        
React
        
Vue
        
哈哈
        
        
        
        
    
    

列表渲染

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.set()方法从外部给data的属性添加子属性

    
    
    
    


    

        
姓名：{{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后，然后还做了解析模板的操作

    
    
    
    


    
    

        
hobbies :
        将中间的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

    
    
    
    
    


    
    

        
显示格式化后的时间
        
现在是：{{fmtTime}}
        
现在是：{{getFmtTime()}}
        
        
现在是：{{time | timeFormate}}
        
        
现在是：{{time | timeFormate2("YYYY-MM-DD")}}
        
        
现在是：{{time | timeFormate3 |mySlice}}
        
        
尚硅谷
        
    
    

        
        
{{msg | mySlice2}}
    
    

内置指令

v-text

    
    
    
    
    


    
    

        
{{name}}
        

    
    

v-html：

    
    
    
    
    


    
    

        
{{name}}
        

        


        

    
    

v-cloak

    
    
    
    
    
    
    


    
    

        
{{name}}