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 ...

随机推荐

关于Spatial referencing by geographical identifiers 标准
地理信息空间参考大体可以分为两类,ISO给出了分类:Spatial referencing by geographical identifiers(根据地理标识符的空间定位,ISO 19112)与Sp ...
Linear Predictors
In this chapter we will study the family of linear predictors, one of the most useful families of hy ...
ODI 12.1.3发布，提升支持大数据的能力
此次发布的ODI新版本,目的是更好的支持当前市场上的大数据平台. 大数据基因在不改变ODI工作效率的情况下,ODI增加了越来越多的数据源集成能力.ODI是在Oracle平台上标准的E-LT工具,事实上 ...
UE正则表达式查找和替换（将【，；】）替换为换行
IOS 用keychain（钥匙串）保存用户名和密码
IOS系统中,获取设备唯一标识的方法有很多: 一.UDID(Unique Device Identifier) UDID的全称是Unique Device Identifier,顾名思义,它就是苹果I ...
Qt调用WebService
从网上查找Qt调用WebService的方案,需要下载三方的类库,而且需要使用好几个控制台命令,才能生成代理客户端类.因为只是简单的测试,没有采用这种方式,直接使用HTTP的Get获取网站内容,也非常 ...
Interview----求 1+2+...+n, 不能用乘除法、for、while if、else、switch、case 等关键字以及条件判断语句 (A?B:C)
题目描述: 求 1+2+...+n, 要求不能使用乘除法.for.while.if.else.switch.case 等关键字以及条件判断语句 (A?B:C). 分析: 首先想到的是写递归函数,但是遇 ...
js中的apply调用
今天看了阮一锋老师的一篇文章,感觉很明了对闭包的理解,尤其是文章中的apply的介绍 apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象. ...
PHP数据类型和常量
数据类型的转换一种是强制转换语法:setType(变量,类型).这个函数将原变量的类型转变在赋值前使用(类型)的形式,不会改变原变量的类 ...
[数据结构]KMP小结
KMP小结 By Wine93 2013.9 1.学习链接: http://www.matrix67.com/blog/archives/115 2.个人小结 1.KMP在字符串中匹配中起着巨大作 ...

Vue.js相关知识2-组件

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

随机推荐

热门专题