5、VUE前端路由
路由的基本概念 VueRouter基本使用 官方地址：https://router.vuejs.org/zh/ 引入相关库文件 VueRouter依赖于vue，因此需要先引入vue 12<script src="../js/vue.js"></script><script src="../js/vue-router_3.0.2.js"></script> 添加路由链接 12<router-link to='/user'>user</router-link><router-link to='/register'>register</router-link> router-link标签会被渲染成a标签，to属性则会被渲染成href属性。 添加路由填充位 1<router-view></router-view> 定义路由组件 123456const User = &# ...
4、VUE前后端交互
Ajax请求 参考：Ajax Promise 参考：Promise Axios 参考：Axios fetch 参考：fetch Async 参考：async 图书管理重构 展示列表 列表展示即后台请求数据，然后放到vue对象列表中。 请求数据使用axios进行请求，为了方便后续操作，先对axios对象设置基于地址与拦截器（直接返回相应内容）。 123456axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res){ return res.data;}, function(error){ console.log(error)}); 接下来在全局对象中定义一个方法用于获取数据 12345methods: { queryData: async function(){ this.books = await axios.get('b ...
3、VUE组件开发
组件注册 1234Vue.component(组件名称,{ data:组件数据, template:组件模板内容}) 简单用法 12345678910111213Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button @click="add">点击了{{count}}次</button>', methods: { add() { this.count++ } },}) 123<div id="app"> <button-coun ...
2、VUE常用特性
表单操作 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span> <span> <input type="text" v-model="uname" /> </span> </div> <div> <span>性别：</span> <span> ...
1、VUE模板语法
基本使用 使用Vue的步骤 需要提供标签用于填充数据 引入VUE.js文件 可以使用vue的语法做功能 把vue提供的数据填充到标签里 1234567891011121314151617<body> <div id="app"> <!-- 插值表达式 可以做简单的运算 --> <h1>{{title}}</h1> </div> <script src="../js/vue.js"></script> <script> new Vue({ // 元素挂载的位置，可以是CSS选择器或者DOM元素 el: '#app', // 模型数据 data: { title: 'x ...
