vue 问题总结

1、写debugger可以进行调试,不光vue项目能用,应该是chrome浏览器支持

2、vue在编写组件的时候,如果要是要引入多个组件,要在所有组件最外面加上一层div,也就是说,组件里面必选是个整体,如下

写法一

<template>

<diy-component></diy-component>

</template>

写法二

<template>

<div>

<diy-component1></diy-component1>

<diy-component2></diy-component2>

...

</div>

</template>

3、获取dom元素的属性的方法,可以是设置ref,ref不能设置在组件上,会获取不到信息,要在组件外面加上一个div,给这个div设置ref

html

<template>

<div ref="mycomponent">

<diy-component></diy-component>

</div>

</template>

script

export default{

mounted(){

console.log(this.$refs.mycomponent.offsetHeight)//输出这个组件所占的高度

}

}

4、向子组件传递数据

调用组件页面

transmitdata:对象类型

transmitstring:字符串类型

html

<diy-component :transmitdata="obj" transmitstring="string"></diy-component>

script

export default{

data(){

obj:{"name":"jack"}

}

}

子组件

html

<div>

<span>{{transmitdata.name}}</span>

<span>{{transmitstring}}</span>

</div>

script

export default{

porps:[‘transmitdata‘,‘transmitstring‘]

}

5、修改mint-ui组件默认样式

style标签里,没有写scoped表示全局样式

举例修改.picker-center-highlight的样式,如下

<style>

.picker-center-highlight{//有的时候优先级会比较低,需要在添加一些父级的类名,来提高优先级

background:red;

}

.h-group .picker-center-highlight{//提示优先级,也是做了限定,style标签里没有写scoped,表示是全局的样式,点要注意

background:red;

}

</style>

6、父组件调用子组件里面的方法

需要在父组件中,给子组件的ref属性赋值,不能重复,相当于id,用于查找这个节点,通过$refs.childComponent,就可以找到子组件内部的函数

父组件代码

html

<template>

<div>

<diy-child ref="childComponent"></diy-child> <!--给子组件的ref属性赋值-->

</div>

</template>

script

export default{

methods:{

callChildfun:function(){//调用子组件的方法

this.$refs.childComponent.fun();//fun是子组件里的一个方法

}

}

}

子组件代码

script

export default{

methods:{

fun:function(){//被父组件调用的方法

console.log("被父组件调用");

}

}

}

7、子组件向父组件传递数据

parentFun:子组件回调父组件的函数

childFun:子组件中触发回调的函数

transmitVariable:传递变量,在父子两个组件中进行传递

通过$emit函数完成回调的

编写步骤,1.先写父组件里的回调函数,2.编写子组件的调用函数,3.在父组件的html片段中进行绑定

父组件

html

<template>

<div>

<diy-child v-on:transmitVariable="parentFun"></diy-child><!--使用v-on对transmitVariable进行绑定-->

</div>

</template>

script

export default{

methods:{

parentFun:function(data){//回调函数

console.log(data);//子组件返回的数据

}

}

}

子组件

script

export default{

methods:{

childFun:function(callbackData){//触发回调函数

this.$emit(‘transmitVariable‘);//不传递参数

this.$emit(‘transmitVariable‘,callbackData);//传递参数,callbackData的类型:String,Array,Object...

}

}

}

8、监听事件

在向子组件传递数据的过程中,数据可能会发生变化,最开始的时候也有可能是为空的,这个时候子组件就可能获取不到数据

编写步骤:1.初始化变量,2.监听变量,3.变量赋值操作,这三个步骤都要有,没有第三个会没有刷新数据的

html

<template>

<div>

<diy-child :transmitData:"listdata"></diy-child><!--数据绑定-->

</div>

</template>

script

export default{

components:{diy-child},

data(){

return {

listdata:[]

}

},

mounted(){

this.listdata:[{"name":"jack"},{"name":"tom"}] //传递数据

}

}

子组件

html

<template>

<div>

<div v-for="item in items">名称:{{item.name}}</div>

</div>

</template>

script

export default {

props:["listdata"],//获取数据

data(){

return {

items:[]; //初始化创建变量

}

},

watch:{//监听变量事件,当父级传递数据发生变化时,再执行一次init函数

itmes(){

this.init();

}

},

mounted(){

this.init(); //程序开始执行

},

methods:{

init(){

this.items=this.listdata; //获取数据

}

}

}

时间: 2024-10-14 01:54:34

vue 问题总结的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

在浏览器上安装 Vue Devtools工具

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools. 2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序. 3)编译完成后,目录结构如下: 修改shells.chrome目录

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue项目搭建

VUE项目搭建 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev

Vue内容分发slot

前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 <slot> 元素作为原始内容的插槽.本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译.假定模板为 <child-component> {{ message }} </child-compone

一步一步学习Vue(十一)

本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); /** *

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之间,进行数据观测(data observer) ,也就是在这个时候开始监控data中的数据变化了,同时初始化事件 created钩子函数和beforeMount间的生命周期 对于created钩子函数和beforeMount间可能会让人感到有些迷惑,下面我就来解释一下: el选项的有无对生命周期过程