文档章节

vue 2.0后的使用(一)

Chason-洪
 Chason-洪
发布于 2017/04/25 14:04
字数 896
阅读 57
收藏 0
点赞 0
评论 0

一.引入外部文件

导入文件:import  XXX  from  "./XXX" ;

eg:

import BScroll from "better-scroll";
import shopcart from "../shopcart/shopcart.vue";
import cartcontrol from "../cartcontrol/cartcontrol.vue"

 

二.  导入外部vue文件。且当前页面(父页面)与外部页面(子页面)的通信:

    ①导入其他vue文件的html内容:先import  XXX  from  " xx.vue".           

import header from "./components/header/header.vue";

    ②在export default 中components:{XXX};//注册组件                

components:{
  "v-header": header
},

     ③ 再在html中使用<xxx><xxx>       

<v-header></v-header>

     ④这样的标签即可导入外部vue文件html。

     ⑤ 通信的话父页面<xxxx  :tongxin="data"></xxxx>

           //注意冒号,相当于v-bind:tonxin="data";        

<v-header :tongxin="data"></v-header>

     ⑥子页面在export default中props:['tongxin']//选择子页面监听.props与data,methods同级别。

                

                 default//默认值

                   

              ⑦子页面使用父页面传过来的数据直接this.tongxin就可以监听到了

 

 

三.自定义事件(子页面触发父页面自定义事件

     方法①   

 eg:      

<xxx v-on:method="methodname"></xxx> 

      父页面自定义了一个方法名为methodname的method事件   

methods:{                                                                                                                   
  methodname:function(parameter){                                                                          
     console.log(parameter)                                                                           
   }
 }  

 子页面(使用方法): 

 //method为事件名,paramter为method事件的methodname方法的参数.                  

this.$emit("method","paramter");                     

     

方法②

           

四.请求网络数据。一般放在created钩子函数中,这个钩子在实例被创建之后被调用。

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,

https://www.kancloud.cn/yunye/axios/234845

 

五.DOM 更新循环结束之后执行延迟的回调。

this.$nextTick(() => {
    console.log("DOM更新了")
})

 

六.设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制.

比如你数据绑定的是一个对象中的属性,如果你要改变这个对象中的状态,你不能使用平常的操作对象的方法,否则没反应。你要用Vue.set方法才能让这个对象响应。

    例如       

<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
props:{
    food:{
        type:Object
    }
},

        无效

     so:     

    

      eg:

                  

                  

 

七.父组件获取子组件的实例。并触发子组件方法      

eg

    方法①

//this.$children 是获取所有子组件的实例,返回一个数组.
for(let i=0;i<this.$children.length;i++){
       //通过this.$children[i].$el.className来指定获取哪一个子组件的实例
      if(this.$children[i].$el.className=="shopcart"){
          //获取子组件实例后触发子组件methods中的drop方法,传了"param"的参数进去
          this.$children[i].drop("param");
      }
 }

  方法②  

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例:

<food :food="selectFood" ref="food"></food>   //父组件中ref 引用
this.$refs.food.show(); //父组件中this.$refs.food找到子组件的实例并触发子组件methods的show方法

 

八. computed和methods

methods是个方法,比如你点击事件要执行一个方法,这时候就用methods,
computed是计算属性,实时响应的,比如你要根据data里一个值随时变化做出一些处理,就用computed。

九.过滤(示例)

this.ratings

eport default{
    computed:{
        positives(){
            //this.ratings是一个数组
            return this.ratings.filter((key) => {
                    //key.rateType是数组中每个对象的rateType的                              
                    return key.rateType===0;
          })
        }
    },

十.DOM渲染后

 

十一watch监听数据变化

    

十二.vue获取DOM元素

<div ref=“aa"></div>  //ref标记,获取DOM方法:this.$refs.aa

//点击获取DOM元素
<div @click=“itemClick($event)"></div>
//然后在点击事件中:e.currentTarget获取DOM元素 

 

© 著作权归作者所有

共有 人打赏支持
Chason-洪
粉丝 12
博文 155
码字总数 165549
作品 0
漳州
程序员
入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔 ⋅ 06/02 ⋅ 0

阿里系 React 项目飞冰 2.0 正式发布:支持 Vue 项目开发

飞冰 2.0 大版本已正式发布,带来了许多重要更新。 飞冰 2.0 是什么? 飞冰通过 Iceworks GUI 工具、完善的开发文档、丰富的组件等,无需安装配置任何前端开发环境(比如安装 node 等)、无需...

局长 ⋅ 05/08 ⋅ 17

vue 2.0后的使用(二)

ref ref可以获取到Dom元素还可以获取到vue组件,从而获取到vue组件中的数据 Vue组件缓存或是路由跳转后再次打开不刷新,以及缓存页面的传值等 如果你想要打开组件后,再次打开组件不重新刷新...

Chason-洪 ⋅ 2017/11/08 ⋅ 0

飞冰 2.0 正式发布并支持 Vue 项目开发

距离 1.0 正式版发布又过了两个月,飞冰迎来了 2.0 大版本的更新。 飞冰 2.0 是什么? 详细的飞冰背景和介绍等,请参照 1.0 正式版发布的介绍,这里不再赘述:zhuanlan.zhihu.com/p/34265596...

yujiangshui ⋅ 05/08 ⋅ 0

Vue进阶(四):使用 Vuex + axios 发送请求

Vue进阶(四):使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

基于 Vue 2.0 和高德地图的地图组件 - vue-amap

vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定 开发者无需关心地图的具体操作 安装 npm install -S vue-amap 快速上手 引入vue-amap // 引入...

jsing ⋅ 05/22 ⋅ 0

vue如何新建一个项目(超详细哦)

vue创建项目(npm安装→初始化项目→发布) 第一步npm安装 首先:先从nodejs.org中下载nodejs 双击安装,在安装界面一直Next 直到Finish完成安装。 打开控制命令行程序(CMD),检查是否正常 ...

程序员是粉色的 ⋅ 05/27 ⋅ 0

Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh ⋅ 05/14 ⋅ 0

VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方 ⋅ 01/09 ⋅ 0

vue-cli 3.0 使用全过程讲解

首先在使用 创建项目的时候要选择使用 css 预处理器。 安装 vue-cli 首先使用 npm 安装 vue-cli v3.0。 安装完成后使用 查看版本号,如果显示版本号说明安装完成。 创建项目 vue-cli v3.0 创...

沈鑫Real ⋅ 06/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 16分钟前 ⋅ 1

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 41分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 45分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部