一、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

备注：

v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
双向绑定一般都应用在表单类元素(输入类元素)上(如：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、发现

data中所有属性，最后都出现在了vm身上(即vm里面有什么插值语法就能写什么)
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>

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

一、vue基础

第一部分、Vue核心

安装（略）

0、学前基础

1、初识vue

1-1、插值语法

1-2、指令语法

2、数据绑定

2-1、单向绑定 v-bind

2-2、双向绑定 v-model

2-3、简写

3、el与data的两种写法

3-1、el有两种写法：

3-2、data有两种写法：

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

4、理解MVVM模型

4-1、发现

5、数据代理

5-1、回顾Objective.defineProperty方法

5-2、何为数据代理

5-3、Vue中的数据代理

6、this关键字

6-1、this.属性名称

6-2、this.方法名称

6-3、this()

7、事件处理

7-1、事件的基本操作

7-1.1、事件绑定

7-2、事件修饰符

7-3、键盘事件

8、计算属性

8-1、插值语法实现

8-2、methods实现

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、vue基础

第一部分、Vue核心

安装（略）

0、学前基础

1、初识vue

1-1、插值语法

1-2、指令语法

2、数据绑定

2-1、单向绑定 v-bind

2-2、双向绑定 v-model

2-3、简写

3、el与data的两种写法

3-1、el有两种写法：

3-2、data有两种写法：

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

4、理解MVVM模型

4-1、发现

5、数据代理

5-1、回顾Objective.defineProperty方法

5-2、何为数据代理

5-3、Vue中的数据代理

6、this关键字

6-1、this.属性名称

6-2、this.方法名称

6-3、this()

7、事件处理

7-1、事件的基本操作

7-1.1、事件绑定

7-2、事件修饰符

7-3、键盘事件

8、计算属性

8-1、插值语法实现

8-2、methods实现

热门文章

最新文章

相关课程

相关电子书