Shinkai005

V1

2022/05/10阅读:51主题:红绯

尚硅谷Vue2.0+Vue3.0全套教程-笔记001-0014

尚硅谷Vue2.0+Vue3.0全套教程-笔记

先看课,截关键图,然后补全笔记.整理出来有用文章

试试这种节奏.

认真写文,(引用里可以瞎吹~文章里认真写).

看这个课程必须提前思考...因为张天禹老师,实在是一个稍微难一点的点就能讲三甚至四遍重复.

所以第一遍懂得后面就二倍速过去就可

001-课程简介

适合: 入门前端框架+vue2精通+玩转vue3

整体内容

  • vue 基础
  • vuecli
  • vue -router
  • vuex
  • element-ui
  • vue3

002-Vue简介

Vue简介

把一个页面分成多个部分, 然后去编写每一个位置.

这样会很繁琐

复用是带来的好处.

... 通过框架你会发现,他有一定的局限,使用场景,但是在特定情况还是有优势的.

所以理解框架插件就很重要了,知道他适用于哪些场景,总听前辈说,未来咱们自己也得能说嘛

其实就是面向对象和面向过程的区别

image-20220509093110495
image-20220509093110495
image-20220509093225755
image-20220509093225755

这块就是我说的试用的场景, 当一组数据全部变化时,使用vue虚拟dom必然会慢,(慢的不可观的~)但是当你只更新部分,vue yyds~

原生js也可以完成这个需求,但是已经有人写了,而且这个人还在不停更新;优化自己的算法~自己做还是用别人写的好的,让他研究吧,研究完自己直接抄理解他的原理多好.

使用了虚拟dom必然会造成第一次渲染性能消耗变多;但是在更新过程中又会把这部分性能省下来.

003-官方文档使用

官方文档使用

教程

​ 可以手把手跟着入门->熟练->精通

API

​ 字典~所有的内容可以查询到

风格指南

示例

Cookbook

写代码的一些技巧, 和指南的区别在于, 指南是大家都这么写,标准是什么;而Cookbook是一些技巧,教你做事~

简单来说,指南教你标准解题步骤,Cookbook教你更优解题技巧.

主题用的不多,国内有更多替代方案

AwesomeVue是Vue周边生态库

awesomeVue
awesomeVue

awesomejs.dev/for/vue

可以看到官方用什么库做什么事情.

这个老师真细

004-搭建Vue开发环境

我上周刚精读了 Vue2.x文档, 很细.

在公众号:深海笔记Shinkai

安装Vue

  • 直接script标签引入

    • 网络cdn引入
    • 下载后本地引入
  • NPM引入

Vue版本-生产/开发

  • 开发版本 development----拥有更详细的报错信息,体积更大

  • 生产版本 production--上线版本---体积更小,删掉了很多不必要的细节.

自此进入编码阶段

开发版本的提示的去除

vue-devtools 下载安装即可.

第二个提示消除

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

005-006-Hello案例

...

代码太基础了,不写,算了写一下...

代码

 <!-- 准备好一个容器 -->
  <div id="demo">
   <h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
  </div>

  <script type="text/javascript" >
   Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

   //创建Vue实例
   new Vue({
    el:'#demo'//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
    data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
     name:'atguigu',
     address:'北京'
    }
   })
      
</script>

笔记

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;

  3. root容器里的代码被称为【Vue模板】;

  4. Vue实例和容器是一一对应的;

    内部是选择器,可以简写

  5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用;

  6. {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;

    不好分清的,直接记住几个常见的正确和错误即可.

    我补充一个, js语句: 声明语句 var a = 1.

  7. 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;

注意区分:js表达式 和 js代码(语句) 1. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方: (1). a (2). a+b (3). demo(1) (4). x === y ? 'a' : 'b' 1. js代码(语句) (1). if(){} (2). for(){}

梗: 程序员不写return

程序员不写return
程序员不写return

vscode vue代码片段


{
 "Print to console": {
  "prefix""vue",
  "body": [
   "<template>",
   "</template>",
   "",
   "<script>",
   "export default {",
   "  name: '',",
   "  data () {",
   "    return {}",
   "  },",
   "  methods: {},",
   "  created () {",
   "  },",
   "  mounted () {",
   "  },",
   "}",
   "</script> ",
   "",
   "<style scoped>",
   "",
   "</style>",
   "$2"
  ],
  "description""Log output to console"
 }
}

vue-devtool使用

这个位置不可以单引号.

判断是否使用new关键字创建

function Vue(options){
  // 我不管什么优先级都喜欢包个括号~可读性好一点
  if(!(this instanceof Vue)){
    // 不用new this是window. new内部将this直到当前new的实例对象.
    warn('你他娘的意大利炮呢?')//这个warn应该封装了
  }
  this._init(options);//注意没有出现warn就中断程序执行.
}

007-模(mu)板语法

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>插值语法</h1>
   <h3>你好,{{name}}</h3>
   <hr/>
   <h1>指令语法</h1>
   <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
   <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    name:'jack',
    school:{
     name:'尚硅谷',
     url:'http://www.atguigu.com',
    }
   }
  })
 
</script>

效果:

笔记

Vue模板语法有2大类:

1.插值语法:mustache

  • 功能:用于解析标签体内容。

  • 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

2.指令语法:directive

  • 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
  • 举例:v-bind:href="xxx" 或 简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。

Vue中有很多的指令,且形式都是:v-...

008-数据绑定

代码

<body>
  
  <!-- 准备好一个容器-->
  <div id="root">
   <!-- 普通写法 -->
   <!-- 单向数据绑定:<input type="text" v-bind:value="name"><br/>
   双向数据绑定:<input type="text" v-model:value="name"><br/> -->


   <!-- 简写 -->
   单向数据绑定:<input type="text" :value="name"><br/>
   双向数据绑定:<input type="text" v-model="name"><br/>

   <!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 -->
   <!-- <h2 v-model:x="name">你好啊</h2> -->
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  new Vue({
   el:'#root',
   data:{
    name:'尚硅谷'
   }
  })
 
</script>

笔记:Vue中有2种数据绑定的方式:

1.单向绑定(v-bind):

数据只能从data流向页面。

2.双向绑定(v-model):

数据不仅能从data流向页面,还可以从页面流向data。

备注:

  1. 双向绑定一般都应用在表单类元素上(如:input、select等)

  2. v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

获取不到value的就没办法绑定.

有趣的点:

结果:

009-el与data的两种写法

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>你好,{{name}}</h1>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  //el的两种写法
  /* const v = new Vue({
   //el:'#root', //第一种写法
   data:{
    name:'尚硅谷'
   }
  })
  console.log(v)
  v.$mount('#root') //第二种写法 */


  //data的两种写法
  new Vue({
   el:'#root',
   //data的第一种写法:对象式
   /* data:{
    name:'尚硅谷'
   } */


   //data的第二种写法:函数式
   data(){
    console.log('@@@',this//此处的this是Vue实例对象
    return{
     name:'尚硅谷'
    }
   }
  })
 
</script>

结果:

Vue实例打印
Vue实例打印

带$符的属性是抛出以供开发者使用.

未带的属性是Vue自己使用,底层使用的.

笔记:data与el的2种写法

el有2种写法

  • new Vue时候配置el属性。

  • 先创建Vue实例,随后再通过vm.$mount('#root')指定el的值

data有2种写法

  • 对象式
//对象式
data:{
    name:'尚硅谷'
   } 
  • 函数式
//data的第二种写法:函数式
   data:function(){
    console.log('@@@',this//此处的this是Vue实例对象
    return{
     name:'尚硅谷'
    }
   }

:function 可以省略,

ES6特性:在增强对象字面量中创建方法,可省略function关键字

  • 如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。

一个重要的原则:

由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了

*010-理解MVVM

代码:

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>学校名称:{{name}}</h1>
   <h1>学校地址:{{address}}</h1>
   <!-- <h1>测试一下1:{{1+1}}</h1>
   <h1>测试一下2:{{$options}}</h1>
   <h1>测试一下3:{{$emit}}</h1>
   <h1>测试一下4:{{_c}}</h1> -->

  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    address:'北京',
   }
  })
  console.log(vm)
 
</script>
MVVM模型
MVVM模型

MVVM模型

  1. M:模型(Model) :data中的数据
  2. V:视图(View) :模板代码 //dom结构
  3. VM:视图模型(ViewModel):Vue实例
vm身上属性
vm身上属性

观察发现:

  1. data中所有的属性,最后都出现在了vm身上。

    数据代理

  2. vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。

*011-Object.defineProperty方法

代码

<body>
  <script type="text/javascript" >
   let number = 18
   let person = {
    name:'张三',
    sex:'男',
   }

   Object.defineProperty(person,'age',{
    // value:18,
    // enumerable:true, //控制属性是否可以枚举,默认值是false
    // writable:true, //控制属性是否可以被修改,默认值是false
    // configurable:true //控制属性是否可以被删除,默认值是false

    //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    get(){
     console.log('有人读取age属性了')
     return number
    },

    //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
    set(value){
     console.log('有人修改了age属性,且值是',value)
     number = value
    }

   })

   // console.log(Object.keys(person))

   console.log(person)
  
</script>
 </body>

当前颜色的age是不可枚举状态.

有趣的点:

image-20220509143832767
image-20220509143832767

那我是不是可以用这个来实现响应式? 只要data里的数据被改变我就重新赋值~

然后我脑子还想了,难道!get set 内部就是这么实现的?

然后.... get set 是es5..不能通过babel转码来看源码

要看得看v8源码..懒得看 算了

咦打印一下试试结果[native code]

image-20220509144943325
image-20220509144943325

我就不信了

...

(大佬应该知道我做不到....找了好久)

...

但是我发现一个知识盲区..

js的属性包括

命名数据属性:具有一个确定的值的属性

命名访问器属性:通过getter和setter进行读取和赋值的属性

内部属性:这个就 和 vue上内部使用(不提供给开发者使用)的属性很像.

getter和setter

age的值 ... 是因为 第一时间无法获取, 需要从getter获取.

不会说get函数, 都会整体的说getter,应要问为什么,因为get函数基本都是这么写...所以就整体来说了

image-20220509151404711
image-20220509151404711

看到弹幕有人说不是不能修改么(默认为writable:false)?

![image-20220509151912088](/Users/shinkai/Library/Application Support/typora-user-images/image-20220509151912088.png)

是这样的,属性的可写等配置是 数据属性

setter getter设置的是访问器属性

不能同时存在.

还好前面排雷了,不然我也纠结死.

012-理解数据代理

代码

<body>
  <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
  <script type="text/javascript" >
   let obj = {x:100}
   let obj2 = {y:200}

   Object.defineProperty(obj2,'x',{
    get(){
     return obj.x
    },
    set(value){
     obj.x = value
    }
   })
  
</script>
 </body>

结果

注意, obj2就是创建以后再也不直接操作,全部通过obj1来操作obj2

*013-vue中的数据代理

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>学校名称:{{name}}</h2>
   <h2>学校地址:{{address}}</h2>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    address:'宏福科技园'
   }
  })
 
</script>

结果:

image-20220509153602916
image-20220509153602916

vue的数据代理理解

data相当于上面的obj1, vm相当于obj2

结合我上面写的注释:obj2就是创建以后再也不直接操作,全部通过obj1来操作obj2

那么就是 data创建后不需要操作,通过vm操作

可以通过以下步骤来加深理解:

1.console打印vm.name

2.修改源代码里data的name,再次打印vm.name//印证创建后通过vm操作

3.直接console修改vm.name

4.(这步比较有趣,看下图,需要判断data.name是否改变)那么怎么找这个option对象里的data呢?

把存的data声明在外面,然后传入options中,然后判断vm._data===data

但是我就是不用和老师一样的,我就是玩~ 还有一种自己想.我试了可以.(不准看这节最后一行哈)

image-20220509155253889
image-20220509155253889
image-20220509154409643
image-20220509154409643

继续

那么双向是如何实现的? 那指不定就是 你代理我的我代理你的呗.

image-20220509160049628
image-20220509160049628

这里验证_data就是存的data. 然后因为引用传值,所以修改_data可以引起options.data变化

image-20220509160458187
image-20220509160458187

所以到这里我们发现~ vm.name ===vm._data.name

多思考点, new Vue的时候 data里面内容绑定到_data里,然后直接绑定到vm上. (不在原型,看到打印了)

老师这种方式挺有意思的,从宏观分析源码,然后再看源码~

用离谱弹幕的一句话就是:"分久必合合久必分".....

用我的话 我更想用 双向奔赴吧~

源码和宏观都不能离开任何一行~对大多数人不需要太过于详细了解,知道源码做了什么就行.面试需要背一背

数据代理图示

离谱....老师开始讲上面我刚得出来的内容了

所以这里我上面说vm和data绑定是错误的~ 访问不到. 只能和_data绑定

这多有意思~ 一定要利用语言特性.

笔记

1.Vue中的数据代理:

  • 通过vm对象来代理data对象中属性的操作(读/写)//比基础的代理会复杂

2.Vue中数据代理的好处:

  • 更加方便的操作data中的数据

3.基本原理:

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上。

  • 为每一个添加到vm上的属性,都指定一个getter/setter。

  • 在getter/setter内部去操作(读/写)data中对应的属性。

答案: 把options对象直接都扔外面.然后传整个options进来.

数据劫持提了一嘴,检测_data的改变. 不是options.data!

014-事件处理

代码

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>欢迎来到{{name}}学习</h2>
   <!-- <button v-on:click="showInfo">点我提示信息</button> -->
   <button @click="showInfo1">点我提示信息1(不传参)</button>
   <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
   },
   methods:{
    showInfo1(event){
     // console.log(event.target.innerText)
     // console.log(this) //此处的this是vm
     alert('同学你好!')
    },
    showInfo2(event,number){
     console.log(event,number)
     // console.log(event.target.innerText)
     // console.log(this) //此处的this是vm
     alert('同学你好!!')
    }
   }
  })
 
</script>

笔记:

事件的基本使用:

1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;

缩写

2.事件的回调需要配置在methods对象中,最终会在vm上;

3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;

前面就说了data的时候不能用箭头函数,乖一点,别用

4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;

5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参

1
1

分类:

前端

标签:

Vue.js

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai