宜昌网站设计,锡林郭勒盟建设局网站,设计师网名高级,北京微网站建设公司往期内容
《Vue零基础入门教程》第一课#xff1a;Vue简介
《Vue零基础入门教程》第二课#xff1a;搭建开发环境
做为第一个案例, 主要给大家介绍vue的最基本使用.
vue使用的3步曲(重点)
引入vue.js编写页面(视图)创建App实例并挂载
1) 引入vue.js
在html的头部, 通过…往期内容
《Vue零基础入门教程》第一课Vue简介
《Vue零基础入门教程》第二课搭建开发环境
做为第一个案例, 主要给大家介绍vue的最基本使用.
vue使用的3步曲(重点)
引入vue.js编写页面(视图)创建App实例并挂载
1) 引入vue.js
在html的头部, 通过script src引入vue.global.js
示例
!-- 1. 引入vue.js --
script src../node_modules/vue/dist/vue.global.js/script
2) 编写页面(视图)
在body中, 编写一个div元素, id为app, 所有视图部分将在这部分渲染
示例
!-- 2. 编写页面 --
div idapphello/div
3) 创建App实例并挂载
示例
script// 1. 从Vue中解构相应的APIconst { createApp } Vue// 2. 创建App, 传入一个对象, 返回一个应用实例const app createApp({})// 3. 挂载app.mount(#app)
/script
Vue是我们从vue.global.js中导入的对象, 从对象中解构出需要的API函数createApp 传入一个对象, 返回应用实例app.mount挂载到HTML对应的位置 4) 声明式渲染
声明式渲染
跟变量, 函数类似, 需要使用什么就先声明一下.
使用流程
Vue被称为声明式渲染, 使用步骤
声明状态(变量)使用状态(变量)
声明状态
示例
const app createApp({data() {return {msg: hello,}},
})
data 配置项: data必须是一个函数, 在函数中返回对象, 在返回的对象中声明状态
这里大家先当做固定写法, 后面会详细分析
使用状态
示例
div idapp{{ msg }}
/div
通过{{}}(插值表达式)使用在data中定义的状态
5) 响应式数据
什么是响应式数据
当状态值发生变化时, Vue会自动响应变化, 使用新的数据重新渲染视图
安装调试工具
借助调试工具, 演示响应式数据
6) 小结 Vue的两个特点
声明式渲染: 先声明后使用响应式数据: 数据改变时, 视图会响应数据的改变, 重新渲染新的值 完整版视频教程请dd
