尚融宝08-vue.js入门

目录

一、Vue.js的基本认识

1、官网

2、简介

3、优点

二、第一个Vue应用

1、引入脚本库

2、数据绑定

三、数据绑定指令

1、数据绑定指令

2、双向数据绑定指令

什么是双向数据绑定？

四、理解MVVM

五、绑定事件监听

六、计算属性

例1：模板中使用js表达式

例2：使用计算属性

例3：使用方法

七、监视

八、条件渲染

九、列表渲染

十、实例生命周期

综合案例

---

一、Vue.js的基本认识

1、官网

英文官网：Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)

中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

2、简介

渐进式JavaScript 框架（核心 + 扩展）

作者：尤雨溪(一位华裔前 Google 工程师) 

作用：动态构建用户界面

3、优点

体积小：压缩后33K

更高的运行效率：基于虚拟dom

双向数据绑定：不操作dom，关注业务逻辑

生态丰富、学习成本低：入门容易，学习资料多

二、第一个Vue应用

1、引入脚本库

创建文件夹05-vue，复制vue.js，创建 01-hello.html，创建

2、数据绑定

    
    
    
    
    



    

        
{{title}}
        欢迎{{user.username}}
    
    

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

            data: {
                title: '第一个vue程序',
                user: {
                    username: 'helen',
                    age: 25,
                },
            }

也可以写成
 

            data: {
                return {
                    title: '第一个vue程序',
                    user: {
                        username: 'helen',
                        age: 25,
                    },
                }
                
            }

测试

三、数据绑定指令

1、数据绑定指令

step1：创建 02-数据绑定指令.html

step2：引入脚本，创建Vue对象

step3：使用数据绑定指令做数据渲染

    {{company}}
    

v-bind: 指令的简写形式

{{company}}

2、双向数据绑定指令

step1：创建 03-双向数据绑定指令.html

step2：将02的代码复制到03

step3：将 v-bind:value 修改成 v-model

什么是双向数据绑定？

• 当数据发生变化的时候，视图也会跟着发生变化
  • 数据模型发生了改变，会直接显示在页面上
• 当视图发生变化的时候，数据也会跟着同步变化
  • 用户在页面上的修改，会自动同步到数据模型中去

注意：v-model只用于用户交互组件中

四、理解MVVM

在ViweModel中有DOM监听器和数据绑定器

五、绑定事件监听

创建 04-绑定事件监听.html

使用 v-on 进行事件绑定，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

    


        去学习
        
        去学习
        
        去睡觉
    
    

六、计算属性

创建 05-计算属性.html

例1：模板中使用js表达式

模板表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会难以维护。

    
原始值: {{ message }}

    
    
反转消息: {{ message.split('').reverse().join('') }}

 所以，对于任何复杂逻辑，你都应当使用计算属性

例2：使用计算属性

computed: {
    reversedMessage () {
        console.log('计算属性执行')
        return this.message.split('').reverse().join('')
    }
}

反转消息: {{ reversedMessage }}

例3：使用方法

methods:{
    reversed () {
        console.log('reversed被执行')
        return this.message.split('').reverse().join('')
    }
}

反转消息: {{ reversed() }}

看起来计算属性和方法能完成相同的功能，那么他们有什么区别呢？

• 计算属性基于缓存
• 方法将总会再次执行

反转消息: {{ reversedMessage }}

反转消息: {{ reversedMessage }}


反转消息: {{ reversed() }}

反转消息: {{ reversed() }}

七、监视

创建 07-监视.html

    

        姓: 

        名: 

        姓名: 

    

    
    

八、条件渲染

创建 08-条件渲染.html

点击复选框，显示或隐藏协议内容。分别使用 v-if 和 v-show 实现

    同意许可协议
    
    
yes.
    
no.

    
    
yes.
    
no.

九、列表渲染

创建 09-列表渲染.html

v-for：列表循环指令

    

        
        

            {{index}} {{item.username}} {{item.age}}
        
    

十、实例生命周期

创建 10-实例的生命周期.html

    
{{ message }}

分析生命周期相关方法的执行时机

综合案例

创建：综合案例.html

  

    

      

        
序号
        
姓名
        
年龄
        
email
      
      

        
{{index + 1}}
        
{{item.name}}
        
{{item.age}}
        
{{item.email}}