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