谁能给做网站,成都代做网站,网络设计专业有前途吗,企业网站改版的意义什么是Vue?
Vue 是一套前端框架#xff0c;免除原生JavaScript中的DOM操作#xff0c;简化书写 基于MVVM(Model-View-ViewModel)思想#xff0c;实现数据的双向绑定#xff0c;将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/
Vue快速入门 打开页面#xff0…什么是Vue?
Vue 是一套前端框架免除原生JavaScript中的DOM操作简化书写 基于MVVM(Model-View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/
Vue快速入门 打开页面可以看到输入框中内容即为绑定的vue对象中的message内容输入框外的内容为message内容如果改变输入框中内容相应的后面的内容也会改变即完成双向绑定 常用指令
指令:HTML标签上带有 V-前缀 的特殊属性不同指令具有不同含义。例如:v-ifv-for... 常用指令 v-bind
为HTML标签绑定属性值如设置hrefcss样式等 将a标签中的地址href绑定上vue对象中url的值 v-model
在表单元素止创建双向数据绑定案例即上述快速入门中的案例 v-on
为HTML标签绑定事件 v-if、v-else-if、v-else、v-show v-if v-show 将一个输入框的内容与vue对象的age值双向绑定然后根据这个值判断为年轻人还是中老年人去渲染内容显示。 输入框中此时为20则渲染出年轻人的文本内容。更改文本框的年龄会对应的显示出不同的内容 v-show也是类似的操作不过该方式条件不成立时在页面源码中还有相应的文本内容只不过是通过display属性为none而让相应的文本不显示v-if是条件不符合直接不渲染页面源码中就没有相应内容 v-for
列表渲染遍历容器的元素或者对象的属性 v-for可以把vue中addrs数组遍历一下每个用addr接并显示在文本中 遍历的时候索引也可以接住顺便显示出每个元素的索引 案例通过Vue完成表格数据的渲染展示 表格html代码 要渲染的数据在vue对象中的users对象中 表格未渲染数据前的样子 在tr标签中对users数据进行遍历 渲染完数据后的表格 生命周期
生命周期:指一个对象从创建到销毁的整个过程。。 生命周期的八个阶段:每触发一个生命周期事件会自动执行一个生命周期方法(钩子)。 mounted:挂载完成Vue初始化成功HTML页面染成功。(发送请求到服务端加载数据)
Ajax
概念:Asynchronous JavaScript And XML异步的JavaScript和XML.
●作用: 数据交换:通过Ajax可以给服务器发送请求并获取服务器响应的数据。 异步交互:可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如:搜索联想、用户名是否可用的校验等等。 原生Ajax 1.准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list 2.创建XMLHttpRequest对象:用于和服务器交换数据 3.向服务器发送请求 4.获取服务器响应数据
用该网址制造一些服务器能提供的数据当请求这个网址时可以模拟对后端相应接口请求后获取到相应数据。 Axios
介绍:Axios 对原生的Ajax进行了封装简化书写快速开发。 官网:https://www.axios-http.cn/
Axios入门 也可用一种更简化的方式发送请求 案例基于Vue及Axios完成数据的动态加载展示
1.数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list
2.在页面加载完成后自动发送异步请求加载数据染展示页面(性别:1代表男2代表女)。 先把vue和axios的js文件引入页面 创建一个vue对象与该表格进行绑定 原始表格 在钩子函数中用axios发送数据请求结果用emps对象接着该请求在vue完成绑定时就发起了 遍历emps内容将相应信息填到表格中去 请求到数据后表格被渲染后的样子
