Vue.js-Day01-AM【第一次学习-安装、基础使用(引入方式)、数据展示、指令介绍(v-html、v-text、v-bind、v-if、v-for】

目   录

1、讲在前面

课程内容

实训课内容

2、Vue.js介绍

2.1、安装

开发环境

版本介绍

2.2、基础使用

引入Vue.js---方式1

引入Vue.js---方式2

输出Vue.js的构造函数

使用Vue.js的3个步骤

原生实现（不使用Vue.js）

2.3、数据的展示

var、let区别

插值表达式

3、常用指令

3.1、指令介绍

3.2、常用指令

1、v-html（解析 HTML 代码）

2、v-text（渲染普通文本）

3、v-bind（绑定数据）

【{{插值表达式}}、v-html、v-text、v-bind】区别图

4、v-if（条件渲染）

5、v-for（列表渲染）

---

1、讲在前面

课程内容

实训课内容

• 学习能力：

  • 新技术的心态（平和，积极）

  • 阅读能力（提取知识点）

  • 解决问题能力 （思路、方法）

  • 项目实战能力（开发能力）

2、Vue.js介绍

Vue.js---渐进式JavaScript框架

JavaScript---网页交互行为---基于浏览器

• 什么是JavaScript： 是一门编程语言。 客户端脚本语言！ 负责交互、客户端业务逻辑的开发。

• 什么是框架： 一个已经具有基本雏形的体系技术点，可以在这个的基础上快速地开发自己的项目应用。

• Vue.js 是一个JavaScript 框架。

框架 --> 简化程序开发（代码量较少）

2.1、安装

开发环境

• 开发环境： 项目研发阶段，程序还在开发。

• 生产环境： 项目已经研发结束，项目已经部署。

版本介绍

2.2、基础使用

引入Vue.js---方式1

引入Vue.js---方式2

输出Vue.js的构造函数

使用Vue.js的3个步骤

原生实现（不使用Vue.js）

2.3、数据的展示

var、let区别

var定义的变量：全局变量 或者 函数变量。
let定义的变量：块级的变量。

插值表达式

• el 是指定作用的范围。

• data是指定范围内使用到的数据。

• 如何渲染数据呢？

  • 在模板范围标签之内，通过 {{}} 实现数据展示。

     {{ data里面的属性 }}

  • 上述这种数据展示的方法叫做 插值表达式。在元素标签内使用，传入变量，显示Vue对象中的data值。

    
    
    

    

    
    

    



    
    

        
{{msg}}
 
        
{{str}}
        
{{txt}}
    
    

    
    
{{msg}}
    
{{str}}
    
{{txt}}

3、常用指令

3.1、指令介绍

3.2、常用指令

1、v-html（解析 HTML 代码）

• 作用： 渲染数据， 功能 和 插值表达式 渲染变量 功能一致。

• 不同点：

  • v-html 渲染数据，在模板还没有编译完成时候，页面上面 是空白的；而插值表达式的方法，页面上的数据是有 {{}} 这样的内容存在，给用户的体验感不好。

  • v-html 可以编译HTML字符串内容。【插值表达式--{{}}、v-text，均不会对字符串进行编译。】

2、v-text（渲染普通文本）

• 作用： 渲染数据， 功能 和 插值表达式 渲染变量 功能一致。

• 不同点：

  • v-html 渲染数据，在模板还没有编译完成时候，页面上面 是空白的。 而插值表达式的方法，页面上的数据是有 {{}} 这样的内容存在，给我用户的体验感不好。

3、v-bind（绑定数据）

• 属性绑定。 我们v-html,v-text,{{}} 只能实现给标签之间设置内容。 但是，标签的属性值是某个数据时，需要使用到 v-bind指令。

<标签 v-bind:标签属性="变量/表达式">
<标签       :标签属性="变量/表达式"> // 缩写

【{{插值表达式}}、v-html、v-text、v-bind】区别图

v-html 可以编译HTML字符串内容。【插值表达式--{{}}、v-text，均不会对字符串进行编译。】

框架便利之处：data中的数据 一旦 发生变化，模板(HTML)中的数据 自动 发生变化。【数据绑定】

    
    
    
    


    

        

        

        
{{msg}}
        
        
        

        跳转
    
    

4、v-if（条件渲染）

作用： 显示不同的模板内容。

<标签 v-if="条件">
<标签 v-else-if="条件">
<标签 v-else>

    
    
    
    



    

        
有数据哦！ 是一个列表！
        
没有的哦！。。。。
            
        
        

        
有数据哦！ 是一个列表！
        
没有的哦！。。。。
            
        

        

            订单状态：
            未发货
            已发货
            已签收
            已评价
            已结束
            未知状态！
        
    

5、v-for（列表渲染）

作用：渲染数据列表。

1、// 得到 数组/对象 中的每一个元素
<标签 v-for="标识符  in  数组/对象">

2、// 得到 数组/对象 中的每一个元素及其 下标/key值
<标签 v-for="(标识符,下标标识符)  in  数组/对象">

    
    
    



    

        
要做的事情：
        

            
{{item}}
        

        

        

            
 {{key}} === {{val}}
        
        

        

            
{{item}}====={{idx}}
        
        

        

            

                
序号：{{index+1}} ===>
                    姓名：{{item.name}}===
                    年龄：{{item.age}}==
                    性别：{{item.sex ? '男':'女' }}
                
                
他的朋友们：
                

                    

                        

                            编号：{{idx+1}}===>
                            姓名：{{val.name}}
                            年龄：{{val.age}}
                            性别：{{val.sex ? "先生":"女士"}}
                        
                    
                
            
        
    

点个赞、加个关注，再走啊，谢谢老板~