Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...
原生的下拉框用vue获取值双向绑定简直不要太好用，Duang的一下就行了<div id="datePrice"><select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"><option v-for="item in dateList" v-bind:value="item.date" v-text="item.date"></option></select></div>js:var VMdate=new Vue({el:‘#datePrice‘,data:{selected:‘请选择日期‘,serviceType:0,dateList:[
{‘date‘:‘2016-11‘
},
{‘date‘:‘2016-...
代码中，Helloword是子组件<template><div class="index"><Header></Header><HelloWorld></HelloWorld><button @click="goPro">跳转</button></div>
</template>
mounted(){console.log(this.$children)
}用ref绑定子组件，在父组件中通过$refs取对应的值或者方法<HelloWorld ref="hello"></HelloWorld>this.$refs.hello.属性
this.$refs.hello.方法 原文：https://www.cnblogs.com/xieoxie3000question/p/13031054.html
简单页面展示<template><!-- time为时间戳 --><div>{{time | formatDate}}</div><!-- 结果为 2018-01-23 18:31:35 -->
</template>export default {data() {return {time: 1516703495241};},filters: {formatDate: function (value) {let date = new Date(value);let y = date.getFullYear();let MM = date.getMonth() + 1;MM = MM < 10 ? (‘0‘ + MM) : MM;let d = date.getDate();d = d < 10 ? (‘0‘ + d) : d;let h = date.ge...
Vue——前端框架，Node——JavaScript运行时环境，可以运行在服务器上，在小项目中node完全可以作为自己的服务器使用，目前学习node是为了完成毕业设计。但是两者怎么联系在一起？因为两者本身存在跨域问题。以下简例解决问题。首先先创建一个Vue项目Client，这里使用脚手架创建主要代码如下 1 /**main.js*/2 import Vue from ‘vue‘3 import App from ‘./App‘4 import axios from ‘axios‘5 Vue.prototype.$axios = axios;6 7...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...
vue-resource更换为axiosnpm install axios/*main.js*/import axios from ‘axios‘Vue.prototype.$ajax = axios/*components*/import axios from ‘axios‘export default { created () { axios.get(‘./static/data.json‘).then(res => { }) }}获取DOM<div class="tab" ref="domList"></div><script>created () { this.$nextTick(() => { console.log(this.$refs.domList) })}</script>原文：http://www.cnb...
给子组件添加一个id属性，方便查找<view> <first-component id="mycomp"/></view>123通过this.selectComponent方法查找子组件Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log(this); // 获取子组件的数据 console.log(this.selectComponent("#mycomp").data); // 调用子组件的方法 this.selectComponent("#mycomp").huanghail...
querySelector的参数是css选择器，任何选择器都可以作为它的参数，这样就使得它非常方便灵活：比如获取class=‘test’的标签下的第一个子元素，可以这样写querySelector(‘.test > * ‘)，也可以指定子元素的类型querySelector(‘.test > span ‘)，或者是：classquerySelector(‘.test > #f_div‘)还可以使用querySelectorAll方法，这样会获取所有满足条件的元素，而不只是获取第一个元素。<div class="first"><span>张三</spa...
平时BUG： 在vue中使用element ui 中的导航组件时，使用index作为跳转的路径，单击跳转没有问题，但是当刷新页面是，选项卡的激活 状态就变成初始化的了，起起初想到用获取window.location.search方法，效果是可以达到，但是后来发现这操作有的牵强，就换成了vue中
自己的获取路由路径的方式，如下： 1let cur_path = this.$route.path; //获取当前路由
2let routers = this.$router.options.routes; // 获取...
从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上，并且根据对页的操作获取到返回的值：1、首先在data里定义一个数据 timeTip 为一个空数组data () {return {timeTip:[]}} 2、将获取到的数据进行动态生成，并塞入 timeTip 中creadeTimeTip(data.data) //返回的数据
creadeTimeTip(data){this.timeTip = []; //对空数组进行清空，以免影响后续操作var len = data.length; for (var i = 0; i < len; i ++) {var i...
// 注册一个全局自定义指令 `v-focus`Vue.directive(‘focus‘, function (el) {el.focus()})这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素所以我们要在<el-input>被绑定为v-focus的同时在自定义指令中获取组件下通过querySelector()方法获取input元素<el-input v-model.trim="searchFor" @blur="blurSearchFor"v-fo...
HTML在任意节点上添加属性“ref”<span ref="span_01">span_01</span>
<button @click="consoleDOM()">consoleDOM</button>SCRIPT vue里通过 this.$refs.xxx 获取consoleDOM() {window.console.log(this.$refs.span_01)
}原文：https://www.cnblogs.com/mahoshojo/p/12238301.html
获取DOM元素<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div id="app"><!-- <App></App> --></div><script type="text/javascript" src="../js/vue.min.js"></script><script type="text/javascript">var subComponent = {template: `<div></div> `};Vue.component(‘subCom‘, subComponent);var App = {data: function() {return {}},template: `<div class=‘app...
1. 配置axios```import axios from‘axios‘` ``` 2. 配置根路径```axios.defaults.baseURL = ‘【接口网址】‘
axios.interceptors.request.use(config => {
// console.log(config)
config.headers.Authorization = window.sessionStorage.getItem(‘token‘)
// 在最后必须 return configreturn config
})
Vue.prototype.$http = axios ``` 3. 获取数据```async 【函数名】() {
const { data: res } = awaitthis.$http.get(‘me...
