目录

一、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、数据绑定指令

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

{{company}}

v-bind: 指令的简写形式

{{company}}

2、双向数据绑定指令

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

step2：将02的代码复制到03

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

什么是双向数据绑定？

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

四、理解MVVM

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

五、绑定事件监听

去学习去学习去睡觉

六、计算属性

例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() }}

七、监视

姓: 
名: 
姓名: 

八、条件渲染

创建 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}}