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 ...
5、VUE中的组件
组件 组件就是可复用的单元模块。 组件的data部分是一个函数，返回值是一个对象，在这个对象中传递要传递的值。 1Vue.component('组件名称', {组件选项}) 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题） 组件选项与 new Vue 选项配置基本一致（也有一些细节的不同） 全局组件通过Vue对象进行创建，局部组件通过在组件的内部属性components创建。 123456new Vue({ ..., components: { '组件名称': {组件选项} }}) data 在非 new Vue 的组件中，data 必须为函数，函数返回值必须是一个对象，作为组件的最终 data 1234567components: { 'xk-circle': { data() { return {pi: 3.14& ...
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 ...
4、VUE中的computed和watch
computed 在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed 1234567891011<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="gender" value="男" /> 男</label> <label><input type="radio" v-model="gender" value="女" /> 女</label> <hr ...
3、VUE的事件
绑定事件 在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @ 12<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" /> 组件的 methods 选项 在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问 12345678let app = new Vue({ el: '#app', methods: { fn() { console.log(123); } },}); 通过内联方式绑定事件处理函数 直接调用函数，不传递参数 1<button v-on:click="fn">开课吧</button> 此种情况在methods中接受的第一个参数为事件对象。 12345methods: ...
2、VUE指令的使用
内容输出 大胡子语句 通过 大胡子语句 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 大胡子语句 ，vue 提供了几个指令来解决这个问题 指令中的表达式不需要使用 大胡子语句 v-text 1<p v-text="title"></p> 弊端：v-text 会填充整个 innerHTML v-cloak 1<p v-cloak>{{title}}</p> 需要配合 css 进行处理 12345<style>[v-cloak] { display: none;}</style> v-html 为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析 v-once 只渲染元素和组件一次，后期的更新不再渲染 v-pre 忽略这个元素和它子元素内容的编译 12345678910111213141516 ...
1、VUE的基础使用
vue的引用 通过script标签的方式进行引用。 1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 组件 vue 的核心功能之一就是组件 组件基本分类 根组件 可复用的功能组件 根组件的创建 通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象 1let app = new Vue(options); 应用最顶层的组件，一般情况下，一个独立的应用有且只有一个根组件（节点） 12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal ...
