AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue2.0+vue3.0资料（一）

2022-12-11 80
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue2.0+vue3.0资料（一）

一、vue基础


第一部分、Vue核心


安装（略）


0、学前基础


vue是什么，是一套用于构建用户界面的渐进式js框架


渐进式：vue可以自底向上逐层的应用


  • 简单应用：只需一个轻量小巧的核心库
  • 复杂应用：可以引入各式各样的vue插件


特点：组件化模式、声明式编码、虚拟DOM+Diff算法


学习vue前要掌握的js基础知识：


  • es6语法规范
  • es6模块化
  • 包管理器
  • 原型、原型链
  • 数组常用方法
  • axios
  • promise


1、初识vue


*浏览器配置f12生产提示阻止


vue.config.productionTip=false;//阻止vue在启动时生成生产提示。
*favicon.ico页签图标


1-1、插值语法


用于解析标签体内容。


格式：{{msg}}


插值里面放js表达式


区分js表达式和js代码(语句)


  • 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方；
  • a
  • a+b
  • demo(1)
  • x===y  ? 'a':'b'
  • js代码(语句)
  • if(){}
  • for(){}


dome.toUpperCase()//js中让小写字母转为大写字母


1-2、指令语法


用于解析标签、(包括:标签属性、标签体内容、绑定事件...)。


写链接时要v-bind（或者：）


//将url通过绑定的形式绑定给href这个属性
<a v-bind:href="url">链接</a>
<a :href="url">链接</a>

2、数据绑定


2-1、单向绑定 v-bind


数据只能从data流向页面


2-2、双向绑定 v-model


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


备注：


  1. v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
  2. 双向绑定一般都应用在表单类元素(输入类元素)上(如：input、select等)


2-3、简写


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


3、el与data的两种写法


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>el与data两种写法</title>
  <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h1>hello,{{name}}</h1>
  </div>
 </body>
 <script type="text/javascript">
  // el的两种写法
  var vm new Vue({
   el:"#app",//挂载点的第一种写法
   // vm.$mount('#app'),//挂载点的第二种写法
   //data的第一种写法:对象式
   data:{
    name:'timi'
   },
   // data的第二种写法:函数式
     /* data:function(){
      console.log(this)//此处的this是Vue的实例对象,如果是箭头函数的话这个this就是全局window
      return{
       name:'timi2'
      }
     } */
  })
 </script>
</html>


3-1、el有两种写法：


(1)、new Vue时候配置el属性


(2)、先创建Vue实例，随后再通过vm.$mount('#app')指定el的值


3-2、data有两种写法：


(1)、对象式


(2)、函数式


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


3-3、一个重要的原则：


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


4、理解MVVM模型


M：模型，对应data中的数据


  • Plain JavaScript Objective：一般js对象


V：视图，模板


  • DOM：页面文件


VM：视图模型，Vue实例对象


  • DOM Listeners：DOM监听
  • Data Bindings：数据绑定


网络异常，图片无法展示
|


网络异常，图片无法展示
|


4-1、发现


  1. data中所有属性，最后都出现在了vm身上(即vm里面有什么插值语法就能写什么)
  2. vm身上所有属性及Vue原型(-proto-)上所有属性，在Vue模板中都可以直接使用


5、数据代理


5-1、回顾Objective.defineProperty方法


Objective.defineProperty：给对象添加属性，给对象定义属性


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>回顾Objective.defineProperty方法</title>
 </head>
 <body>
  <!-- 
   总结:通过改变number变量改变对象属性值靠getter,直接改变对象属性靠setter-->
  <script type="text/javascript">
   let number =18
   let person = {
    name:'张三',
    sex:'男',
   }
   //其中age是不能枚举的 
   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))
   //方法二:通过for循坏验证是否能枚举
   /* for(let key in person){
    console.log('for循坏对象:',key,person[key])
   }
   console.log(person) */
  </script>
 </body>
</html>


5-2、何为数据代理


数据代理：通过一个对象代理对另一个对象中属性的操作  读/写


下面演示一个对象obj2代理obj的操作


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>何为数据代理</title>
 </head>
 <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>
</html>

5-3、Vue中的数据代理


vm._data=options.data=data//第三个data是外面的data
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Vue中的数据代理</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>学校名称:{{name}}</h2>
   <h2>学校地址:{{address}}</h2>
  </div>
 </body>
 <script type="text/javascript">
  let data={
   name:'111',
   address:'222',
  }
  const vm =new Vue({
   el:'#app',
   data//这里是调用前面的data
  })
 </script>
</html>


网络异常，图片无法展示
|


一旦data中的数据发生改变，那么页面找那个用到该数据的地方也会自动更新。


网络异常，图片无法展示
|


网络异常，图片无法展示
|


总结


1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）


2、Vue中数据代理的好处：更加方便的操作data中的数据


3、基本原理：①通过Objective.defineProperty()把data对象中所有属性添加到vm上。②为每一个添加到vm上的属性，都指定一个getter和setter。③在getter和setter内部去操作（读/写）data中对应的属性。


6、this关键字


6-1、this.属性名称


指的是访问类中的成员变量，用来区分成员变量和局部变量（重名问题）


6-2、this.方法名称


用来访问本类的成员方法


6-3、this()


访问本类的构造方法


()中可以有参数的 如果有参数 就是调用指定的有参构造


7、事件处理


7-1、事件的基本操作


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>事件的基本使用</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>欢迎{{name}}</h2>
   <button type="button" @click="showInfo1">点我提示信息1(不传参)</button>
   <button type="button" @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    name:'111',
   },
   methods:{
    showInfo1(){
     alert(1111)
     // console.log(event.target.innerText)
     // console.log(this)//此处的this是vm，如果是箭头函数的话，此处的this是window
    },
    showInfo2(number,a){
     // alert(2222)
     // console.log(event.target.innerText)
     console.log(number,a)
    },
   }
  })
 </script>
</html>

事件的基本使用总结：


1、使用v-on:xxx或@xxx绑定事件，其中xx是事件名；


2、事件的回调需要配置在methods对象中，最终会在vm上；


3、methods中配置的函数，不要用箭头函数！否则this就不是vm了；


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


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


7-1.1、事件绑定


如果事件绑定里面的事件不写小括号表示传的参数为$event，如果小括号里面有值则表示该值的调用事件


@click="demo"和@click="demo(event)一样
@click="demo(n)  调用n值产生的事件


7-2、事件修饰符


Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3、once:事件只触发一次(常用);
4、capture:使用事件的捕获模式;
5、self:只有event.target是当前操作的元素时才触发事件;
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;


事件修饰符小技巧：修饰符能连续写的


<a href="https://www.baidu.com"  @click.prevent.stop="showInfo">点我提示信息</a>  //两个修饰符连着写，先调用前面的修饰符，然后再调用后面的


案例如下：


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>事件修饰符</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <style type="text/css">
  *{
   margin-top: 20px;
  }
  .demo1{
   height: 50px;
   background-color: skyblue;
  }
  .box1{
   padding: 5px;
   background-color: skyblue;
  }
  .box2{
   padding: 5px;
   background-color: orange;
  }
  .list{
   width: 200px;
   height: 200px;
   background-color: orange;
   overflow: auto;
   /* overflow 是自动滚动条 */
  }
  li{
   height: 100px;
  }
 </style>
 <body>
  <div id="app">
   <h2>欢迎{{name}}</h2>
   <!-- 阻止默认事件(常用) -->
   <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
   <!-- 阻止事件冒泡(常用) -->
   <div class="demo1" @click="showInfo">
    <button type="button" @click.stop="showInfo">点我提示信息</button> 
   </div>
   <!-- 事件只触发一次(常用) -->
   <button type="button"@click.once="showInfo">点我提示信息</button>
   <!-- 使用事件的捕获模式 -->
   <!-- 事件的捕获阶段为由外向内,冒泡阶段为由内向外 -->
   <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
     div2
    </div>
   </div>
   <!-- 只有event.target是当前操作的元素时才触发事件 -->
   <div class="demo1" @click.self="showInfo">
    <button type="button" @click="showInfo">点我提示信息</button> 
   </div>
   <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 -->
   <ul class="list" @scroll.passive="demo">
   <!-- <ul class="list" @whell="demo"> --><!-- 这个是鼠标滚动轮的滚动 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   </ul>
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    name:'111',
   },
   methods:{
    showInfo(event){
     // console.log(event.target)//这里是self修饰符的使用案例
     // event.stopPropagation()//阻止stop修饰符的使用案例
     // event.preventDefault()//阻止Vue在启动时生成生产提示。
     alert('欢迎进入百度搜索')
    },
    showMsg(msg){
     console.log(msg)
    },
    demo(){
     for (let i = 0; i < 10000; i++) {
      console.log('#')
     }
     console.log('累坏了')
    }
   }
  })
 </script>
</html>

7-3、键盘事件


键盘事件按键：

  @keydown是你按下按键不用你手抬起来就触发事件

  @keyup是你按下按键松手了才触发的事件

  @keyup.enter 点号后面的叫别名

1、Vue中常用的按键别名:

回车 =>enter

删除 =>delete (捕获“删除”和“退格”按键)

退出 =>esc

空格 =>space

换行 =>tab tab会移动焦点(必须配合keydown使用)

  上  =>up

  下  =>down

  左  =>left

  右  =>right


2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要装维kebab-case(短横线命名)

 

3、系统修饰键(用法特殊):ctrl、alt、shift、meta(windows电脑的win键)

(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被触发。

(2).配合keydown使用:正常触发事件。

   

4、也可以使用keyCode去指定具体的按键(不推荐,已被web标准库删除)

 

5、Vue.config.keyCodes.自定义键名 =键码, 可以去定制按键别名


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>键盘事件</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>欢迎{{name}}</h2>
   <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"/>
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    name:'111',
   },
   methods:{
    showInfo(e){
     // if(e.keyCode !=13)return //keyCode获取键盘事件的代表符号 13然后判断是否按了回车按钮
     // console.log(e.target.value)
     console.log(e.key,e.keyCode)
    }
   }
  })
 </script>
</html>


键盘事件小技巧：


系统修饰也能连续写


<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"/>//此时按下ctrl+y才能提示输入


8、计算属性


8-1、插值语法实现


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>姓名案例_插值语法实现</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <!-- slice(0,3)这个函数用来截取长度 -->
  <div id="app">
   姓:<input type="text" v-model="firstName"/><br>
   名:<input type="text" v-model="lastName"/><br>
   <!-- 全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span> -->
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    firstName:'张',
    lastName:'三',
   },
  })
 </script>
</html>


8-2、methods实现


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>姓名案例_methods实现</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   姓:<input type="text" v-model="firstName"/><br>
   名:<input type="text" v-model="lastName"/><br>
   全名:<span>{{fullName()}}</span>
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    firstName:'张',
    lastName:'三',
   },
   methods:{
    fullName(){
    return this.firstName+'-'+this.lastName
    }
   },
  })
 </script>
</html>


文章标签：
JavaScript
前端开发
Windows
算法
Cool架构
目录
相关文章
吉士先生
|
JavaScript 前端开发 容器
85.【Vue-细刷-01】（一）
85.【Vue-细刷-01】
吉士先生
70 0
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 C++
关于Vue2里 v-for和v-if一起用的时候会出现的问题
本文介绍了在Vue2中同时使用`v-for`和`v-if`指令时可能出现的问题及解决方案。由于`v-for`的优先级高于`v-if`，导致条件判断在每次循环中执行，可能造成重复渲染。文中通过具体案例展示了问题现象，并提供了两种解决方法：一是调整逻辑，将列表长度小于等于2时清空列表；二是修改条件判断，避免使用`v-else`，确保每个条件独立判断。最后，作者建议使用Vue3以获得更好的性能和体验。
雨溪-yuxi
42 1
关于Vue2里 v-for和v-if一起用的时候会出现的问题
。思索
|
4月前
|
JavaScript API
Vue——effectScope(六)
Vue——effectScope()
。思索
40 4
嘘~！
|
7月前
|
JavaScript 前端开发 API
简单介绍一下vue
简单介绍一下vue
嘘~！
60 3
怒放de生命
|
7月前
|
JavaScript
selectpicker 与vue整合
selectpicker 与vue整合
怒放de生命
52 0
翻斗花园-图图
|
7月前
|
JavaScript 前端开发 开发者
new Vue() 发生了什么
new Vue() 发生了什么
翻斗花园-图图
70 0
游客burgmwkv
|
设计模式 缓存 JavaScript
Vue2
Vue2
游客burgmwkv
56 0
Vue2
锅盖哒
|
7月前
|
JavaScript 前端开发
vue.use是干什么的
vue.use是干什么的
锅盖哒
172 0
锅盖哒
|
JavaScript
vue3常用的东西
vue3常用的东西
锅盖哒
42 0
吉士先生
|
JavaScript
114.【Vue-细刷-05】（二）
114.【Vue-细刷-05】
吉士先生
35 0

热门文章

最新文章

  • 1
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 2
    流批一体的近实时数仓的思考与设计
  • 3
    丰富、连接、待集成—MaxCompute 生态再出发
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    McAfee揭秘网络最危险搜索关键词
  • 6
    微软再爆IE 0day漏洞 绿盟科技提供预警及防护手段
  • 7
    uboot命令分析+实现【转】
  • 8
    读书笔记--101个shell脚本 之#11--炫
  • 9
    SQL Server 深入解析索引存储(堆)
  • 10
    OAF_EO系列3 - Initialize详解和实现（案例）
  • 1
    【claude官网中文版】国内如何使用claude?记住这十大技巧！
    93
  • 2
    调用云端Qwen系列大模型（TURBO、PLUS、MAX和MAX_LATEST）在国际商业咨询智能体场景的实践探索
    48
  • 3
    已解决：国内如何使用Claude 3.5 Sonnet \ claude官网中文入口
    41
  • 4
    HarmonyOS 5.0 Next实战应用开发—‘我的家乡’【HarmonyOS Next华为公司完全自研的操作系统】
    64
  • 5
    自学记录鸿蒙API 13：实现多目标识别Object Detection
    157
  • 6
    《探索人工智能产业的可持续发展模式与策略》
    18
  • 7
    《人工智能助力社会学研究：数据挖掘与分析方法的深度探索》
    20
  • 8
    《软体机器人与仿生机器人的人工智能控制技术：挑战与突破》
    17
  • 9
    《探索机器人自主导航与路径规划技术的热点》
    20
  • 10
    《集成学习：堆叠泛化与提升法在人工智能中的应用热点》
    16

    • 相关课程

    更多
  • Vue.js 入门与实战
  • React 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 23-Vue.js在前端...1506518547.pdf
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)