Vue.js相关知识2-组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .v-link-active {
            color: red;
        }
    </style>
</head>
<body>

<h3>#使用props传递数据</h3>
<div id="dr01">
    <div>组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。</div>
    <br />
    <child msg="hello, vue.js!"></child>
</div>

<hr />

<h3>#camelCase vs. kebab-case</h3>
<div id="dr02">
    <div>HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）</div>
    <br />
    <!-- kebab-case in html -->
    <child02 my-message02="Hello, this is kebab-case message!"></child02>
</div>

<hr />

<h3>#动态Props</h3>
<div id="dr03">
    <div>
        <input v-model="parentMsg" placeholder="please input parentMsg" />
    </div>
    <br />
    <!-- 用v-bind绑定数据parentMsg到组件中 -->
    <child03 v-bind:my-message03="parentMsg"></child03>
    <!-- 缩写v-bind-->
    <child03 :my-message03="parentMsg"></child03>
</div>

<hr />

<h3>#字面量语法 VS 动态语法</h3>
<div id="dr04">
    <!-- 这里传递是字符串 -->
    <child04 my-message04="123+456"></child04>
    <!-- 这里用了动态语法，传递的值会通过js的表达式计算，传递的是数字 -->
    <child04 :my-message04="123+456"></child04>
</div>

<hr />

<h3>#Prop类型绑定（单向、双向）</h3>
<div id="dr05">
    <div>
        <div>vue实例：</div>
        <input v-model="name" />
    </div>
    <br />
    <div>
        <div>component组件（默认）：</div>
        <child05 :my-message05="name"></child05>
        <div>component组件（once）：</div>
        <child05 :my-message05.once="name"></child05>
        <div>component组件（sync）：</div>
        <child05 :my-message05.sync="name"></child05>
    </div>
</div>

<h3>#Prop验证</h3>
<div id="dr06">
    <div>
        <span>vue实例</span>
        <div>
            name:{{dr.name}}, age:{{dr.age}}.
        </div>
        <div>
            <input v-model="telphone" />
        </div>
    </div>
    <br />
    <div>
        <span>vue自定义组件</span>
        <child06 :msg_null="123+456" msg_string="this is string" :msg_number="99" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child06>
    </div>
</div>

<script src="vue.js"></script>
<script src="vue-resource.min.js"></script>
<script src="vue-router.js"></script>
<script src="demo_2.js"></script>
</body>
</html>

js：

//********************************************************************
//使用props传递数据
//注册组件"child"
Vue.component("child", {
    //声明props属性
    props: ['msg'],
//props可以用在模板内
//可以用"this.msg"设置
template: '<div>msg: {{msg}}</div>'
});
var dr01 = new Vue({
    el: "#dr01",
});
//********************************************************************
//camelCase vs. kebab-case
//注册组件child02
Vue.component("child02", {
    //在js中用驼峰命名法
    props: ["myMessage02"],
    template: "<div>myMessage02: {{myMessage02}}</div>"
});
var dr02 = new Vue({
    el: "#dr02",
});
//********************************************************************
//动态Props
//注册组件myMessage03
Vue.component("child03", {
    props: ['myMessage03'],
template: "<div>myMessage03: {{myMessage03}}</div>"
});
var dr03 = new Vue({
    el: "#dr03",
    data: {
        parentMsg: "Hello, this is parentMsg!",
    }
});
//********************************************************************
//字面量语法 VS 动态语法
Vue.component("child04", {
    props: ["myMessage04"],
    template: "<div>myMessage04: {{myMessage04}}</div>",
});
var dr04 = new Vue({
    el: "#dr04",
});
//********************************************************************
//Prop类型绑定
Vue.component("child05", {
    props: ["myMessage05"],
    template: '<input type="text" v-model="myMessage05" />'
});
var dr05 = new Vue({
    el: "#dr05",
    data: {
        name: "DarkRanger",
    }
});

//********************************************************************
//Prop验证
Vue.component("child06", {
    props: {
        //基础类型检测("null"意思是任何类型都可以)
        msg_null: null,
        //String类型，必须是定义过的，可以是空字符串""
        msg_string: {
            type: String,
            required: true,
        },
        //Number类型，默认值100
        msg_number: {
            type: Number,
            default: 100,
        },
        //Object类型，返回值必须是js对象
        msg_obj: {
            type: Object,
            default: function() {
                return {
                    name: "DarkRanger",
                    age: "18",
                }
            }
        },
        //指定这个prop为双向绑定
        //如果绑定类型不对将抛出一条警告
        msg_twoway: {
            type: String,
            twoWay: true,
        },
        //自定义验证，必须是Number类型，验证规则：大于0
        msg_validate: {
            type: Number,
            validator: function(val) {
                return val > 0;
            }
        },
        //将值转为String类型
        //在设置值之前转换值(1.0.12+)
        msg_number2string: {
            coerce: function(val) {
                return val + ""
            }
        },
        //js对象转JSON字符串
        msg_obj2json: {
            coerce: function(obj) {
                return JSON.stringify(obj);
            }
        },
        //JSON转js对象
        msg_json2obj: {
            coerce: function(val) {
                return JSON.parse(val);
            }
        },
    },
    template: '<div>msg_null: {{msg_null}}</div><div>msg_string:{{msg_string}}</div><div>msg_number: {{msg_number}}</div><div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div><div>msg_twoway:<input v-model="msg_twoway"></div><div>msg_validate:{{msg_validate}}</div><div>msg_number2String: {{msg_number2string}}</div><div>msg_obj2json: {{msg_obj2json}}</div><div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
});

var dr06 = new Vue({
    el: "#dr06",
    data: {
        telphone: "0356-1234567",
        mobilephone: 15912345678,
        dr: {
            name: "DarkRanger",
            age: 25
        },
        drJson: '{"name":"DarkRanger","age":25}',
}
})

Vue.js相关知识2-组件的更多相关文章

Vue.js 相关知识（组件）
1. 组件介绍组件(component),vue.js最强大的功能之一作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体根组件:我们实例化的Vue对象就是一个组件 ...
Vue.js相关知识3-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js相关知识1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js 相关知识（路由）
1. 简介路由,工作原理与路由器相似(路由器将网线总线的IP分发到每一台设备上),Vue中的路由根据用户在网页中的点击,将其引导到对应的页面. 2. 使用步骤安装vue-router或者直接引入v ...
Vue.js 相关知识（动画）
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
Vue.js 相关知识（基础）
1. Vue.js 介绍 Vue,读音 /vjuː/,类似于 view),是一套用于构建用户界面的渐进式框架(重点在于视图层). 作者:尤雨溪注:学习 vue.js 时,一定要抛弃 jQuery 的 ...
Vue.js相关知识4-路由
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
Vue.js 相关知识（脚手架）
1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤安装npm 或 cnpm n ...
vue.js相关UI组件收集
内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

随机推荐

bzoj 1185 旋转卡壳最小矩形覆盖
题目大意就是求一个最小矩形覆盖,逆时针输出其上面的点这里可以看出,那个最小的矩形覆盖必然有一条边经过其中凸包上的两个点,另外三条边必然至少经过其中一个点,而这样的每一个点逆时针走一遍都满足单调性 ...
【转】CentOS yum安装和卸载软件的使用方法
在CentOS yum安装和卸载软件的使用方法安装方法安装一个软件时. CentOS yum -y install httpd安装多个相类似的软件时 CentOS yum -y install ...
windows azure中国里面建立一个虚拟机，与虚拟机建立通信里面部署IIS，外网访问
在windows azure中国里面建立一个虚拟机,里面部署IIS,外网不能访问么? 外网访问的地址是给的那个DNS地址 ,比如我的是 DNS 名称 urbanairserver.cloudapp. ...
Activity(活动)-初讲
是一种可以包含用户界面的组件,主要用于和用户进行交互. 上一次我们的MainActivity.java 是ADT帮我们自动创建的.手动创建Activity可以加深我们的理解和记忆,于是我们先自己手动创 ...
如何使用 PagedList.Mvc 分页
刚开始找PagedList分页不是例子太复杂,就是写的过于简略,由于对于MVC的分页不太了解,之前使用的都是Asp.Net 第三方控件 + 数据库存储过程分页.还是老外写的例子简捷,https://g ...
hadoop生态系统的详细介绍
1.Hadoop生态系统概况 Hadoop是一个能够对大量数据进行分布式处理的软件框架.具有可靠.高效.可伸缩的特点. Hadoop的核心是HDFS和MapReduce,hadoop2.0还包括YAR ...
hdu 2037
PS: - -原本想的是排序开始时间和消耗时间..后来想到可以排序结束时间..后来还wa了一次,因为排序的时候溢出了思路: 1 3 //13 4 //20 7 3 8 2 9 5 10 //36 ...
2016 - 1- 21 - RunLoop使用(2016-1-24修改一次)&(2016 - 1 - 24 再次修改)
一:常驻线程 :当需要一个线程一直处理一些耗时操作时,可以让它拥有一个RunLoop.具体代码如下: 1.通过给RunloopMode里加源来保证RunLoop不直接退出. 这里有个很重要得知识 ...
Android无限循环轮播广告位Banner
Android无限循环轮播广告位Banner 现在一些app通常会在头部放一个广告位,底部放置一行小圆圈指示器,指示广告位当前的页码,轮播展示一些图片,这些图片来自于网络.这个广告位banner ...
HDU 4971 （最小割）
Problem A simple brute force problem (HDU 4971) 题目大意有n个项目和m个问题,完成每个项目有对应收入,解决每个问题需要对应花费,给出每个项目需解决的问 ...

Vue.js相关知识2-组件

Vue.js相关知识2-组件的更多相关文章

随机推荐

热门专题