Vue指令1、v-once指令 单独使用，限制的标签内容一旦赋值，便不可被动更改（如果是输入框，可以主动修改）<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title></title> </head> <body><div id="app"><input type="text" v-model="msg"><input type="text" v-model="msg"v-once> #因为是输入框，一旦赋值，只可主动更改<p>{{msg}}</p><p v-once>{{msg}}</p> #一旦赋值，便不可更改</div> </body> <script sr...
//html <div id="app"> {{message}} </div>//scriptnew Vue({el:"#app",router,template:"<App/>",data(){return {message}}, mounted(){ console.log(this.message)//问题：为什么可以通过this.message这种方式来访问data中的数据呢 } }) 在vue源码中，可以发现数据data是定义在初始化对象$options中的，要想访问到data中的key字段，正常来说是通过vm.$options.data.key来访问的。那么，在vue中是怎么实现利用vm....
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,Object.defineproperty(obj,‘val‘,attrObject), 参数1: obj是属性所在的对象,参数2: ‘val‘,属性名,它是一个string类型,参数3: {}属性所描述的对象详情可以看Object.defineproperty的文档下面直接上demo,html代码: <input type="text" id="inp1"><br>你...
好久不见呀，这两年写了很多很多东西，也学到很多很多东西，没有时常分享是因为大多都是我独自思考。明年我想出去与更多的大神交流，再修筑自己构建的内容。 有时候我会想：我们遇到的问题，碰到的界限，是别人给的还是我们自己给的？其实我觉得自己选择的方向是对的，但是有时难免会怀疑，是否有人和我在做一样的事情，我希望找到有趣的伙伴，做一些有趣的事情。Vue 中数据流组件 又将年终了，该做年终总结了呀。。最近花了一...
问题：请求参数arr=[1,2,3]，则url里面显示“url地址?arr[]=1&arr[]=2&arr[]=3”，这样调用接口的时候后台可能不识别 "[]", 这里需要把 "[]" 给去掉解决方法： 1，安装qsnpm install qs 2，在js里面引用并使用import qs from ‘qs‘this.$http.get(url + ‘?‘ + qs.stringify(params, { indices: false })).then(() => {}) 然后再调用接口的时候url里面就为“url地址?arr=1&arr=2&arr=3”原文：https://www.cnblogs.com...
cmd下安装axiosnpm install axios安装好后,会多出node_modules文件夹思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给data里的result,再传给模板里9.html<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--><scrip...
{{xxx}} 基本的插值表达式插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置这种写法不仅可以显示data属性里定义的值，也可以书写js中的表达式，可以使用methods中定义的函数等等其他数据渲染指令v-text：指定元素的内容（纯文本）v-html：指定元素的内容（解析html）v-pre：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法（{{xxx}}）v-once：只进行一次渲染，不进行响应式，...
把最近学习vue的一些知识点记录下来，今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意：vue-resource的引入要在vue版本文件之后然后把列表页面写好，然后在methods里写一个获取列表数据的方法： getAllList() { //获取所有的品牌列表this.$http.get(‘api/getprodlist‘).then(result => {var result = result.bodyif (result.status === 0) {this.lis...
在使用 el-table 展示数据时，单元格中的数据有可能存在空格和换行符，若不进行设置，浏览器默认会取消空格和换行符，如下所示： 解决方法：将单元格的样式 “white-space” 属性设置为“pre-wrap” 即可解决。在VUE页面中添加如下样式设置 1<template> 2 ...3</template> 4 5<style> 6 .el-table .cell.el-tooltip {7 white-space: pre-wrap;8 }9</style>1011<script>12 ... 13</script> 设置后，刷新页面。表格展示效果...
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> 为什么无法更新视图呢？？我们都知道...
Vue获取dom对象在js和jq中我们都能获取dom对象例如// 获取id=1的div标签 <div id=d1>dom对象</div>// js语法 let ele = document.getElementById(‘d1‘) // jq语法 let ele = $(‘#d1‘)那么在vue中也有实现该功能的语法，使用方法，在vue组件中，给目标标签添加上ref属性，然后在vue组件实例中调用方法去获取dom对象：<body> <div id=‘app‘>// 给目标标签添加上ref属性并赋值<div ref=‘mydiv‘></div>// 给按钮绑定点击事件触...
举个例子如下：<div style="display:inline-block;margin-left:20px;" v-show="showUpdate"><span>上次汇总时间:</span><span>{{items.length>0?dateFormat( items[0].sumLasttime):"请手动汇总更新汇总数据"}}</span></div><span>{{items.length>0?dateFormat( items[0].sumLasttime):"请手动汇总更新汇总数据"}}</span>把后台传来的时间传入自定义的日期时间规范化函数里面，在js函数里面弄成自己想要的日期时间，下面是一个例子...
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8<!--1.导入Vue的包--> 9<script src=" https://cdn.jsdelivr.net/npm/vue"></script>10</head>1112<body>13<div id="app">14<h4>{{msg}}</h4>15<!-- v-bind只能实现数据的单向绑定，从M 自动绑定到 V，无法实现数据的双向绑定 -->16<!-- <input type="t...
1、前言vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？2、使用场景 vuex存取值一般都是放在co...
有一段时间没有更新技术博文了，因为这段时间埋下头来看Vue源码了。本文我们一起通过学习双向绑定原理来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。一起来学Vue双向绑定原理-数据劫持和发布订阅一起来学Vue模板编译原理(一)-Template生成AST一起来学Vue模板编译原理(二)-AST生成Render字符串一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法这些文章统一放在我的git仓库：https://github.com/yzsunlei/java...