![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
qq_38577700
这个作者很懒,什么都没留下…
展开
-
vue-组件化开发
组件注册注意事项data必须是一个函数(实际上就是产生一个闭包环境)组件模板必须是单个的根元素(最外层的元素必须一个元素,没有兄弟元素)组件模板内容可以是模板字符串:template:反引号如果使用驼峰式组件命名,但是在标签模板必须使用短横线方式父组件向子组件传值组件内部通过props接收传递过来的值父组件通过属性将值传递给子组件...原创 2020-09-11 17:42:42 · 71 阅读 · 0 评论 -
vue常用特性
自定义指令vue.directive('focus',{//定义指令,focus是自定义的 inserted:function(el){ //el表示指令所绑定的元素 el.focus() }})//用的话加上v-focus带参数的自定义指令vue.directive('color',{//定义指令,focus是自定义的 inserted:function(el,binding){ //el表示指令所绑定的元素 el.style.backgroundColor=bind原创 2020-09-11 14:22:45 · 55 阅读 · 0 评论 -
vue模板语法学习记录
vue:渐进式javaScript框架声明式渲染—组件系统—客户端路由—集中式状态管理(vue)—项目构建实例属性:el元素的挂载位置(值可以是css选择器或者Dom节点)data:模型数据(值是一个对象)vue运行原理编译过程(vue语法—原生语法)vue语法转换成原生语法是中间的vue框架在起作用前端渲染方式原生js拼接字符串:数据以字符串的方式拼接到HTML标签缺点:代码不够规范,不利用后期维护前端模板引擎:好维护,但是没有专门提供事件机制模板语法:插值表达式:{{}},存在原创 2020-09-10 16:00:13 · 69 阅读 · 0 评论 -
vue 父与子通信的实质
要理解本质,本地新建一个属性存储的本质是什么?是值的私有化,私有化的结果就是1.你可以随意操控这个值而不影响父组件,如果传过来是引用的话,是会污染父组件的值的,所以建议做深拷贝,2.父组件传进来之后下下次进来就需要watch来监听props.value的变化,为什么这样,就是因为私有化之后你与父级的value的唯一关系断裂了。所以这个需要看场景选择是否需要私有化, 如果子组件非常依赖父组件的值,而且子组件内部根本不需要对这个值来做处理。那么直接可以使用props里面的属性。反过来,就需要私有化和watch来原创 2020-08-18 16:22:53 · 66 阅读 · 0 评论 -
vue中$event的使用
前言最近有看到别人用到event,不是很理解,然后百度了一下,做个初步的了解,先记录一下,后来有什么补充的在补充,大家有什么见解,欢迎留言。在父子组件通过自定义事件进行通信时,表示从子组件中传递出来的参数值<button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text</button><blog-post v-on:enlarge-text="postFontSize += $event">&l原创 2020-08-05 14:00:27 · 1105 阅读 · 0 评论 -
vue 监听(watch)用法整理
watch当watch的是一个Object类型的数据,如果这个对象内部的某个值发生了改变,并不会触发watch动作!也就是说,watch默认情况下,不监测内部嵌套数据的变动。但是很多情况下,我们是需要监测的!为解决这一问题,就要使用deep属性:watch:{ obj:{ handler:'doSomething', deep:true }},methods:{ doSomething(){ //当 obj 发生变化的时候,原创 2020-08-05 11:30:03 · 152 阅读 · 0 评论 -
Element el-image-viewer根据点击图片依次预览
代码 <div class="file-item" v-for="(item,index) in ruleForm.workerQualificatLicenseImage" :key="index"> <el-image @click="handleImgClick(index)" :src="ite原创 2020-07-23 11:00:02 · 1784 阅读 · 3 评论 -
vue中form表单点击一次添加一行,以及遇见的坑
效果图表单代码 <template v-for="(item, index) in ruleForm.driver"> <el-form-item label="驾驶员姓名:" prop="driverName" style="margin-right: 20px"> <!--<el-input v-model="ruleForm.driverName"><原创 2020-07-08 14:49:28 · 1377 阅读 · 0 评论 -
elementUI的树形控件添加浮动
<el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all highligh...原创 2020-07-08 10:56:52 · 1058 阅读 · 0 评论 -
vue中mounted和created的使用和区别
mounted和created的区别created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = docum...原创 2019-11-27 10:49:58 · 844 阅读 · 0 评论 -
Vue基础语法总结大全
data属性- v-html,v-text 采用{{}}语法==>插值运算 v-html:它可以加标签,它会解析成html v-text:不能加标签,如果加了,它会当作字符串展示出来例子:<div id="app"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题,可以显示++++ -...原创 2019-11-26 09:43:22 · 1457 阅读 · 1 评论 -
利用 Vue 和 element 的实现table增、删、改表格数据的模糊匹配搜索
表格的删除HTML代码 <el-table-column label="操作" align="center"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index,...原创 2019-11-22 10:30:39 · 974 阅读 · 0 评论 -
vue项目是怎么运行起来的
涉及到的项目文件最近因为公司项目问题,开始学习vue。万事开头难,开始写博客,纪录一下小白的成长,也方便以后看index.html >主页,项目入口main.js >main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件App.vue > 根组件 所有页面都是在App.vue下进行切换的router/index.js >路由文件i...原创 2019-11-21 16:18:08 · 1472 阅读 · 0 评论 -
新手vue框架搭建
新手vue框架搭建什么是脚手架“脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)编译器来根据这份specification生成相应的代码,进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架",在脚手架上面去更高效的建造出强大的应用!好吧,其实说白点就...原创 2019-11-18 15:56:17 · 183 阅读 · 0 评论