<table><tr><th>地名</th><th>结果</th><th>人名</th><th>性别</th></tr><template v-for="(item, index) in list"><tr :key="index"><td :rowspan="item.groups.length">{{item.name}}</td><td :rowspan="item.groups.length" v-if="item.result === ‘1‘"><span>已完成</span></td><td :rowspan="item.groups.length" v-if="item.result === ‘0‘ || item.result === null"><span>未完成</span> </td><td>{{item.gr...
swiper相关文档官网 www.swiper.com.cns3使用说明 3.swiper.com.cn/usage/index.htmls6使用 www.swiper.com.cn/usage/index.html配置Api文档 www.swiper.com.cn/api/pagination/362.htmlvue专有用法 https://github.com/surmon-china/vue-awesome-swiper1.安装swiper因为生产环境也要用到所以要保存到项目 --save 不加版本号安装最新版本此处是6安装最新版本 cnpm install --save swiper安装指定版本 cnpm ins...
三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美...
axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库，小编我也是从vue-resource转换过来的，差别说不来，我们讲一下axios在实际开发中的用法axios特点1.从浏览器中创建 XMLHttpRequests2.从 node.js 创建 http 请求3.支持 Promise API4.拦截请求和响应 （就是有interceptor）5.转换请求数据和响应数据6.取消请求7.自动转换 JSON 数据8.客户端...
vue动画 在vue.js中有两种写动画的方法，第一种就是像js里一样，用原生代码来实现，第二种则是使用animate.css的动画类文件，这个动画类和bootstrap.css文件类似，直接调用类就可以了，话不多说，直接上代码。一、vue.js原生动画 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"/> 5<title></title> 6<script type="text/javascript" src="js/vue.js"></script> 7<style> 8 .oDiv{ 9 w...
Vue模板语法：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><!-- 模板语法： {{ 变量 }} 去 data 中找变量的值 --><h2>{{ msg }}</h2><h3>{{ person.name }}</h3><!-- 也能进行运算 --><h4>{{ 1+2 }}</h4><!-- 三元运算符 --><h2>{{ 1>2 ? ‘真的‘: ‘假的 ‘ }}</h2><!-- split以...
实例的生命周期函数（官方11个）：beforeCreate：在实例部分（事件/生命周期）初始化完成之后调用。created：在完成外部的注入/双向的绑定等的初始化之后调用。beforeMount：在页面渲染之前执行。mounted：dom 元素在挂载到页面之后执行。首次加载页面时，不会走这两个钩子，只有当数据发生改变时才会执行：beforeUpdate：数据改变，还没重新渲染之前执行。updated：渲染数据完成之后执行。执行销毁需要调用：vm.$destroy()beforeD...
先使用vue cli构建一个自己的vue项目1.npm i -g vue-cli2.vue init webpack sell (sell是你的项目名)3.一路回车（在这个过程中会提示你是否安装一些依赖包，比如vue-router，es6语法检查等等，这些根据你个人习惯或者癖好选择Y/N）4.npm i (这个是安装项目的依赖包)5.npm run dev（启动你的vue项目） 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成，然后你可以删除掉没有用的组件6.webpack sell默认没有安...
retive的错误用法<template><div>司藤的信息==>{{ objInfo }}<button @click="handerHttpServe">获取远端的值</button></div> </template> <script> import { reactive } from ‘@vue/reactivity‘ export default {setup () {let objInfo=reactive({ })function handerHttpServe(){setTimeout(()=>{objInfo={name:‘司藤‘,sex:‘女‘,}},400)}return {objInfo,handerHttpServe}} } </script> 为什么无法更新视图呢？？我们都知道...
原文地址：http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"><input type="text" ref="input1"/><button @click="add">添加</button> </div><script> new Vue({el: "#app",methods:{add:function(){this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗}} }) </script>一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之...
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn； 子组件<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click=‘select(`大连`)‘>点击此处将‘大连’发射给父组件</button> </div> </template> <script> export defau...
对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() ;//使用官方vue-cli脚手架书写<template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-model="example1"/> /当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数 <input v-model="example2.inner0"/></template><script> ...
在vue中，指令是指带有v-前缀的vue属性。通过指令我们可以给标签设置一些制定的特性。 1. v-text 指令 类似js中的innertext设置标签内的文本元素1<!-- v-text innerText -->2<p v-text="message"></p>3<!-- 简写方式 -->4<p>{{message}}</p> 2. v-html 指令 类似js中innerHTML，设置标签内的内容，内部的标签会被解析渲染出来1<!-- v-html innerHTML -->2<p v-html="dom"></p> dom: ‘<mar...
<template><div>{{propContent}}</div> </template><script> import { watchEffect, watch, ref } from "vue"; export default {name: "",components: {},mixins: [],props: {listArr: {type: Object},list1: {type: String}},setup(props, content) {let propContent = ref(0);watch(() => props.list1,(val, oldval) => {/* ... */propContent.value = parseInt(val) + 2;console.log("val", val);console.log("oldval", oldval)...
vue官网的描述：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。通过描述我们知道，它会缓存不活动的组件，而不是销毁。这样组件之间的切换就能保存上个组件的状态，而不是切换之后又得...