Vue基础入门！

其实学习vue的最好方式就是查看官方文档：Vue.js

1.Vue是一个JavaScript框架	框架：别人写好的js文件
2.作用 ： 构建用户页面	将数据渲染到页面
3.特点：渐进式	组件式开发

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

  • Vue是一个JavaScript框架

    • Vue是一个用于构建用户页面的框架

      • Vue是一个用于构建用户界面得渐进式框架

• 2.渐进式框架介绍

  • a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的

    • 类似于Nodejs,拆分成很多个小模块

  • b. 在项目中我们用到什么，就导入什么

    • 这样可以保证我们用到的最少

  • c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源

1.2-Vue两个重要特点

数据驱动

• 1.数据驱动 ：Vue会根据数据，自动渲染页面

  • 无需DOM操作，修改了对象中的数据，页面会自动渲染

  • Vue的底层使用了一种叫做虚拟DOM的技术，能够实时监听js对象的属性变化从而自动更新页面DOM元素

    • 虚拟DOM本质是一个js对象

    • 关于虚拟DOM了解传送门(难度较大，可以留着以后进阶学习)

      • 虚拟dom原理 - 简书

      • 虚拟DOM（Virtual DOM）的工作原理 - 简书

原始的前端开发	Vue.js的前端开发
1.使用HTML+CSS搭建页面	1.使用HTML+CSS搭建页面
2.使用异步请求技术向后台请求数据	2.使用异步请求技术向后台请求数据
3.使用原生的js或者jQuery操作DOM，渲染数据	3.Vue自动渲染数据

• 效果演示

2-组件化开发(盒子复用)

• 2.组件化开发 ： 网页中的某一个部分,可能需要在多个地方被重复使用，就可以定义成一个组件

  • 组件化开发好处

    • a. 一次定义，多处使用

    • b. 便于开发维护

      • 类似于我们之前的函数封装解决代码冗余问题。Vue.js可以把网页的某一个部分(HTML+CSS+JS)封装成一个组件

1.3-Vue基本使用

• 官方文档传送门：Vue官方文档

• 第三方框架通用的使用步骤

  • 1.导包

  • 2.写HTML结构

  • 3.js中初始化配置

   
   
   
   
   
   

   
   

        {{ message }}
       

        {{ name }}
       

        {{ age }}
       

        {{ sex }}
   

   

1.4-Vue的挂载点介绍

• 1.挂载点el作用 ： 告诉vue实例，你要将data中的数据渲染到哪一个视图

• 2.注意点

  • (1)挂载点可以使用 id选择器（vue推荐使用） 类选择器 标签选择器

    • 开发中基本上都是id选择器，保证HTML标签唯一性

    • 如果你希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素中

  • (2)如果选择器选中了多个元素，只会选择第一个元素

  • (3)挂载点不能设置为html和body标签 （程序报错）

  • 
    

    
       
       
       
       
       
       
    

    
       
       

    
           

    
                {{ message }}
           

           

    ---

    
           

    
                {{ message }}
           

           

    ---

    
           

    
                {{ message }}
           

    
       

       
    

• 1.5-Vue的插值表达式介绍

• 插值表达式 有点类似于以前学习的 art-template模板语法，但是不同的框架有自己不同的语法规则

• 1.Vue会自动将data对象中的数据渲染到视图

• 2.在视图中,使用插值表达式来告诉vue，你想把数据渲染在什么位置

• 3.关于插值表达式一些注意点

  • (1) {{ }} : 插值表达式，也叫胡子语法

  • (2) 插值表达式作用：将数据渲染到页面

  • (3) 支持二元运算 {{ age + 1 }}

  • (4) 支持三元运算 {{ age>30?'老男人':'小鲜肉' }}

  • (5) 支持数组与对象的取值语法

  • (6) 不支持分支语法与循环语法

   
   
   
   
   
   

   
   

        名字： {{ name }}  

        年龄： {{ age + 1 }}

        介绍： {{ age>30?'大叔':'欧巴' }}  

        女朋友：{{ girlFried[1] }}

        女儿： {{ daughter.name }}

   

   

Vue指令介绍

• 1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性

  • a. 每一个HTML标签都有自己的原生默认属性

    • HTML标签的每一个属性都有自己独特的功能

    • 例如 img标签的src属性，a标签的href属性

  • b. Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能

• 2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性）

  • 语法 ： 指令名=“指令值”

    • 例如 v-text = msg

• 3.使用Vue的指令，就像使用HTML标签原生的属性一样去使用即可。

• src" : 原生属性，设置图片的路径
  alt : 原生属性 ，设置图片不存在时的文本
  title：原生属性，设置鼠标悬停文本
  v-on:click:vue给img标签新增的属性, 给元素绑定点击事件

• v-text指令

•  a.作用： 设置元素的文本 innerText
      b.与插值表达式区别
          v-text 设置元素的文本，如果元素有文本，则会覆盖现有的文本
          {{ }}  只会替换当前位置文本
   -->

• 
  
  
     
     
     
     
     
     
  

     
     

  
         

  彩蛋超多

  
         

  彩蛋超多

  
         

  我爱你： {{ msg }}

  
     
  
     
     
  
  

• v-html指令

• 作用： 设置元素的innerHTM
   -->

• 
  
  
     
     
     
     
     
     
  

     
     

  
         

  要爱学习

  
         

  要爱学习

  
         

  要爱学习

  
     
  
     
     
  
  

v-on指令（绑定事件）

a.作用： 给元素绑定事件
        b.语法： 
            标准语法：     v-on:事件名 = "方法名"
            简洁语法：     @事件名 = "方法名"
        c.注意点
            事件名就是原生事件名去掉on
            事件方法定义在vue实例的methods对象中
 -->

   
   
   
   
   
   

   

   
   

        点我
       

       

---

       

   

   
   

vue事件修饰符

a.作用： 限定事件触发行为（例如阻止冒泡，阻止默认行为等）
        b.语法： @事件名.修饰符 = "方法名"
 -->

   
   
   
   
   
   

   

   
   

       

            我是father
           

我是son

       

       

            点我啊
       

       
       
       
       
   

   
   

vue方法中的this

• 1.vue事件方法中的this指向 ： vue实例

• 2.vue事件方法中访问data对象中的成员 : this.属性名

  • vue会将data对象与methods对象中的成员 平铺到 vue实例中

• 3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员

• 
  
  
     
     
     
     
     
     
  

  
     
     

  
          {{ msg }}
  
          点我啊
         
  
          
          我的年龄：{{ age }}
          我要成长

     

     
  
  

• vue事件传参

• 1.vue中每一个事件方法都有一个默认参数 ， 就是事件对象

• 2.如果主动给事件传参，则传递的参数 会 覆盖默认参数

• 3.如果希望同时传入事件对象 + 自定义参数，则可以使用 $event

  • v-on:click="doClick($event,自定义参数)"

  • 


   
   
   
   
   
   

       


       
   

    
            {{ msg }}
           

    
           
    
           
            删除
            编辑
       

       



  • v-bind指令 (绑定标准属性的值)

  • 默认情况下，HTML标签原生属性无法获取vue中的数据

  • 如果希望原生属性也可以获取vue中的数据，就可以使用v-bind指令

  • v-bind指令基本使用

     a.作用： 设置HTML标签原生属性的值
            b.语法： 
                标准语法：     v-bind:原生属性名 = "属性值"
                简洁语法：     :原生属性名 = "属性值"
     -->

  • 


    
   
   
   
   
   
   


       
   

    
       
       
   
    
   
   


    vue样式绑定

    v-bind 可以简写成 :

  • v-bind:class="{ '类名': bool, '类名': bool ......}"
如果值为true 该类样式就会被应用在元素身上, false则不会
注意点：如果类名有 - ，则需要使用引号包起来

  • 


    
   
   
   
   
   
   
   


       
   

    
       

           
        切换样式
       

    
           

    ---

    
            
       
    
    
   


    vue指令案例：购物车加减

    Vue编程思维

  • (1)写页面结构 HTML+CSS

  • (2)分析页面需要显示什么数据，将其保存在vue实例的data对象中

  • (3)在页面视图中使用插值语法或者指令显示data中的数据

  • 
    

    
       
       
       
       
       
       
       
    

       
       

    
           
           

    
               
                    -
               
                {{ num }}
               
                    +
               
           

    
       

       
    

  • v-for指令(列表渲染)

  • 遍历数组语法：v-for="(value,index) in arr"

    • value:数组元素

    • index:数组下标

  • 遍历对象语法：v-for="(value,key,index) in obj"

    • 该语法使用较少，了解即可

    • value:对象属性值

    • key:对象属性名

    • index:下标

  •  (1)作用：遍历数组，并重复生成对应长度的相同标签
            (2)语法： v-for="item in 数组名"
                遍历下标：   v-for="(item, index) in items"
            (3)细节： 这个指令写在哪一个元素身上，就重复生成哪一个元素
     -->

  • 


   
   
   
   
   
   


       
   

    
       
  • 
           这是第{{index}}个li元素： {{ item }}
       
  
   


   
   



v-model指令(双向数据绑定)

双向数据绑定基本使用

v-model只能用于表单元素!

v-model只能用于表单元素!

v-model只能用于表单元素!

双向数据绑定

• 表单元素的值进行了修改，这个变量的值也会跟着修改

• 这个变量的值进行了修改，表单元素的值也会跟着修改

 (1)作用 ： 双向数据绑定
            a. 表单元素的值进行了修改，这个变量的值也会跟着修改
            b. 这个变量的值进行了修改，表单元素的值也会跟着修改
        (2)语法：  v-model="变量名"
        (3)注意点： 
            a.   v-model只能用于表单元素
            b.   变量名要定义在data对象中
 -->

   
   
   
   
   
   
   

   
   

       
       

我的名字是: {{ name }}

        点我修改model
   

   
   

双向数据绑定的意义

双向数据绑定的意义

可以让我们快速的得到表单元素的值

可以让我们快速的设置表单元素的值

• 双向绑定技术的底层原理是：js属性拦截

   
   
   
   
   
   

   
   

        登陆框：
       

        密码框：
       

        登录