芒种的农民

Axios 是一个基于 Promise 的 HTTP 库，可在浏览器和 node.js 中使用，本章节我们使用Axios 进行Ajax请求。 一、GET请求 参考下图，在static中建一个demo.json文件: demo.json: { "name":"AjazDemo", "num":3, "sites": [ { "name":"demo01", "info":[ "...

<template> <div id="app"> </div> </template> <script> import Vue from "vue"; export default { name: 'app', data(){ return{ } }, metho...

一、过渡效果 当插入或删除 transition 组件中的元素时，Vue 将会做以下处理： 1、自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，会根据过渡或动画的设置在恰当的时机添加/删除 CSS 类名。 2、如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。 4、如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 插入...

学习了Vue的基础内容之后，这个章节开始搭建一个简单的路由。 1、创建模板组件： 开始创建四个组件 ,分别命名为abc.vue页面： 2、定义路由： 在router index.js文件里面定义路由配置： 3、页面配置路由跳转： 在app.vue中使用router-link配置路由跳转： 源码参考： <div id="app"> <h1>Hello App...

使用 Vue.directive 注册全局指令 v-myfocus, 使input元素自动获得焦点： <template> <div id="hello"> <p>使 input 元素默认获取焦点：</p> <input v-myfocus> </div> </template> <s...

Vue 最强大的功能之一就是组件（Component）！ 组件可以扩展 HTML 元素，封装可重用的代码，方便开发者更灵活的构建大型的前端项目。 一、定义全局组件 全局组件定义格式：Vue.component(tagName, options)，下面的程序我们注册一个全局组件，并使用<helloWorld></helloWorld>的标签进行引用： <template...

一、input 和 textarea 输入框 在之前的学习案例中，我们经常使用 v-model=“message” 的方式实现双向数据绑定，而且v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，总是以 Vue 实例的数据为准。 以下是v-model实现input 和 textarea 输入框双向数据绑定： <input v-model="m...

一、v-on：事件监听指令： 使用 v-on 指令可以监听事件： <template> <div id="hello"> <button v-on:click="sayHello($event,'Jay')">Hello</button> </div> </template> <script> ...

一、class属性绑定 1、单样式使用： 使用 v-bind:class 可以为元素设置一个样式： <template> <div id="hello"> <div v-bind:class="{ class1: use }"></div> </div> </template> <script> ...

一、watch侦听属性 通过 watch 来响应数据的变化，下面实现一个港币-人民币兑换的功能： <template> <div id="hello"> <p>人民币/港币换算</p> <p>人民币: <input type = "text" v-model = "rmb"></p> &...

一、计算属性 计算属性使用computed关键词，主要用于处理一些复杂逻辑，比如使用以下方式在模板中实现字符反转的逻辑时，模板显得比较混乱： <div id="hello"> {{ msg.split('').reverse().join('') }} </div> 在这里改用计算属性实现： <template> <div id="h...

1、v-for列表渲染： v-for 指令循坏的语法格式： 【item in items】 或者使用of代替in ； v-for 可以将数组渲染到一个列表中，如下： <template> <div class="hello"> <ol> <!-- books是定义好的数组，book是数组内单个对象的别名 --> &...

基本所有的编程语言都有条件判断语句（如果你发现哪门编程语言没有，请联系我领鸡腿：594218572）； 1、v-if v-if可以独立使用，它根据use值(true 或 false )来决定是否插入 p 元素： <p v-if="use">The use is true!</p> 2、v-else v-else必须与v-if配合使用： <p v-if="us...

一、定义 Vue.js 使用基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定到底层的 Vue 实例对象中， 在应用状态改变时， Vue 能够重新渲染DOM元素。 二、操作 1、插值 1）文本 这是最常用的绑定方式， 使用{{…}}（双大括号）的文本插值，我们上一章节的HelloWorld显示就是这种方式： <div class="hello"> <h1&...

一、Vue简介 学过前端的人都懂JQuery，我们通过简单比较JQuery来认识Vuejs框架： JQuery： 使用选择器（$）操作DOM对象（赋值、取值、事件绑定等），属于原生的HTML开发（数据与界面一体化）。 vue： 通过Vue对象将数据和View页面完全分离。对数据进行操作无需引用相应的DOM对象，通过Vue对象实现双向数据绑定，通过对数据的操作就可以完成对页面视图的渲染。就是MVVM...