天津市建设 银行网站,教做视频的网站,wordpress ck video,城乡和住房建设部证书信息网目录
1 vue 浏览器调试工具
1.1 安装
1.2 配置
2 数据驱动视图与双向数据绑定
3 简单使用
3.1 下载
3.2 将信息渲染到DOM上
4 使用vue浏览器调试工具
5 vue指令 1 vue 浏览器调试工具
chrome可能是我浏览器的原因#xff0c;装上用不了#xff0c;我们使…目录
1 vue 浏览器调试工具
1.1 安装
1.2 配置
2 数据驱动视图与双向数据绑定
3 简单使用
3.1 下载
3.2 将信息渲染到DOM上
4 使用vue浏览器调试工具
5 vue指令 1 vue 浏览器调试工具
chrome可能是我浏览器的原因装上用不了我们使用Edge
1.1 安装 搜索并获取 1.2 配置 勾选上 允许访问文件URL 然后直接关了就行了
2 数据驱动视图与双向数据绑定
数据驱动视图与双向数据绑定是vue有两个特性
数据驱动视图当数据改变的时候显示的元素会自动发生改变
双向数据绑定当你页面上有个表单的时候vue可以帮你时时获取数据双向指的是js的数据会影响HTMLHTML的数据会改变JS中的数据 MVVM是vue实现 数据驱动视图 和 双向数据绑定 的核心原理MVVM指的是Model,View,ViewModel View是页面上显示的东西Model是数据ViewModel相当于是这两个东西的中介
当数据(Model)发生变化的时候会通过ViewModel影响页面(View)
当页面(View)发生变化的时候会通过ViewModel影响数据(Model)
3 简单使用
我们先不使用node,先在html中用
3.1 下载
我们在npm官网搜索vue拿到dist中的vue.global.js这个文件就可以了 每个版本引入的东西可能不一样我们可以看文档中的CDN引用哪个你就引用哪个就行我使用的是当前2023/3/10vue最新的版本3.2.47
vue官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js3.2 将信息渲染到DOM上
我们用解构赋值的方法拿到Vue中的createApp然后使用createApp里面的参数是一个对象对象中有一个data函数data函数返回一些信息
之后对createApp使用mountmount中写选择器(mount的选择器如果覆盖了多个元素它只会处理第一个)
再之后将{{username}}放到div中 打开页面后发现可以渲染到页面上 4 使用vue浏览器调试工具
在工具检测到vue时会出现vue调试工具我们选择其中的Root然后修改username的值 双击就可以修改修改之后发现页面的内容也随之改变 我们修改的只是数据并没有修改DOMDOM发生改变验证了数据驱动视图
5 vue指令
vue指令是vue的模板语法根据不同的用法可以分为六大类
内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令
像我们上面用的{{}}就是vue的指令
