Vue基础概念

Vue概念

为什么学习Vue

更少的时间，干更多的活，开发网站速度 快

原生js ---------------jQuery------------Vue
1

案例：把数组数据–循环渲染到页面上

原生js

  
    

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13

vue

    

      

        
{{item}}
      
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意：vue写起来很爽，vue的底层还是原生js

vue开发更加的效率和简洁，易于维护，快快快，现在很多的项目都是用vue开发的

vue是什么

https://vuejs.bootcss.com/guide/

vue2教程:https://v2.cn.vuejs.org/v2/guide/events.html

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

什么是渐进式

渐进式：逐渐进步，想用什么就用什么，不用全部都用

​ vue从基础开始学习，循序渐进向前学习

声明式渲染—组件系统—路由—vuex

什么是库和框架

库： 封装的属性和方法(jquery)

框架：拥有自己的规则和元素，比库强大的多(vue.js)

vue如何学

• 每天的知识点做到了如指掌，花时间去记住结论和公式（语法）
• 记住vue指令的作用，基础语法，整理笔记
• 课上的例子，练习，案例，作业，项目反复的练习
• 学会查找问题和解决问题（弄个报错总结文档.md）

vue是渐进式的框架，有自己的规则，我们要记住语法，特点和作用，反复练习，多总结

vue的学习

传统的开发模式：

基于html/css/js文件开发vue

线上引入js：

1

  
    
    
    
    
    
    
  
  
    
    

  
  
  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

工程化的开发方式

webpack环境中开发vue，最推荐，企业常用的方式

插值表达式

目的：在dom标签中，直接插入内容

又叫：声明式渲染/文本插值

语法： {{表达式}}

    

      
      
{{num}}
      
{{num+1}}
      
{{34}}
      
{{flag}}
      
{{flag?'hello':"nihao"}}
      
{{str}}
      
{{str +"vue是必须要学会的"}}
      
{{'hello world'}}
      
{{arr}}
      
{{arr.reverse()}}
      
{{obj}}
      
{{obj.name}}
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

总结：dom中插值表达式赋值，vue的变量必须在data中声明

vue基础-MVVM设计模式

转变思想，用数据驱动视图改变; 操作dom的事，vue源码干了

设计模式:一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结

MVVM

一种软件架构模式，决定了写代码的思想和层次

M : model 数据模型 (data中定义)

V ：view视图 （html页面）

VM：ViewModel 视图模型(vue.js源码)

MVVM通过数据双向绑定让数据自动双向同步，不再需要操作DOM

V （修改视图）-----> M(数据自动同步)

M（修改数据）------>V（视图自动同步）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2oQDJsMH-1663507330660)(.\相册\vue概念\MVVM.png)]

总结：vue源码采用MVVM设计模式思想，大大减少了DOM操作，提高开发效率

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute

每个指令，都有独立的作用

v-bind

给标签属性设置变量的值

语法: v-bind:属性名=“vue变量”

简写： :属性名=“vue变量”

  
    

      
      我是a标记
      我是a标记

      

      
      
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

v-on

给标签绑定事件

语法：

• v-on:事件名=“要执行的少量代码”
• v-on:事件名=“methods中的函数”
• v-on:事件名=“methods中的函数(实参)”
• 简写：@事件名=“methods中的函数”

    

      
      
要购买的商品的数量{{count}}
      增加1
      增加1
      一次增5

      减1
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

v-text/v-html

更新DOM对象的einnerText和innerHTML

语法:

• v-text=“vue数据变量”
• v-html=“vue数据变量"

    

      
{{str1}}
      
{{str2}}
      

      

      

      

      

      

      
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26